Cornerstone

Quick Links

↑↓ Navigate↵ Select
Esc Close
LightDarkSystemDocs

Color Palettes

A color palette gives you a full spectrum of colors to use in your project, as color design tokens. Cornerstone ships Cru’s, and applies it for you.

It defines nineteen hues, each with a scale of 11 tints from 05 (darkest) to 95 (lightest). The tints are not picked by eye: each step’s lightness is solved for a WCAG luminance target, so the distance between two steps predicts their contrast ratio — 40 steps apart is 3

, 50 is 4.5
, and 60 is 7
. Pair a hue with a theme and variant colors to style the whole library.

Unlike the reference palette, this one applies at the document root rather than under a cs-palette-* class — it is the palette the library ships with, not one you switch on. The reference palette is still there, because themes/default.css imports it, but a theme applies its own palette, so there is nothing for you to choose between. The Awesome and Shoelace palettes this library was forked alongside have been removed.

On every scale below, one step is bold: that hue’s key step, which is what the bare --cs-color-{hue} token resolves to and the colour as it appears in Cru’s brand guidelines. The generator writes each brand colour verbatim at the step whose luminance it already has, and makes that the key. Hover a swatch for its token and value; click it to copy the token.

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

Using This Palette

npm Self-Hosted

After installing @cruglobal/cornerstone-components, import the palette's stylesheet:

import '@cruglobal/cornerstone-components/styles/color/palettes/cru.css';

Importing it is all that is needed — this palette applies at the document root rather than under a class.

If you are self-hosting Cornerstone, include the palette's stylesheet from your server:

<link rel="stylesheet" href="/cornerstone-design-system/dist/styles/color/palettes/cru.css" />

Importing it is all that is needed — this palette applies at the document root rather than under a class.

Styling with Palette Colors

Once a palette is loaded, you can reach for any of its hue and tint tokens in your own CSS. Pair a hue’s core color (--cs-color-{hue}) with its matching on color (--cs-color-{hue}-on) to keep text and icons readable on top of it:

.callout-custom {
  background: var(--cs-color-cyan);
  color: var(--cs-color-cyan-on);
}

Building with other tints? The Color tokens reference lists every tint and semantic variant — pair them across the scale and you’ll hit WCAG contrast ratios without doing the math.