Design Reference
Design tokens
The colors, type styles, link styles, and patterns behind the design.
v1.17
Updated Oct 3, 2026
@shannonpasco
Colors
Token
Light
Dark
Used for
docs-bg
#F9F2E9
#01111F
Page background
docs-surface
#F8EFE4
#031525
Search box, at-a-glance table rows
docs-border
#EDD3B2
#0D3457
Dividers, borders, scrollbar thumb
docs-text
#01111F
#F9F2E9
Body and heading text
docs-text-muted
docs-text @ 60%
docs-text @ 60%
Subtitles, labels, nav items, scrollbar hover
docs-accent
#FB794A
#F2CF66
Eyebrow text, active link/tab state
Typography
Style
Font
Weight
Size
Color token
docs-title
Inter Tight
400
44 → 40 → 36 → 30px
docs-text
docs-h2
Inter Tight
400
26 → 24 → 22 → 20px
docs-text
docs-subtitle
Inter Tight
400
20 → 18 → 17 → 16px
docs-text-muted
docs-pullquote
Inter Tight
400
28 → 26 → 24 → 22px
docs-text
docs-h3
Inter Tight
400
18px
docs-text
docs-body
Inter Tight
400
16px
docs-text
docs-cell
Inter Tight
400
15px
docs-text
docs-nav-item
Inter Tight
400
14px
docs-text-muted
docs-tab
Inter Tight
400
14px
docs-text-muted
docs-toc-item
Inter Tight
400
13px
docs-text-muted
docs-code
DM Mono
400
13px
docs-text
docs-eyebrow
DM Mono
500
12px, uppercase, +0.08em
docs-accent
docs-label
DM Mono
500
11px, uppercase, +0.08em
docs-text-muted
docs-logo
Inter Tight
400
16px
docs-text
Links
Style
Default
Hover
Current / active
docs-nav-link
docs-text
docs-text-muted
docs-accent
docs-toc-link
docs-text
docs-text-muted
—
docs-content-link
docs-text
docs-accent
—
Other patterns
Convention
Detail
Radius
8px on cards and boxes (at-a-glance table, search box); 10px on the tab dropdown.
Borders
1px solid docs-border throughout.
Icons
Lucide icon set (chevron, search, menu, X, check).
Scrollbar
6px wide, thumb in docs-border, hover in docs-text-muted, transparent track.