Colors — Primitives

Black
#080812

Charcoal
#2C333E

Slate
#908B8A

Silver
#E7E7E0

Cream
#FCFCFA

Coral
#FF6D70

Blush
#FDE9E9

Charcoal Muted
charcoal @ 60%

Colors — Semantic Roles

--color-accent Interactive accent

--color-surface Page background

--color-surface-inverse Dark background

--color-surface-muted Subtle background

--color-surface-tinted Tinted background

--color-fg Default body text

--color-fg-inverse Text on dark backgrounds

--color-fg-muted Muted metadata text

--color-border Default border

Typography — Typefaces

Sans (Body)

Söhne

Display

Söhne Breit

Typography — Type Scale

Display — 48 → 186px

Display

H1 — 36 → 121px

Heading One

H2 — 28 → 74px

Heading Two

H3 — 22 → 34px

Heading Three

Lead — 22 → 30px

Lead paragraph text for introductions.

Body — 17 → 23px

Standard body text for paragraphs and descriptions.

Small — 14 → 18px

Small text for labels and secondary information.

Micro — 12 → 14px

Micro text for metadata and captions.

Shadows

sm — resting

md — elevated

accent — interactive

Buttons

Primary Button Secondary Button

Icons

icon-add

icon-arrow-external

icon-arrow-left

icon-arrow-right

icon-arrow-up

icon-dots

icon-download

icon-grid

Spacing Scale

3xs — 4px

2xs — 8px

xs — 12px

sm — 16→24px

md — 24→40px

lg — 32→64px

xl — 48→96px

2xl — 72→148px

3xl — 96→220px

4xl — 128→312px

Border Radius

None — 0

sm — 0.5rem

lg — 2rem

Full — 999px

Building blocks