An overview of all available color tokens (CSS variables) in the OLYSENSE Design System
System tokens give you a semantic way to reference colors in your application. System color tokens point to Reference tokens under the hood, and respect color modes. These are the most commonly used design tokens applied throughout all of the OLYSENSE Design System.
An accent color is a distinctive color used sparingly to draw attention to key elements and create visual interest. It is typically used to highlight important actions and content. You often see accent colors used on Primary Buttons and Focus Rings.
Colors used to apply different elevations. They point to Neutral reference colors under the hood and respect color modes.
Status colors apply color to UI elements that have specific meaning in the system, like status and messaging components such as Tags, Badges and Alerts. They are designd to work as pairs with On color tokens. They point to Base reference colors under the hood and respect color modes.
Colors applied to text or icons on top of their paired Accent, Status or Surface color. For example, —ods-color-on-accent-muted is used for text and icons against the —ods-sys-color-accent-muted Accent color.
Colors that are applied to border and dividers.
Colors used to indicate or show interaction, such as idle, active and hover states.
Focus tokens are used for focus rings. Usually applied to Buttons and Input elements.
Shadow tokens are used on container elements to give them a sense of elevation or depth. Scrim tokens are applied to backgrounds or overalls used with Modals when you need translucency.
Static color should only be used when you know the color will not change between themes or color modes (light and dark).
Component tokens are used for values that are more specific or unique than System tokens. These tokens are limited and System tokens are preferred. Component tokens may reference both System and Reference tokens under the hood, and respect color modes.
Control tokens are abstract token that should be used on Form type elements, such an Input, Radio, Checkbox. etc.
Colors associated with the Data Visualization, like fills, points and backgrounds. They point to Data reference colors under the hood and respect color modes.
Reference tokens are the lowest level tokens and map directly to a raw value. They are only to be used as a reference for System and Component tokens. Reference tokens don’t respect color modes and should never be used directly in code or design.