Style guide
Tokens
Every colour, type role, space and curve this site is drawn with.
Colour
Theme roles
light
- --color-page#ffffff1.00:1
- --color-ink#17171717.93:1 AA
- --color-ink-muted#6666665.74:1 AA
- --color-rule#ebebeb1.19:1
- --color-wash#fafafa1.04:1
dark
- --color-page#0000001.00:1
- --color-ink#fafafa20.12:1 AA
- --color-ink-muted#8f8f8f6.49:1 AA
- --color-rule#4d4d4d2.48:1
- --color-wash#1717171.17:1
Category tints
light
- --color-solar-edge#ffdc301.35:1
- --color-terminal-green#297a3a5.33:1
- --color-spectrum-gradient#ff17443.85:1
dark
- --color-solar-edge#ffdc3015.53:1
- --color-terminal-green#297a3a3.94:1
- --color-spectrum-gradient#ff17445.46:1
Vercel greys
light
- --color-pure-white#ffffff1.00:1
- --color-paper-white#fafafa1.04:1
- --color-hairline#ebebeb1.19:1
- --color-graphite#8f8f8f3.23:1
- --color-stone#6666665.74:1
- --color-charcoal#4d4d4d8.45:1
- --color-obsidian#17171717.93:1
- --color-carbon#00000021.00:1
dark
- --color-pure-white#ffffff21.00:1
- --color-paper-white#fafafa20.12:1
- --color-hairline#ebebeb17.62:1
- --color-graphite#8f8f8f6.49:1
- --color-stone#6666663.66:1
- --color-charcoal#4d4d4d2.48:1
- --color-obsidian#1717171.17:1
- --color-carbon#0000001.00:1
Contrast is measured against each theme's page, at build time. Text tokens must reach 4.5:1.
Type
Design systems, AI tooling and web apps
heading-48 · 3rem / 3.5rem · -0.06em · 450
Design systems, AI tooling and web apps
heading-40 · 2.5rem / 3rem · -0.06em · 450
Design systems, AI tooling and web apps
heading-32 · 2rem / 2.5rem · -0.06em · 450
Design systems, AI tooling and web apps
heading-24 · 1.5rem / 2rem · -0.04em · 450
Design systems, AI tooling and web apps
heading-20 · 1.25rem / 1.625rem · -0.02em · 450
Design systems, AI tooling and web apps
heading-16 · 1rem / 1.5rem · -0.02em · 450
Design systems, AI tooling and web apps
copy-18 · 1.125rem / 1.75rem · 0 · 400
Design systems, AI tooling and web apps
copy-16 · 1rem / 1.5rem · 0 · 400
Design systems, AI tooling and web apps
copy-14 · 0.875rem / 1.25rem · 0 · 400
Design systems, AI tooling and web apps
copy-13 · 0.8125rem / 1.125rem · 0 · 400
Client 2024
eyebrow · 0.6875rem / 1rem · 0.071em · 400 · Geist Mono
Client 2024
label-12-mono · 0.75rem / 1rem · 0 · 400 · Geist Mono
Spacing and radius
- --spacing-4
- --spacing-6
- --spacing-8
- --spacing-12
- --spacing-14
- --spacing-16
- --spacing-20
- --spacing-24
- --spacing-32
- --spacing-40
- --spacing-44
- --spacing-208
- --radius-sm 2px
- --radius-md 6px
- --radius-full 9999px
Motion
cubic-bezier(0.23, 1, 0.32, 1)
cubic-bezier(0.34, 1.56, 0.64, 1)
Avatar springs
| Spring | Stiffness | Damping | Precision |
|---|---|---|---|
| glasses | 0.1 | 0.45 | 0.001 |
| pitch | 0.08 | 0.6 | 0.01 |
| tip | 0.08 | 0.6 | 0.01 |
| closer | 0.12 | 0.8 | 0.01 |