Portfolio system · v1.0
The small design system behind this portfolio: warm paper surfaces, near-black ink and a single red-orange signal colour. Light mode leads; dark mode follows the same tokens.
01
Colour
Live values from the CSS custom properties, in both themes.
Light
Paper
--background
Sheet
--card
Sand
--secondary
Rule
--border
Graphite
--muted-foreground
Ink
--foreground
Signal
--primary
Ember
--accent
Dark
Paper
--background
Sheet
--card
Sand
--secondary
Rule
--border
Graphite
--muted-foreground
Ink
--foreground
Signal
--primary
Ember
--accent
02
Typography
Display · Geist Pixel
- Display XL
72pxSantiago Requelme - Display L
56pxSantiago Requelme - Heading
40pxSantiago Requelme - Title
24pxSantiago Requelme
Body · Satoshi Variable
Design is how it works, and how it moves.
- Aa300
- Aa400
- Aa500
- Aa600
- Aa700
- Aa800
- Aa900
03
Spacing & radius
A 4px base. Radii stay soft so the pixel type can be the sharp element.
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- 96
- --radius-tag · 4pxChips, labels
- --radius-control · 8pxButtons, inputs
- --radius-inner · 10pxMedia in cards
- --radius-card · 16pxCards
- --radius-panel · 20pxPanels, nav
04
Components
| sm | md | lg | |
|---|---|---|---|
| primary | |||
| ink | |||
| secondary | |||
| ghost |
Project card
Inset media, underline-on-hover title, filling arrow badge.
05
Motion
Easing curves used across the site. Press play to watch each one.
Durations
0.3s
fast
0.6s
base
0.9s
slow
1.4s
story
06
Annotations
Design-tool marks that frame content: registration corners, live dimension lines and a selection box on hover. Decorative only, hidden from assistive tech.