Cornerstone

Quick Links

↑↓ Navigate↵ Select
Esc Close
LightDarkSystemDocs
Design TokensColor

Color

Cornerstone’s color system is made up of three layers: a color palette that gives you a full spectrum of hues, variant colors that define semantic color variations (like success and danger), and colors for themed elements that apply specific tints from your palette and variant colors to the elements that make up a theme.

For an overview of how theming works across the library, see Theming .

Color Palette

Color palettes give you a full spectrum of colors to use in your project and are the lowest-level color tokens. Cru’s palette includes 19 hues, each with 11 numeric tints that make up a color scale from light to dark — 95 is near white, 05 is near black.

These numeric tints help ensure accessible color contrast per WCAG 2.1 success criteria:

  • A difference of 40 provides a minimum 3
    contrast ratio, suitable for large text and icons (AA)
  • A difference of 50 provides a minimum 4.5
    contrast ratio, suitable for normal text (AA) and large text (AAA)
  • A difference of 60 provides a minimum 7
    contrast ratio, suitable for all text (AAA)
Lemon
--cs-color-lemon-*
95
90, the key step
80
70
60
50
40
30
20
10
05
Yellow
--cs-color-yellow-*
95
90
80, the key step
70
60
50
40
30
20
10
05
Orange
--cs-color-orange-*
95
90
80
70
60, the key step
50
40
30
20
10
05
Vermilion
--cs-color-vermilion-*
95
90
80
70
60
50, the key step
40
30
20
10
05
Rose
--cs-color-rose-*
95
90
80, the key step
70
60
50
40
30
20
10
05
Pink
--cs-color-pink-*
95
90
80
70
60, the key step
50
40
30
20
10
05
Cerise
--cs-color-cerise-*
95
90
80
70
60
50, the key step
40
30
20
10
05
Ruby
--cs-color-ruby-*
95
90
80
70
60
50
40
30, the key step
20
10
05
Sky
--cs-color-sky-*
95
90, the key step
80
70
60
50
40
30
20
10
05
Cyan
--cs-color-cyan-*
95
90
80
70, the key step
60
50
40
30
20
10
05
Turquoise
--cs-color-turquoise-*
95
90
80
70
60
50, the key step
40
30
20
10
05
Navy
--cs-color-navy-*
95
90
80
70
60
50
40
30
20
10, the key step
05
Mint
--cs-color-mint-*
95
90
80, the key step
70
60
50
40
30
20
10
05
Green
--cs-color-green-*
95
90
80
70, the key step
60
50
40
30
20
10
05
Moss
--cs-color-moss-*
95
90
80
70
60
50
40, the key step
30
20
10
05
Olive-drab
--cs-color-olive-drab-*
95
90
80
70
60
50
40
30
20, the key step
10
05
Gray
--cs-color-gray-*
95, the key step
90
80
70
60
50
40
30
20
10
05
Graphite
--cs-color-graphite-*
95
90
80
70
60
50
40, the key step
30
20
10
05
Purple
--cs-color-purple-*
95
90
80
70
60
50, the key step
40
30
20
10
05

Core Colors

In addition to numeric tints, each hue has a core color — the most colorful, vibrant tint in the scale. The exact tint varies by palette. Use --cs-color-{hue} when you want a representative color for a hue without specifying a tint.

The tint for each core color is stored as an integer in --cs-color-{hue}-key. These tokens are used internally to determine a compatible text color when using the core color as a background and are not used directly by components.

Using this key, the color system derives a paired on color guaranteed to meet WCAG 2.1 AA contrast when placed on top of the corresponding core color. If the core tint is light (≥ 60), the on color is a dark shade of that hue; otherwise it is white. Use --cs-color-{hue}-on any time you render text or icons on a core color background.

