Base Text color
Text color variables define the colors used for different text elements, including primary, secondary, tertiary, brand, and alert colors. These variables ensure clear visual hierarchy and readability, making it easy for users to navigate and comprehend your content.
Background color
Background color variables manage the colors for various background elements. This includes default, primary, secondary, tertiary, brand, and alert backgrounds. These variables help create a structured and visually appealing layout, providing clear distinction between different sections and states.
Border color
Border color variables define the colors used for element borders. This group includes default, primary, secondary, tertiary, inverse, and disabled variables. Consistent border colors help delineate components, enhance visual hierarchy, and improve the overall aesthetics of your design.
Focus ring color
Focus ring color variables are used to highlight interactive elements when they are focused. This group includes primary, secondary, success, and error variables. These colors enhance accessibility by providing clear visual feedback, helping users navigate and interact with your design more effectively.
Chart color
Chart color variables are specifically tailored for data visualization. This group includes brand, first, second, third, fourth, and mono bar variables. These colors ensure that charts and graphs are visually engaging and easy to understand, using a consistent palette that helps distinguish different data sets and categories.
Icon color
Icon color variables manage the colors used for various icons within your design. This group includes primary, secondary, brand, informal, warning, success, and error icon variables. These variables ensure that icons are easily recognizable and align with the overall color scheme of your design system, contributing to a cohesive visual experience.