Built-in Themes
A theme gives your project a cohesive look and feel across the entire Cornerstone library. Cornerstone ships Cru’s, and applies it for you.
A theme sets typography, spacing, borders, shadows, and how variants show up on components — all as design tokens. Two themes can share a color palette and variant colors and still feel completely different, and a theme may include custom overrides for individual components.
Two themes ship, and Cru’s is the one you get: cornerstone.css imports it. It is self-contained, carrying
its own color palette and variant colors rather than
layering over another theme. Default is the unbranded reference theme, kept as an opt-in starting point
rather than the base. The Awesome and Shoelace themes this library was forked alongside have been removed.
Below is Cru’s theme in both color schemes: drag the slider to compare dark against light.
Cru's own: gold, generated from the brand's key colours on a luminance ladder.
Using This Theme
After installing @cruglobal/cornerstone-components, import the theme's stylesheet:
import '@cruglobal/cornerstone-components/styles/themes/cru.css';
Importing it is all that is needed — this theme applies at the document root rather than under a class.
If you are self-hosting Cornerstone, include the theme's stylesheet from your server:
<link rel="stylesheet" href="/cornerstone-design-system/dist/styles/themes/cru.css" />
Importing it is all that is needed — this theme applies at the document root rather than under a class.