Design system · v1

Sky. Sun.
Grass.

The visual language behind Carbon Compass — a vibrant, optimistic system for serious climate data.

01 — Tokens

Color

Aa
Background
--background
Aa
Foreground
--foreground
Aa
Surface
--surface
Aa
Surface 2
--surface-2
Aa
Primary (Grass)
--primary
Aa
Primary Glow
--primary-glow
Aa
Secondary (Sun)
--secondary
Aa
Accent (Sky)
--accent
Aa
Sky Dark
--sky-dark
Aa
Muted
--muted
Aa
Warning
--warning
Aa
Positive
--positive
Aa
Negative
--negative
Aa
Border
--border
Aa
Ring
--ring

Gradients

Hero
--gradient-hero
Primary
--gradient-primary
Sun
--gradient-sun
02 — Voice

Typography

Display · Nunito
The market cap of carbon.
Heading 02
Heading 03
Body · Nunito

A live, sortable ledger of CO₂ emissions disclosed by the world's largest public firms — across Scope 1, 2 and 3.

Muted secondary copy used for captions, table sub-labels and methodology notes.

MONO · JetBrains Mono · 1,284 MtCO₂e
03 — Actions

Buttons

04 — Surfaces

Components

Total tracked
1.28B MtCO₂e
Stat card
Avg YoY change
−2.4%
Trend
CDP A-rated
14 / 25
Coverage
Pills & badges
Scope 1Scope 2Scope 3CDP ANet-zero 2040No target
Form inputs
Live · FY24 disclosures
05 — Form

Radius & elevation

radius / sm
radius / md
radius / lg
radius / xl
Soft elevation
--shadow-soft
Glow elevation
--shadow-glow