Colors
Zeta's color system is backed by principles of perception and accessibility; curated for adaptability and adoption for your solution. Color is the visual language in which we communicate ideas, direct attention, and bring delight.
Semantics
Colors are used sparingly across products as a means to employ meaning and discretion for the user. Using too much color can negatively impact a user experience.
Zeta assigns meaning to a set of colors in order to set consistent expectations for users. Semantics can be used to convey positive, negative, warning, and informative direction. Semantic colors should be used in conjunction with icons and text to ensure that meaning is not lost for users who are unable to differentiate colors. Semantic color have been tested against different color blindness conditions.
Default Main Colors
Default Border Colors
Surface default colors
Main Colors
Border Colors
Surface colors
Surface Subtle colors
State Default colors
State Primary colors
State Secondary colors
State Positive colors
State Negative colors
State Info colors
State Inverse colors
Avatar Surface colors
In some instances, we have component-specific colors that are used to indicate state. These colors are not used in the design system generally, but are used in specific components.
Primitives
Primitive tokens are the foundational elements of design systems. They should be used as the base values that are used to create the semantic values. The semantic values are the ones that are used in the components.
Neutrals
Zeta Color System uses two families of neutral tones to establish a foundation, 'cool' and 'warm'.
Color system
The color convention follows a series of tints and shades for various hues selected on a 10-swatch scale with identifiers 10-100. The identifier correlates directly with the contrast level against light and dark themes.