← All work

DESIGN SYSTEM / FOUNDATIONS

Most design systems in a portfolio are a screenshot. This one is live. Every value below is read straight from the running stylesheet, not retyped, so it can never drift from the real system. If a token is referenced but missing, the page says so out loud.

65tokens, one source of truth, read live from this page.

Checking tokens…

THE CONTRACT

Design.md is the human-facing source of truth. globals.css is the runtime source of truth. A validation script holds them to account: if the two ever disagree, the build fails. So the contract I read is the same one my agents in Cursor and Claude build against, and neither of us can quietly drift off-system.

  • --base…
    …--base
  • --cta-fill…
    …--cta-fill
  • --apricot…
    …--apricot
  • --divider…
    …--divider

validate-design-system.sh · contract holds

EXPORT

Left is what the browser renders. Right is the contract that produces it, read live from this page.

Reading live values from the stylesheet…

COLOR

Brand · Human Signal

Apricot…--hero-apricot · --signal-humanThe brand color and HUMAN SIGNAL — the human pulse. Highlights insights, quotes, and friction. This is emphasis, NOT action
Apricot deep…--hero-apricot-deepDeeper apricot for emphasis hover / dim states
Sage (legacy alias)…--hero-sageResolves to apricot. The name says green, the value is not

Signals · the working colors

Velocity…--signal-velocity · --accent-blueVELOCITY — the SECONDARY interactive layer (high-frequency, calm). Links, nav, secondary buttons, focus rings. You see blue far more often than mint
Velocity deep…--signal-velocity-deepHover / pressed for the secondary interactive layer
Logic Pulse…--logic-pulse · --cta-fillPRIMARY action (scarce, loud) — the single most important CTA; --cta-fill resolves here. Earns its intensity by being rare. Also telemetry, success, AI output
Logic Pulse deep…--logic-pulse-deepHover / pressed for the primary action fill
Error…--hero-errorCrimson, hue-separated from the action color so destructive never reads as primary

Structure · Anchor & Framework

Anchor…--anchor · --accent-taupeCONTEXTUAL ANCHOR — secondary depth, container borders. Large / UI only; below AA (~3.6:1) for body text on base
Framework…--framework · --accent-slateSYSTEM FRAMEWORK — structural panels, code containers, shells. Large / UI only; below AA (~3:1) for body text

Neutrals

Base…--hero-baseThe single page background (Obsidian Warm)
Surface…--hero-elevatedElevated containers, cards, button fills (Raw Basalt)
Border subtle…--border-cardQuiet 1px container edges (Dark Anodized)
Divider…--grid-hairlineVisible structural rules
Text primary…--hero-textHeadings and body
Text muted…--hero-mutedSecondary text, descriptions, captions
Text faint…--hero-faintFootnotes / labels. Lifted to ~4.7:1 on base for AA
Text disabled…--text-disabledDisabled states and structural placeholders only
CTA label…--cta-fill-fgObsidian ink on the mint CTA — dark type on light fill, AA-safe

TYPOGRAPHY

Proof

Display XL…--text-display-xl

Proof

Display LG…--text-display-lg

Proof

Display MD…--text-display-md

Proof

Headline LG…--text-headline-lg

Proof

Headline MD…--text-headline-md

Proof

Headline SM…--text-headline-sm

The work is the receipt.

Body LG…--text-body-lg

The work is the receipt.

Body MD…--text-body-md

The work is the receipt.

Body SM…--text-body-sm

PROOF OVER PERFORMANCE

Mono MD…--text-mono-md

PROOF OVER PERFORMANCE

Mono SM…--text-mono-sm

PROOF OVER PERFORMANCE

Mono XS…--text-mono-xs

SPACING

The base ramp climbs in 8px steps. The marked rows are the 4px sub-grid aliases that sit off the base, kept for components that need finer control. Naming them honestly is the point.

1…
4…
8…
12…
16…
20…
24…
28…
32…
40…
48…
64…
80…
120…

LAYOUT