Core ColorKeyOn ColorPreview
--cs-color-lemon--cs-color-lemon-key--cs-color-lemon-on
Aa
--cs-color-yellow--cs-color-yellow-key--cs-color-yellow-on
Aa
--cs-color-orange--cs-color-orange-key--cs-color-orange-on
Aa
--cs-color-vermilion--cs-color-vermilion-key--cs-color-vermilion-on
Aa
--cs-color-rose--cs-color-rose-key--cs-color-rose-on
Aa
--cs-color-pink--cs-color-pink-key--cs-color-pink-on
Aa
--cs-color-cerise--cs-color-cerise-key--cs-color-cerise-on
Aa
--cs-color-ruby--cs-color-ruby-key--cs-color-ruby-on
Aa
--cs-color-sky--cs-color-sky-key--cs-color-sky-on
Aa
--cs-color-cyan--cs-color-cyan-key--cs-color-cyan-on
Aa
--cs-color-turquoise--cs-color-turquoise-key--cs-color-turquoise-on
Aa
--cs-color-navy--cs-color-navy-key--cs-color-navy-on
Aa
--cs-color-mint--cs-color-mint-key--cs-color-mint-on
Aa
--cs-color-green--cs-color-green-key--cs-color-green-on
Aa
--cs-color-moss--cs-color-moss-key--cs-color-moss-on
Aa
--cs-color-olive-drab--cs-color-olive-drab-key--cs-color-olive-drab-on
Aa
--cs-color-gray--cs-color-gray-key--cs-color-gray-on
Aa
--cs-color-graphite--cs-color-graphite-key--cs-color-graphite-on
Aa
--cs-color-purple--cs-color-purple-key--cs-color-purple-on
Aa

Variant Colors

Variant colors are aliases for specific hues in your color palette to give them an extra layer of semantic meaning. These variants are familiar, meaningful hues that reinforce a specific message or intended use:

VariantUseDefault
BrandProduct recognition yellow
NeutralGeneric and ordinary content gray
HighlightEmphasis without a status meaning purple
InformationNeutral, informative messages turquoise
SuccessValidity or confirmation green
WarningCaution or uncertainty orange
DangerErrors or risk cerise
LinkHyperlinks cyan

Brand and neutral are used by nearly every element, component, and pattern across the library. Success, warning and danger are used selectively by components that could benefit from semantic reinforcement, such as buttons and callouts. Highlight, information and link are Cru’s own additions to the set.

Each variant color is an alias for a palette color and follows the same token format: --cs-color-{variant}-{tint}.

Brand
--cs-color-brand-*
95
90
80
70
60
50
40
30
20
10
05
Neutral
--cs-color-neutral-*
95
90
80
70
60
50
40
30
20
10
05
Highlight
--cs-color-highlight-*
95
90
80
70
60
50
40
30
20
10
05
Information
--cs-color-information-*
95
90
80
70
60
50
40
30
20
10
05
Success
--cs-color-success-*
95
90
80
70
60
50
40
30
20
10
05
Warning
--cs-color-warning-*
95
90
80
70
60
50
40
30
20
10
05
Danger
--cs-color-danger-*
95
90
80
70
60
50
40
30
20
10
05
Link
--cs-color-link-*
95
90
80
70
60
50
40
30
20
10
05

Core Colors

Just like the hues in your color palette, each variant has a core color — an alias for the most colorful, vibrant tint in the color scale selected for your variant. Use --cs-color-{variant} when you want a representative color for a variant without specifying a tint.

Each core color also has a paired on color (--cs-color-{variant}-on) guaranteed to meet WCAG 2.1 AA contrast when placed on top of it. Use on color tokens any time you render text or icons on a core color background.

Core ColorOn ColorDefault HuePreview
--cs-color-brand--cs-color-brand-onyellow
Aa
--cs-color-neutral--cs-color-neutral-ongray
Aa
--cs-color-highlight--cs-color-highlight-onpurple
Aa
--cs-color-information--cs-color-information-onturquoise
Aa
--cs-color-success--cs-color-success-ongreen
Aa
--cs-color-warning--cs-color-warning-onorange
Aa
--cs-color-danger--cs-color-danger-oncerise
Aa
--cs-color-link--cs-color-link-oncyan
Aa

