Living design system
Design System
The component library that powers this portfolio: Fluid Functionalism primitives on the site's own tokens. Custom fonts (Erode + Satoshi), a brand green ramp, an eight-level surface ladder, and spring motion — all rendered here from the same source as the shipped site.
Foundations
Color & Type
A brand green derived into a full ramp, plus eight elevation surfaces that separate by color in dark mode and by shadow in light. The codebase owns the fonts and the tokens.
Brand ramp — derived from hsl(153 100% 50%)
Surfaces — eight elevation levels
Display · Satoshi
Vision, shipped.
text-6xl · font-black · Satoshi Variable
Body · Erode (prose only)
Erode survives inside .prose paragraphs across feed, showcase, and case study pages, so reading still feels like a paperback. Everything else — buttons, badges, labels — snaps to Satoshi.
text-base · font-serif · Erode Variable
Section
Buttons & Actions
Four variants — primary, secondary, tertiary, ghost — on a two-step size ladder (36px default, 28px compact). Presses collapse the surface by 1px instead of scaling, so wide and narrow buttons feel the same.
Section
Forms & Input
Selection controls share one hover highlight that glides between rows instead of blinking per row. Checked states animate with springs, so interrupting a toggle reverses from where it is.
Section
Feedback & Status
Badges carry status in solid or dot form. Tooltips and menus open on the fast spring and close faster than they open.
Section
Data & Structure
Tabs and accordion — patterns for organising dense product surfaces without losing the shape of the flow.