Design tokens
Read directly from app/tokens.css at build time, so this page cannot drift from what the site actually renders. Both themes are shown: dark is the default, light is the override.
Hairline tokens are border colors only. They do not clear 4.5:1 on --bg and must never be used as text colors. Faint mono labels use --text-label, which does.
Surfaces
Page, inset and sunken backgrounds.
--bg
#0E0F0D · light #F2EFE8
--bg-inset
#1A1C18 · light #E7E3D8
--bg-sunken
#0A0B09 · light #FBFAF6
--code-bg
#0A0B09 · light #FBFAF6
--nav-bg
rgba(14,15,13,0.82) · light rgba(242,239,232,0.88)
Text
Four steps of foreground, from body to faint mono label. All clear 4.5:1 on --bg.
--text
#F2EFE8 · light #17180F
--text-soft
#C9C6BC · light #3A3A38
--text-muted
#8E8C82 · light #5F5E56
--text-label
#8A8880 · light #5C5B53
Hairlines
BORDER colors only. Never use these as text colors: they do not clear 4.5:1.
--hairline
#2A2B28 · light #D8D4C8
--hairline-inner
#1F2019 · light #E2DECF
--hairline-strong
#3A3C37 · light #C7C4B8
True green
Pass, free, accent. Never used for a problem.
--true
#37D399 · light #17795A
--true-text
#37D399 · light #17795A
--true-hover
#4EE0A8 · light #0F5F46
--true-dim
#1F7D5C · light #8CD0B0
--true-deep
#17795A · light #17795A
--tint-true
rgba(55,211,153,0.03) · light rgba(23,121,90,0.06)
--tint-true-strong
rgba(55,211,153,0.07) · light rgba(23,121,90,0.10)
--cta-fg
#0E0F0D · light #F2EFE8
Amber and rust
Amber is off-true or mid; rust is critical or a loss. Two orthogonal scales: severity and fix cost.
--amber-text
#C8893E · light #9A6420
--amber-lift
#F0C97A · light #8A5520
--amber-dim
#8A5F2B · light #D9BC8E
--rust-text
#E4714F · light #A03A26
--rust-lift
#E4714F · light #A03A26
--rust-dim
#5C2A20 · light #E0B3A6
Paper and ink
The report specimen palette, fixed light in either theme.
--low
#C7C4B8 · light #8E8C82
--paper
#F2EFE8 · light #FFFFFF
--paper-card
#FBFAF6 · light #F6F3EA
Code panel
Syntax colors and the panel-* remaps that keep nested content legible.
--code-bg
#0A0B09 · light #FBFAF6
--code-key
#9AA8FF · light #3B48C6
--code-fn
#F0C97A · light #8A5520
--code-text
#AAAAAA · light #3A3A38
--code-comment
#666666 · light #8E8C82
--code-flag
#FF7B7B · light #A03A26
--panel-bg
#0A0B09 · light #FBFAF6
--panel-text
#F2EFE8 · light #17180F
--panel-soft
#C9C6BC · light #3A3A38
--panel-muted
#8E8C82 · light #5F5E56
--panel-label
#8A8880 · light #5C5B53
--panel-hairline
#2A2B28 · light #D8D4C8
--panel-hairline-inner
#1F2019 · light #E2DECF
--panel-hairline-strong
#3A3C37 · light #C7C4B8
--panel-inset
#1A1C18 · light #E7E3D8
--panel-true
#37D399 · light #17795A
--panel-amber
#C8893E · light #9A6420
--panel-rust
#E4714F · light #A03A26
--panel-low
#C7C4B8 · light #8E8C82
Shadow
Card elevation, one step and one lift.
--shadow-card
0 30px 80px rgba(0,0,0,.5) · light 0 22px 50px rgba(58,58,56,.16)
--shadow-card-lift
0 40px 100px rgba(0,0,0,.6) · light 0 30px 64px rgba(58,58,56,.22)
Type scale
Fraunces for headlines, Newsreader for ledes, Inter for body, JetBrains Mono for data and labels. No fifth family.
| Level | Font | Size · line · tracking | Used for |
|---|
| Hero | Fraunces 500 | clamp(46px, 7.8vw, 92px) · 0.99 · −0.02em | Landing h1 |
| Page title | Fraunces 500 | clamp(42px, 6.4vw, 76px) · 1.0 | Section-page h1 |
| Section | Fraunces 500 | clamp(30px, 4.4vw, 46px) · 1.02 | h2 |
| Card title | Fraunces 500 | 22px · −0.01em | h3 |
| Lede | Newsreader 400 | 21px · 1.45 | Section intro |
| Body | Inter 400 | 15px · 1.6 | Running text |
| Eyebrow | JetBrains Mono 400 | 12px · 0.16em · uppercase | Section label |
| Mono label | JetBrains Mono 400 | 11px · 0.12em | Stat labels, metadata |
| Data | JetBrains Mono 400 | 34px | Proof-strip counts |
| Score | JetBrains Mono 300 | 52–80px | Report health score |
Spacing and grid
The rhythm every page follows.
| Rule | Value |
|---|
| Content width | 1080px |
| Gutter | 32px desktop · 20px mobile |
| Section rhythm | 96px desktop · 64px mobile |
| Card padding | 26–30px |
| Card radius | 10px small · 12px default · 14px feature |
| Pill radius | 99px |
| Hairline | 1px solid var(--hairline) |
| Grid gap | 24px cards · 60px two-column |
| Nav height | ~64px, fixed, blurred |
| Min hit target | 44px on touch surfaces |