Sample project card
Surface, border, shadow, radius, type, and motion — every value on this card comes from a token. Hover to feel the elevation change.
Design system
Every page on this site renders from these exact tokens! View the source.
Color palette
Semantic tokens
Toggle the theme to see the tokens remap.
Typography
display
Aa
4xl / h1
Warm and crisp
3xl / h2
Warm and crisp
2xl / h3
Warm and crisp
xl / h4
Warm and crisp
lg / lead
The quick brown fox jumps over the lazy dog.
md / body
The quick brown fox jumps over the lazy dog.
sm
The quick brown fox jumps over the lazy dog.
xs / label
Section label
Spacing
Radii & elevation
sm 6
md 10
lg 16
xl 24
shadow-sm
shadow-md
shadow-lg
Motion
Components
Buttons
Tags
Swift · platform
Algorithms · discipline
In progress · recognition