Color

Our primary colors are Carbon and Chalk.

The core design is built around Chalk on Carbon. Changing the theme to light mode reverts it to Carbon on White (we use pure White rather than Chalk in light mode for improved contrast). These two colors are available in our theme as primary and background depending on whether you are in light more or dark mode. You can use the light dimmer to change the theme.

We also have additional shades for accenting: primary secondary muted and hinted. Here is text in a few sizes and fonts rendered in those shades.

The hinted shade should almost never be used for text and should instead be used to provide a minimal background.

It is used, for example, as the background for code block and blockquote elements, like this one.

Accent colors

We have a series of accent colors. Sometimes they play a semantic purpose, e.g. green for forests, orange for soil, and cool gray for mineralization. Although semantic consistency is not strictly required, within a given context, colors should be chosen for semantic purposes, or purely aesthetic purposes, but not both!

For example, we would never use pink to represent direct air capture on one site, and then use it to represent energy systems on another site. But a subset of colors can be used purely for aesthetic purposes in an isolated setting.

When using colors to enhance a design without semantic meaning, rather than use the full subset, we generally pick one of several thematic combinations as a color "cycle", and then cycle through those colors across the page.

For example, this triad:

Or the warm quartet:

Or the cool quartet:

Usage

String names can be used to reference colors via theme-ui, for example

<Box sx={{ color: 'red' }}>This is red</Box>
<Box sx={{ color: 'red' }}>This is red</Box>

You can also use the Colors component to quickly get an inline color

<Colors.Red>This is red</Colors.Red>
<Colors.Red>This is red</Colors.Red>