Design system

Nothing here is from scratch

Every component on this site is built from the tokens below. Public on purpose: the proof is the medium.

--primary · #FF5629
Accent. Fill/display only, never body text on light (2.7:1).
--ink · #0A0A0A
Text + dark canvas. 16.9:1 AAA on cream.
--charcoal · #211C17
Panels, secondary dark surfaces.
--ink-soft · #5A544E
Muted text on light. 6.4:1 AA.
--cream · #F4ECDD
Warm light surface. Softer than white on purpose.
--cream-lt · #FBF5EA
Raised cards, alternate surfaces.
--line · #E3D9C6
Hairlines and dividers on light.

Ratio discipline: roughly 60 neutral canvas / 30 anchor / 10 orange. On orange fills, text is ink (6.2:1), never white (3.2:1).

--t-hero · Anton Loud, uppercase
--t-h2 · Anton Section voice
Stroke variant Outlined for emphasis
--t-body · Inter

Inter carries every paragraph, label, and button. Anton shouts; Inter works. Never body copy in Anton.

--t-mono · JetBrains Mono Tags · technical labels · the design-plus-dev signal
--s2 · 8px
--s4 · 16px
--s5 · 24px
--s6 · 32px
--s7 · 48px
--s8 · 64px
--s9 · 96px

Radius: --r-sm 5px (buttons) · --r-md 8px (chips) · --r-lg 10px (tiles, cards). Section padding: clamp(80px, 12vw, 170px).

Buttons
Primary Ghost
Badges
Live client Concept Live app
Work tile
Concept Category · Tag

Tile title

Marquee band
Looks are the barResults are the job
Motion rules

Weighty-premium base: reveals ease over --d-reveal (0.9s) on cubic-bezier(0.22,1,0.36,1); nothing bounces in. Snap lives on micro-interactions only (--d-snap 0.2s, overshoot easing). Cursor ring lags the dot. Every 3D scene idles slowly, follows the pointer with mass, and pauses off-screen. Reduced-motion is respected everywhere.

Layout rules

Body text fills its container; only headings break early. No numbered eyebrow labels above sections; a section opens with its display heading. Buttons carry generous horizontal padding (14px x 44px on the primary nav action). Card labels are visual, badge, title; no category tag rows.

Breakpoints

Mobile-first fluid type via clamp(), then adjustment points at 380 (SE floor), 480 (standard phones), 700 (large phones), 820 (hamburger nav), 768 up (2-col tile grid), 834 (tablet portrait), 1194 (tablet landscape), 1920 up (ultrawide). Touch targets meet 44px on coarse pointers; hover-only motion is disabled on touch; the custom cursor never renders on touch devices.

Voice rules

Confident because earned. Build the case, land one flat line. No em dashes, no hype, no corporate-neutral, no showy words. Specific over vague. Keep it short; long copy reads like performing.

Want a system like this?

Design systems are a service we sell.