Reference / Foundations

Theme editor

Choose a palette, button style, and modular scale. Export the CSS and tokens to use the same settings in your project.

Field notes

The spacing and headings use the same modular ratio. Explore foundations.

Plan a visit

Save a place and invite your group.

Shipped themes

Every theme is validated against the same 24 contrast requirements (WCAG 1.4.3 for text and status colors, 1.4.11 for focus, boundaries, and data).

Neutral

Palette from Celadon & Unbleached

Standard scale · solid buttons

ui-sans-serif

Contrast

Use	Ratio	Needs
Body text	15.22:1	4.5:1
Body text on raised surfaces	16.08:1	4.5:1
Secondary text	6.55:1	4.5:1
Secondary text on raised surfaces	6.92:1	4.5:1
Links	7.27:1	4.5:1
Text on accent controls	7.68:1	4.5:1
Focus indicator	5.85:1	3:1
Control boundaries	3.49:1	3:1
Data series 1	5.09:1	3:1
Data series 2	3.99:1	3:1
Data series 3	3.57:1	3:1
Data series 4	4.93:1	3:1
Data series 5	3.61:1	3:1
Data series 6	4.66:1	3:1
Data series positive	5.22:1	3:1
Data series negative	5.62:1	3:1
Data series neutral	6.06:1	3:1
Success status text	5.02:1	4.5:1
Success status text on raised surfaces	5.30:1	4.5:1
Warning status text	5.26:1	4.5:1
Warning status text on raised surfaces	5.55:1	4.5:1
Danger status text	4.97:1	4.5:1
Danger status text on raised surfaces	5.25:1	4.5:1
Text on danger buttons	4.97:1	4.5:1

Thin-Sky

Palette from Pale Blue & Vermillion

Standard scale · solid buttons

"Instrument Sans"

Contrast

Use	Ratio	Needs
Body text	15.05:1	4.5:1
Body text on raised surfaces	15.68:1	4.5:1
Secondary text	6.58:1	4.5:1
Secondary text on raised surfaces	6.85:1	4.5:1
Links	6.51:1	4.5:1
Text on accent controls	6.78:1	4.5:1
Focus indicator	4.06:1	3:1
Control boundaries	3.50:1	3:1
Data series 1	5.10:1	3:1
Data series 2	4.00:1	3:1
Data series 3	3.58:1	3:1
Data series 4	4.95:1	3:1
Data series 5	3.62:1	3:1
Data series 6	4.67:1	3:1
Data series positive	5.24:1	3:1
Data series negative	5.63:1	3:1
Data series neutral	6.08:1	3:1
Success status text	5.03:1	4.5:1
Success status text on raised surfaces	5.24:1	4.5:1
Warning status text	5.27:1	4.5:1
Warning status text on raised surfaces	5.49:1	4.5:1
Danger status text	4.98:1	4.5:1
Danger status text on raised surfaces	5.19:1	4.5:1
Text on danger buttons	4.98:1	4.5:1

Paper

Palette from Scorched Brown & Unbleached

Expressive scale · outlined buttons

Spectral

Contrast

Use	Ratio	Needs
Body text	11.85:1	4.5:1
Body text on raised surfaces	12.83:1	4.5:1
Secondary text	6.31:1	4.5:1
Secondary text on raised surfaces	6.83:1	4.5:1
Links	5.71:1	4.5:1
Text on accent controls	6.18:1	4.5:1
Focus indicator	5.69:1	3:1
Control boundaries	3.49:1	3:1
Data series 1	4.80:1	3:1
Data series 2	3.76:1	3:1
Data series 3	3.36:1	3:1
Data series 4	4.65:1	3:1
Data series 5	3.40:1	3:1
Data series 6	4.39:1	3:1
Data series positive	4.92:1	3:1
Data series negative	5.30:1	3:1
Data series neutral	5.72:1	3:1
Success status text	4.73:1	4.5:1
Success status text on raised surfaces	5.12:1	4.5:1
Warning status text	4.96:1	4.5:1
Warning status text on raised surfaces	5.36:1	4.5:1
Danger status text	4.68:1	4.5:1
Danger status text on raised surfaces	5.07:1	4.5:1
Text on danger buttons	4.68:1	4.5:1

Market

Palette from Crimson & Navy

Expressive scale · solid buttons

"Bricolage Grotesque"

Contrast

