/system
The tokens behind the surface
Type, color, and motion. The design system this portfolio is built on, documented in one place.
Type
- --font-sans Inter
Pão de queijo is the missing dependency.
- --font-serif Instrument Serif
Cheese, butter, and quiet ambition.
- --font-mono JetBrains Mono
const hungry = !paoDeQueijo;
Color
-
Accent
orange-300
#fdba74
-
Text strong
white
#ffffff
-
Text default
neutral-300
#d4d4d4
-
Text muted
neutral-400
#a3a3a3
-
Surface fill
--color-surface-fill
rgb(255 255 255 / 0.02)
-
Surface border
--color-surface-border
rgb(255 255 255 / 0.06)
-
Accent border
--color-accent-border
rgb(253 186 116 / 0.15)
-
Accent muted
--color-accent-muted
rgb(253 186 116 / 0.6)
Motion
-
Reveal
450ms · cubic-bezier(0.23, 1, 0.32, 1)
Hero entrance
-
Press
150ms · ease-out
Button feedback
-
Card
200ms · ease
Bento hover
-
Orbit
12s · linear
Project visual