Build Lab · Design System
One language, enforced.
The system behind this portfolio. Every surface is built from a single set of tokens and a small set of canonical components — so the whole site feels like one hand made it, and every path resolves into something you can act on.
01
Tokens are law
Every color, size, shadow and motion value comes from a CSS variable. No hardcoded hex, no magic numbers.
02
One element per job
A single canonical component owns each job — one button, one icon button, one nav. Never five that look almost alike.
03
States are standardized
Hover, press and focus behave identically everywhere a control appears — so the system feels like one hand built it.
04
Never a loose end
Every path resolves into a conclusive, satisfying, actionable step. No dangling question with no way forward.
Foundations · Color
A teal accent over deep ink
One accent hue, used sparingly, against a near-black surface ramp. Semantic colors are reserved for data visualization — never for chrome.
Accent
--accent-teal
#078B9C
--accent-teal-bright
#14b8a6
--accent-teal-dark
#077D8E
--accent-teal-glow
#2fc6d5
--accent-amber
#f59e0b
Surfaces
--bg-cinematic
#010204
--bg-primary
#09090b
--bg-secondary
#0f1115
--bg-tertiary
#131518
Text
--text-heading
#f4f4f5
--text-primary
#e4e4e7
--text-body
#a1a1aa
--text-muted
#8b8b95
--text-dim
#62626c
Glass & overlays
--overlay-ink-55
rgba(0,0,0,.55)
--overlay-ink-75
rgba(0,0,0,.75)
--overlay-white-05
rgba(255,255,255,.05)
--overlay-white-10
rgba(255,255,255,.10)
--overlay-white-20
rgba(255,255,255,.20)
Semantic — data viz only
emerald
#10b981
blue
#3b82f6
cyan
#06b6d4
rose
#f43f5e
orange
#f97316
purple
#a855f7
Foundations · Type
Inter for voice, mono for labels
A tight display scale for headlines, comfortable body copy at 19px, and a wide-tracked monospace for eyebrows and system labels.
--text-6xl · 900
Made obvious.
--text-4xl · 700
One language, enforced.
--text-2xl · 600
The chair tells you it is a chair.
--text-lg · 400
Body copy sits at 19px with relaxed leading for long-form reading.
--text-sm · 400
Secondary copy and captions live at 14px.
mono label · 700
Build Lab · Design System
Components · Button
One button, three intents
The single source of truth for every text action. Primary carries a teal-glow halo and light-sweep; secondary is ghost glass; ghost is a bare link. Hover, press and focus are standardized across all three.
Variants × sizes — live, hover me
hover · press (scale 0.98) · focus ring — standardized
Components · IconButton
The glass icon control
Every icon-only action — lightbox close, zoom, play, the nav arrows — is the same circular glass pill, in three sizes. It shares its surface and states with the nav island, so nothing drifts.
Sizes sm · md · lg — live, hover me
Components · NavIsland
One nav, every context
The Dynamic Island at the top of every page. It carries a segmented control (Work/Life · RC/ML/IQ) and an optional leading Back pill — and the Back button always circles you back to exactly where you came from. The live island sits at the very top of this page; below are the two specimens in-flow.
Segmented — Work / Life
Leading — Back pill
Components · Surface
The glass pill
All floating chrome — nav, lightbox, icon buttons — is cut from the one GLASS_PILL surface: ink at 55% over blur, a hairline white border, and a large soft shadow. Defined once in src/lib/surfaces.ts.
--overlay-ink-55 · --overlay-white-10 · --shadow-lg · backdrop-blur-xlComponents · SystemLightbox
The master overlay
One portal-rendered lightbox powers the résumé, case-study presentations, images and the app walkthroughs. Its chrome — title pill, glass icon controls, keyboard hints — is the same language as everything else.
Foundations · Elevation
Four shadows
A single soft-shadow ramp. Floating chrome uses lg; everything else stays flat.
Foundations · Spacing
A 4px rhythm
Every gap and pad steps off a 4px base, so vertical rhythm stays even across the whole system.
Foundations · Motion
One signature curve, three speeds
Mirrored 1:1 between CSS and framer-motion so animation feels identical whichever side drives it.
--ease-cinematic
The signature curve. Confident, settled entrances.
--ease-spring
Overshoot for tactile, alive controls (nav slider).
--ease-expo
Fast-out, slow-in for large reveals.
--duration-fast → slow
200ms · 300ms · 500ms — the only three speeds.
The standing rule
Never a loose end.
A design system is only finished when it leaves nothing dangling — so this page ends the way every path should: with a clear way forward.