Changing Variant Colors

Any hue from your color palette can be assigned to any variant without redefining the tokens in your own stylesheet. To use a different hue, apply the cs-{variant}-{hue} class to the <html> element.

<html class="cs-brand-purple cs-success-cyan"></html>

Every hue in the palette is available for every variant — the scales above are the full list.

Color for Themed Elements

These tokens apply specific tints from your color palette and variant colors to the elements and components that make up a theme. They’re named for the role they play rather than their appearance, and adapt to light and dark modes.

Surfaces

Surfaces are background layers that content rests on. They convey elevation hierarchy — raised is closest to the user (e.g., dialogs) and lowered is farthest away (e.g., wells).

Custom Property Description Preview
--cs-color-surface-raised Background for elevated surfaces like dialogs and dropdown menus
--cs-color-surface-default Default page or container background
--cs-color-surface-lowered Background for recessed surfaces like wells and code blocks
--cs-color-surface-border Border color used to delineate surface areas

Text

Text colors are used for readable content and should meet a minimum 4.5

contrast ratio against surface colors.

Custom Property Description Preview
--cs-color-text-normal Primary text color for most content
AaBb
--cs-color-text-quiet Subdued text for hints, captions, and other secondary content
AaBb
--cs-color-text-link Color for hyperlinks
AaBb

Overlays

Overlays provide a backdrop that isolates content, often with some transparency so background context shows through.

Custom Property Description Preview
--cs-color-overlay-modal Semi-transparent backdrop behind modal dialogs
--cs-color-overlay-inline Subtle overlay for inline highlights or dimmed regions

Shadow

A single color is used for all drop shadows. Use it alongside the shadow tokens to construct realistic shadows.

Custom Property Description Preview
--cs-color-shadow Color used for all component drop shadows

Interactions

These tokens power the consistent hover, active, and focus feedback you see across interactive components. The --cs-color-focus token sets the color of the keyboard focus ring. The --cs-color-mix-hover and --cs-color-mix-active tokens are overlays — they’re mixed into a component’s background via color-mix() to subtly shift it on hover and press, so every interactive component reacts consistently without each one defining its own hover/active palette.

Custom Property Description Preview
--cs-color-focus Outline color for keyboard focus rings. Used alongside focus tokens.
--cs-color-mix-hover Color blended into a component's fill on hover
mix
--cs-color-mix-active Color blended into a component's fill on press
mix

Semantic Variants

Semantic variants use the --cs-color-{variant}-{tint} tokens from your variant colors to power the variant="" attribute shared by buttons, badges, callouts, and many other components. Each variant is a complete, self-contained color system defining fills, borders, and on colors at three attention levels. Seven of the eight have them: link has a color scale but no attention levels, because it colors hyperlinks rather than backing a variant="".

Tokens follow the format --cs-color-{variant}-{role}-{attention}. The three roles are:

  • Fill for backgrounds or areas larger than a few pixels
  • Border for borders, dividers, and strokes
  • On for content displayed on top of a fill (pair on-loud with fill-loud)

The three attention levels are quiet, normal, and loud — from least to most visually prominent.

Custom Propertybrandneutralhighlightinformationsuccesswarningdanger
--cs-color-*-fill-quiet
--cs-color-*-fill-normal
--cs-color-*-fill-loud
--cs-color-*-border-quiet
--cs-color-*-border-normal
--cs-color-*-border-loud
--cs-color-*-on-quiet
Aa
Aa
Aa
Aa
Aa
Aa
Aa
--cs-color-*-on-normal
Aa
Aa
Aa
Aa
Aa
Aa
Aa
--cs-color-*-on-loud
Aa
Aa
Aa
Aa
Aa
Aa
Aa