Living style guide · Paper & Cobalt

Design system

Every value is a CSS token in app/globals.css; dark mode is a token swap, and meaning is never carried by color alone. Flip your OS theme (or the demo's theme toggle) to see both modes.

Color

Paper (ivory)

--bg

Elevated

--bg-elevated

Muted

--bg-muted

Ink

--fg

Ink muted

--fg-muted

Sage

--fg-subtle

Hairline

--border

Cobalt (accent)

--accent

Ready

--ready

Review

--review

Block

--block

Unknown

--unknown

Observed

--observed

Type

Serif display — Source Serif 4

Body — Geist Sans at 15px, line height 1.55. Calm, specific, no exclamation marks.

Mono — Geist Mono: Products!R412:C7 · sha256:8c5f945a… · changeatlas-core@1.0.0 · tabular 0123456789

Eyebrow label · uppercase mono

Semantic badges

DecisionsREADY REVIEW BLOCK UNKNOWN

Severities BLOCK WARN INFO NOT_EXECUTED

Delta statesCREATED CHANGED CLEARED OMITTED REKEYED REMOVED UNKNOWN

EvidenceSource stated Calculated Inferred Observed User asserted Unknown

CoveragePRESENT DECLARED_EMPTY NOT_EXPORTED UNKNOWN

Effects / miscWOULD_APPLY WOULD_SKIP CONDITIONAL Roadmap · P1

Controls and surfaces

Stat tile

1,349

mono numerals, tabular

Callout

Four kinds: info, tip, warning, danger — icon plus label, tint as a secondary cue.

Empty state

Pattern

No analysis open

Every screen has an empty, loading, and error state — none of them a blank page.

Motion

120 ms hover · 200 ms state changes · 320 ms scroll reveals (12px rise, once) · 600 ms hero edge draws.
Eases: standard cubic-bezier(.2,0,0,1), emphasized (.3,0,0,1), exit (.4,0,1,1).
Under prefers-reduced-motion (or the demo's Motion setting): transforms removed, opacity-only ≤150 ms, count-ups show the final value.