Cornerstone’s theming gives the whole library one look and feel. It has four layers: a theme, a color palette, variants, and a light or dark color scheme. The stylesheet you load picks the theme, and the theme brings its own palette. Classes set the variants and the color scheme, on the <html> element or on any section.
Try it live! Use the color scheme menu in this site’s header to switch between light and dark mode, or between Cru’s and FamilyLife’s themes. FamilyLife’s theme shows the system font here rather than Akkurat, and Built-in Themes says why.
Key Concepts
Themes
styles/themes/{name}.css
A theme is the overall look — fonts, borders, space, shadows, and how each variant gets used across components. Two themes can share a palette and variants and still feel completely different. Themes ship with a default palette and may include custom CSS overrides for individual components.
The stylesheet you load picks your theme, not a class. cornerstone.css loads Cru’s theme, so with no extra stylesheet and no class, you get Cru’s. To use FamilyLife’s theme instead, load its stylesheet after cornerstone.css, as Using Themes shows. Load one theme per page.
Each theme also matches a cs-theme-{name} class, but the class doesn’t switch themes, and it doesn’t limit a theme to one section. It only re-applies part of a theme that is already loaded: its fonts, sizes, and which shades it uses for surfaces, text and fills. The hues still come from the page root, so on a page with two themes loaded, a cs-theme-{name} section gets a blend of both.
Browse Built-in Themes
Color Palettes
--cs-color-{hue}-{tint}
A color palette is a theme’s set of hues, each with 11 tints from 05 (darkest) to 95 (lightest), all available as color design tokens. Each brand names its own hues, so the list changes from theme to theme.
Each palette has its own hue shifts and chroma, so the palette sets much of a project’s feel, along with the theme and variant colors. You don’t pick a palette on its own: each theme’s stylesheet loads the palette it needs. Cru’s and FamilyLife’s palettes have no class. Only the reference palette that comes with themes/default.css has one, cs-palette-default.
Cru
19 hues. To see another brand's palette, pick it in the header menu.
Lemon
--cs-color-lemon-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Yellow
--cs-color-yellow-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Orange
--cs-color-orange-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Vermilion
--cs-color-vermilion-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Rose
--cs-color-rose-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Pink
--cs-color-pink-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Cerise
--cs-color-cerise-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Ruby
--cs-color-ruby-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Sky
--cs-color-sky-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Cyan
--cs-color-cyan-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Turquoise
--cs-color-turquoise-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Navy
--cs-color-navy-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Mint
--cs-color-mint-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Green
--cs-color-green-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Moss
--cs-color-moss-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Olive-drab
--cs-color-olive-drab-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Gray
--cs-color-gray-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Graphite
--cs-color-graphite-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Purple
--cs-color-purple-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
FamilyLife
10 hues. To see another brand's palette, pick it in the header menu.
Yellow
--cs-color-yellow-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Orange
--cs-color-orange-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Pink
--cs-color-pink-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Blue
--cs-color-blue-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Dark-green
--cs-color-dark-green-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Mint
--cs-color-mint-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Ruby
--cs-color-ruby-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Soft-black
--cs-color-soft-black-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Off-white
--cs-color-off-white-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Cool-gray
--cs-color-cool-gray-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Browse All Palettes
Variants
.cs-{variant}-{hue}
Variants assign palette hues to semantic roles — brand, neutral, highlight, information, success, warning, and danger among them — so components like buttons and callouts can convey meaning through color. Any hue from your palette can be assigned to any variant with class="cs-{variant}-{hue}". Apply the class to the <html> element to set variants globally, to a wrapper to scope them to one section, or to a single component to override just that element. For deeper customization, override the --cs-color-{variant}-* tokens in your own CSS.
Brand
--cs-color-brand-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Neutral
--cs-color-neutral-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Highlight
--cs-color-highlight-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Information
--cs-color-information-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Success
--cs-color-success-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Warning
--cs-color-warning-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
Danger
--cs-color-danger-*
95, the key step
90, the key step
80, the key step
70, the key step
60, the key step
50, the key step
40, the key step
30, the key step
20, the key step
10, the key step
05, the key step
See Variant Tokens
Light and Dark Mode
.cs-light.cs-dark
Every theme is designed to adapt to light and dark mode. Light mode applies by default; apply class="cs-light" or class="cs-dark" to set the color scheme on the page or on any section. Because the classes cascade, a dark page can hold a light section, and the components inside each pick up the scheme around them.
Light
Whipped creamHershey's KissesJelly beans
Make Waffles
Dark
Whipped creamHershey's KissesJelly beans
Make Waffles
<divclass="cs-grid"><cs-cardclass="cs-light"><divslot="header"class="cs-split cs-color-text-quiet"><h4class="cs-heading-s">Light</h4><cs-iconname="sunny"></cs-icon></div><divclass="cs-stack"><cs-inputlabel="# of Waffles"type="number"value="3"></cs-input><cs-selectlabel="Toppings"multiplevalue="jelly-beans"><cs-optionvalue="whipped-cream">Whipped cream</cs-option><cs-optionvalue="hershey">Hershey's Kisses</cs-option><cs-optionvalue="jelly-beans">Jelly beans</cs-option></cs-select><cs-buttonappearance="filled"variant="brand"><cs-iconslot="start"name="grid_on"></cs-icon>
Make Waffles
</cs-button></div></cs-card><cs-cardclass="cs-dark"><divslot="header"class="cs-split cs-color-text-quiet"><h4class="cs-heading-s">Dark</h4><cs-iconname="dark_mode"></cs-icon></div><divclass="cs-stack"><cs-inputlabel="# of Waffles"type="number"value="3"></cs-input><cs-selectlabel="Toppings"multiplevalue="jelly-beans"><cs-optionvalue="whipped-cream">Whipped cream</cs-option><cs-optionvalue="hershey">Hershey's Kisses</cs-option><cs-optionvalue="jelly-beans">Jelly beans</cs-option></cs-select><cs-buttonappearance="filled"variant="brand"><cs-iconslot="start"name="grid_on"></cs-icon>
Make Waffles
</cs-button></div></cs-card></div>
Using Themes
Load the theme’s stylesheet. No class is needed: once it loads, the theme covers the whole page. Cru’s theme is the default, and cornerstone.css already loads it. The snippets below cover each way of loading it.
npmSelf-Hosted
After installing @cruglobal/cornerstone-components, import the theme's stylesheet:
The order matters because cornerstone.css carries Cru’s theme. Both themes set their values on the page root with the same strength, and when two rules tie like that, the one loaded last wins. Load fl.css first and Cru’s values replace FamilyLife’s, so the page looks like Cru. Load it last and FamilyLife’s values win everywhere.
You still need cornerstone.css, because it also brings the native element styles and the utility classes, and fl.css has neither.
Keep to one theme per page. The two palettes share some hue names (yellow, orange, pink, mint and ruby), so two themes on one page blend together, and a cs-theme-* class can’t pull them apart.
Creating Your Own
You can build a custom theme with custom CSS, overriding design tokens in your own stylesheet.
