Skip to main content

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

Main default
Main subtle
Main disabled
Main light
Main inverse

Default Border Colors

Border default
Border subtle
Border disabled
Border selected
Border hover
Border pure
Border primary main

Surface default colors

Surface default
Surface default inverse
Surface hover
Surface selected
Surface selected hover
Surface disabled
Surface cool
Surface warm

Main Colors

Main primary
Main secondary
Main positive
Main warning
Main negative
Main info

Border Colors

Border primary
Border secondary
Border positive
Border warning
Border negative
Border info

Surface colors

Surface primary
Surface secondary
Surface positive
Surface warning
Surface negative
Surface info

Surface Subtle colors

Surface primary subtle
Surface secondary subtle
Surface positive subtle
Surface warning subtle
Surface negative subtle
Surface info subtle

State Default colors

State default enabled
State disabled disabled
State default hover
State default selected
State default focus

State Primary colors

State primary enabled
State primary hover
State primary selected
State primary focus

State Secondary colors

State secondary enabled
State secondary hover
State secondary selected
State secondary focus

State Positive colors

State positive enabled
State positive hover
State positive selected
State positive focus

State Negative colors

State negative enabled
State negative hover
State negative selected
State negative focus

State Info colors

State info enabled
State info hover
State info selected
State info focus

State Inverse colors

State Inverse enabled
State Inverse hover
State Inverse selected
State Inverse focus

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.

Surface avatar blue
Surface avatar green
Surface avatar orange
Surface avatar pink
Surface avatar purple
Surface avatar teal
Surface avatar yellow

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'.

Cool 10
Cool 20
Cool 30
Cool 40
Cool 50
Cool 60
Cool 70
Cool 80
Cool 90
Cool 100
Warm 10
Warm 20
Warm 30
Warm 40
Warm 50
Warm 60
Warm 70
Warm 80
Warm 90
Warm 100

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.

Blue 10
Blue 20
Blue 30
Blue 40
Blue 50
Blue 60
Blue 70
Blue 80
Blue 90
Blue 100
Green 10
Green 20
Green 30
Green 40
Green 50
Green 60
Green 70
Green 80
Green 90
Green 100
Red 10
Red 20
Red 30
Red 40
Red 50
Red 60
Red 70
Red 80
Red 90
Red 100
Orange 10
Orange 20
Orange 30
Orange 40
Orange 50
Orange 60
Orange 70
Orange 80
Orange 90
Orange 100
Purple 10
Purple 20
Purple 30
Purple 40
Purple 50
Purple 60
Purple 70
Purple 80
Purple 90
Purple 100
Yellow 10
Yellow 20
Yellow 30
Yellow 40
Yellow 50
Yellow 60
Yellow 70
Yellow 80
Yellow 90
Yellow 100
Teal 10
Teal 20
Teal 30
Teal 40
Teal 50
Teal 60
Teal 70
Teal 80
Teal 90
Teal 100
Pink 10
Pink 20
Pink 30
Pink 40
Pink 50
Pink 60
Pink 70
Pink 80
Pink 90
Pink 100