Reference · canonical tokens
Design tokens
Every value visible on this site comes from these tokens. Reference tokens — not raw values — in production
collateral. Warm Light is the default reading surface; Blueprint Dark is reserved for cover, pause, command,
and high-contrast moments.
Token groups Color Type families Type scale Spacing Radius Depth Motion Easing Chart palettes
Newsreader
The quick brown fox jumps.
Editorial display and reading prose.
Lexend
The quick brown fox jumps.
UI, navigation, body in product surfaces.
IBM Plex Mono
The quick brown fox jumps.
Meta, kickers, code, data tables.
Cover title
--into-type-cover-title
4rem · Newsreader 400
Cover and key takeover headlines.
A measured argument, made visible.
Section title
--into-type-section-title
3.5rem · Newsreader 400
Major section openers.
Section title
Slide title
--into-type-slide-title
3rem · Newsreader 400
Slide and exhibit titles.
Slide title
Lead
--into-type-lead
1.125rem · Lexend 300
Lead paragraph following a title.
The lead carries the argument into the body without theatre.
Body
--into-type-body
1rem · Lexend 300
Primary reading size.
Body copy reads in Lexend 300 at the floor of 1rem, with rhythm that stays calm under pressure.
Meta
--into-type-meta
0.75rem · IBM Plex Mono 400
Metadata, kickers, document chrome.
meta · footnote · 2026-05-22
Table floor
--into-type-floor-table
0.875rem · Lexend 300
Minimum table body text.
Sample text
Footnote floor
--into-type-floor-footnote
0.6875rem · IBM Plex Mono 400
Minimum footnote text.
meta · footnote · 2026-05-22
--into-space-1
0.25rem
--into-space-2
0.5rem
--into-space-3
0.75rem
--into-space-4
1rem
--into-space-5
1.25rem
--into-space-6
1.5rem
--into-space-7
1.75rem
--into-space-8
2rem
--into-space-9
2.5rem
--into-space-10
2.75rem
--into-space-11
3rem
--into-space-12
3.5rem
--into-space-13
4rem
--into-space-14
4.5rem
--into-space-15
5rem
--into-shadow-hairline
hairline
Quiet boundary between flat surfaces.
--into-shadow-panel
panel
Default card and panel elevation.
--into-shadow-floating
floating
Floating menus, popovers, surfaces above panels.
--into-shadow-command
command
Command surfaces — modal, drawer, hero card.
--into-ease-standard
standard
Default ease for most transitions.
cubic-bezier(0.2, 0, 0, 1)
--into-ease-decelerate
decelerate
Enter animations, content arriving.
cubic-bezier(0, 0, 0.2, 1)
--into-ease-accelerate
accelerate
Exit animations, content leaving.
cubic-bezier(0.4, 0, 1, 1)
--into-ease-editorial
editorial
Cinematic, considered reveals.
cubic-bezier(0.16, 1, 0.3, 1)