Intro
Foundations
LogoFontColorColormapsGridIconsEmojiMarkdown

Color

Our primary colors are Carbon and Chalk.

carbon
#1b1e23
chalk
#ebebec

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.

Primary
Primary
Secondary
Secondary
Muted
Muted
Hinted
Hinted

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.

red
#f07071
orange
#ea9755
yellow
#d4c05e
green
#7eb36a
teal
#64b9c4
blue
#85a2f7
purple
#bc85d9
pink
#e587b6
grey
#a9b4c4

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:

red
#f07071
yellow
#d4c05e
teal
#64b9c4

Or the warm quartet:

pink
#e587b6
red
#f07071
orange
#ea9755
yellow
#d4c05e

Or the cool quartet:

green
#7eb36a
teal
#64b9c4
blue
#85a2f7
purple
#bc85d9

Usage

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

This is red

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

This is red
EMAIL
hello@carbonplan.org
NEWSLETTER
Subscribe
CarbonPlan is a registered nonprofit public benefit corporation in California with 501(c)(3) status.
(c) 2024 CARBONPLAN
READ OUR TERMS
X,Y: 0000,0000
4a30554