The same discipline as the spacing scale, made visible. The spread below is a Müller-Brockmann modular field: twelve columns, a 24px leading on an 8px baseline, every element placed by column line. Press G — or the toggle — to see the grid it sits on.

Layout / the modular field

Built on the grid.

Most grids are a screenshot in a slide. This one is load-bearing: every element on this spread is placed by column line, and its rhythm is locked to the 8px baseline.

12

columns · 8px baseline

Each band spans all twelve columns and re-exposes them as a subgrid, so its children snap to the same lines as everything else. Nothing is eyeballed.

The overlay is not painted on top — it reads the same tokens and shares this content box, so the columns it draws are the columns the content sits in, at every width.

[ FIELD_SPEC ]

  • Columns12
  • Gutter24px
  • Margin48px
  • Baseline8px
  • Leading24px

Press G to measure it.

Velocity = columns · Logic = baseline · Human Signal = margins

RADIUS

Intent

Small…--radius-lgSubtle insets and tiles
Surface · Button…--radius-surface · --radius-buttonOne 8px corner, two intents — a box and a control. Same value, named for where it's used.

Primitives — framework scaffolding, not currently used

sm…--radius-sm
md…--radius-md
xl…--radius-xl
2xl…--radius-2xl
3xl…--radius-3xl
4xl…--radius-4xl

SURFACES & ELEVATION

The stack is deliberately shallow. One page background, one lifted surface for cards and popovers, and a single hairline between them. Depth comes from that 1px edge and the shared grain — never a shadow ladder.

01
Base…--hero-baseThe single page background. Every full-width section sits on this one ground.
02
Elevated…--hero-elevatedCards, popovers, plates, and embeds — the only lift above base. Never a full-width section.
—
Hairline…--grid-hairlineThe 1px rule that separates surfaces. Depth is this edge, not a drop shadow.

ElevationNo drop-shadow tokens ship. A surface earns lift from --hero-elevated plus a --grid-hairline border and shared grain. The only shadows in the system are optical ones on floating media (work covers), never on flat UI.

MOTION & MEASURE

Rise…Entrance: fade + 14px lift
Fill bar…scaleX(0) to scaleX(1)
Page…Full marketing measure
Editorial…Reading measure
Audit…
Review…

COMPONENTS

Every specimen below is the real component, styled only by the tokens above. Nothing here is a screenshot or a one-off — change a token and these change with it.

Action--cta-fill · --radius-buttonOne apricot fill for primary, a hairline ghost for secondary. 44px touch floor.
Design system / foundations
Eyebrow label--font-mono · --text-mono-smMono, uppercase, tracked. The system’s section signature.
Aa
Surface plate--hero-elevated · --radius-surface · --grainElevated ground, one hairline, shared grain. The base box every cover and card is cut from.
  • UI/UX
  • 0→1
  • Design system
Tag row--hero-muted · --grid-hairlineNeutral metadata pills — never tinted, never the loud thing on the card.

GUIDELINES

Do

  • Read tokens, never retype values — every surface pulls from the CSS variables so the system can’t drift from itself.
  • Keep one page background (--hero-base). Reserve --hero-elevated for cards and popovers, never full-width sections.
  • Treat apricot (--hero-apricot) as the brand color and Human Signal (emphasis, insights, quotes). The interactive layer is Velocity blue (--signal-velocity), which --cta-fill resolves to.
  • Snap spacing to the 8px scale. When you must go off-grid, use a named 4px alias and mark it honestly.
  • Hold body copy at the 18px floor (--text-body-md); labels go mono, uppercase, tracked.

Don’t

  • Don’t hardcode a hex or a px. If it isn’t a token, it doesn’t ship.
  • Don’t invent green: --hero-sage is a legacy alias that resolves to apricot. Reach for --hero-apricot in new code.
  • Don’t stack shadows for depth — lift is one elevated surface plus a 1px hairline, not an elevation ladder.
  • Don’t drop type below the floors (--text-mono-xs at 12px, body at 18px).
  • Don’t use --hero-faintfor body text — it’s tuned for footnotes and labels at ~4.7:1.