Use	Ratio	Needs
Body text	12.94:1	4.5:1
Body text on raised surfaces	13.83:1	4.5:1
Secondary text	6.84:1	4.5:1
Secondary text on raised surfaces	7.31:1	4.5:1
Links	7.03:1	4.5:1
Text on accent controls	7.52:1	4.5:1
Focus indicator	6.09:1	3:1
Control boundaries	3.51:1	3:1
Data series 1	5.02:1	3:1
Data series 2	3.93:1	3:1
Data series 3	3.52:1	3:1
Data series 4	4.86:1	3:1
Data series 5	3.56:1	3:1
Data series 6	4.59:1	3:1
Data series positive	5.15:1	3:1
Data series negative	5.54:1	3:1
Data series neutral	5.98:1	3:1
Success status text	4.94:1	4.5:1
Success status text on raised surfaces	5.28:1	4.5:1
Warning status text	5.18:1	4.5:1
Warning status text on raised surfaces	5.54:1	4.5:1
Danger status text	4.90:1	4.5:1
Danger status text on raised surfaces	5.23:1	4.5:1
Text on danger buttons	4.90:1	4.5:1

Night Signal

Palette from Wisteria & Indigo

Compact scale · solid buttons

"Geist"

Contrast

Use	Ratio	Needs
Body text	15.29:1	4.5:1
Body text on raised surfaces	12.99:1	4.5:1
Secondary text	8.44:1	4.5:1
Secondary text on raised surfaces	7.17:1	4.5:1
Links	7.80:1	4.5:1
Text on accent controls	7.80:1	4.5:1
Focus indicator	11.34:1	3:1
Control boundaries	4.33:1	3:1
Data series 1	8.20:1	3:1
Data series 2	9.35:1	3:1
Data series 3	9.25:1	3:1
Data series 4	7.72:1	3:1
Data series 5	9.55:1	3:1
Data series 6	8.95:1	3:1
Data series positive	9.32:1	3:1
Data series negative	7.46:1	3:1
Data series neutral	7.71:1	3:1
Success status text	5.58:1	4.5:1
Success status text on raised surfaces	4.74:1	4.5:1
Warning status text	7.54:1	4.5:1
Warning status text on raised surfaces	6.41:1	4.5:1
Danger status text	5.48:1	4.5:1
Danger status text on raised surfaces	4.65:1	4.5:1
Text on danger buttons	5.48:1	4.5:1

Blueprint

Palette from Ultramarine & Chalk White

Compact scale · outlined buttons

"IBM Plex Mono"

Contrast

Use	Ratio	Needs
Body text	14.53:1	4.5:1
Body text on raised surfaces	15.52:1	4.5:1
Secondary text	6.45:1	4.5:1
Secondary text on raised surfaces	6.89:1	4.5:1
Links	8.40:1	4.5:1
Text on accent controls	8.97:1	4.5:1
Focus indicator	4.82:1	3:1
Control boundaries	3.43:1	3:1
Data series 1	4.98:1	3:1
Data series 2	3.90:1	3:1
Data series 3	3.49:1	3:1
Data series 4	4.83:1	3:1
Data series 5	3.53:1	3:1
Data series 6	4.55:1	3:1
Data series positive	5.11:1	3:1
Data series negative	5.50:1	3:1
Data series neutral	5.93:1	3:1
Success status text	4.91:1	4.5:1
Success status text on raised surfaces	5.24:1	4.5:1
Warning status text	5.14:1	4.5:1
Warning status text on raised surfaces	5.49:1	4.5:1
Danger status text	4.86:1	4.5:1
Danger status text on raised surfaces	5.19:1	4.5:1
Text on danger buttons	4.86:1	4.5:1

High Contrast

Palette from Yellow Orange & Dark Tyrian Blue

Standard scale · solid buttons

"Atkinson Hyperlegible Next"

Contrast

Use	Ratio	Needs
Body text	19.11:1	4.5:1
Body text on raised surfaces	17.19:1	4.5:1
Secondary text	14.61:1	4.5:1
Secondary text on raised surfaces	13.14:1	4.5:1
Links	9.23:1	4.5:1
Text on accent controls	9.23:1	4.5:1
Focus indicator	16.95:1	3:1
Control boundaries	9.87:1	3:1
Data series 1	9.11:1	3:1
Data series 2	10.38:1	3:1
Data series 3	10.28:1	3:1
Data series 4	8.58:1	3:1
Data series 5	10.61:1	3:1
Data series 6	9.94:1	3:1
Data series positive	10.36:1	3:1
Data series negative	8.29:1	3:1
Data series neutral	8.57:1	3:1
Success status text	6.20:1	4.5:1
Success status text on raised surfaces	5.58:1	4.5:1
Warning status text	8.38:1	4.5:1
Warning status text on raised surfaces	7.54:1	4.5:1
Danger status text	6.08:1	4.5:1
Danger status text on raised surfaces	5.47:1	4.5:1
Text on danger buttons	6.08:1	4.5:1