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.
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.
Colors associated with the Data Visualization, like fills, points and backgrounds. They point to Visualization Data reference colors under the hood and respect color modes.
Colors associated with the Olympus brand.
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.