Design System
The tokens behind the portfolio.
Every colour, type decision, and spacing choice on this site is intentional. This is the system.
Colour
Backgrounds
--bg
#0D1117
--surface
#161B22
--surface-2
#1C2128
--color-canvas-inset
#010409
Foreground
--primary
#E6EDF3
--secondary
#C9D1D9
--muted
#8B949E
--muted-2
#6E7681
Accent
--accent
#C8A882
--accent-hover
#D4B896
--color-accent-subtle
#1A1509
Border
--border
#30363D
--border-subtle
#21262D
Semantic
--danger
#FF8389
--success
#3FB950
--color-warning-fg
#D29922
--color-attention-fg
#79C0FF
Typography
The quick brown fox
var(--font-display) · clamp(32px, 5vw, 64px) · weight 600
The quick brown fox
var(--font-display) · clamp(24px, 3vw, 48px) · italic
The quick brown fox jumps over the lazy dog.
var(--font-body) · 18px · weight 300 · lh 1.7
The quick brown fox jumps over the lazy dog.
var(--font-body) · 16px · weight 300 · lh 1.7
Label Style · Mono Uppercase
var(--font-mono) · 11px · ls 0.15em · uppercase
Label Muted · Mono Uppercase
var(--font-mono) · 11px · ls 0.15em · muted-2
Spacing
--space-1
4px
--space-2
8px
--space-3
16px
--space-4
24px
--space-5
32px
--space-6
40px
--space-7
48px
--space-8
64px
--space-9
80px
--space-10
96px
--space-11
120px
--space-12
160px
Motion
Fade Up
opacity 0→1 · y 20→0 · duration 0.6 · easeOut
Stagger
staggerChildren: 0.08 · 3 children
Child 01
Child 02
Child 03
Hover
scale 1→1.02 · border → var(--accent) · Hover over the box
Hover Me
Components
Buttons
Label
System · Design · Label
Quote Block
"Design is the silent ambassador of your brand."
Paul Rand
Surface Card
Card Title
A surface card uses var(--surface) background with var(--border) border and var(--space-4) padding.