Laura-Anne Austin

Design system

How this site is built

Every token below is read out of the stylesheet at build time, so this page cannot drift from the code. Change a value and the documentation changes with it.

59 tokens across 9 groups · generated by scripts/build-tokens.mjs from globals.css

Foundations

Surfaces

What everything sits on. Light, never dark.

  • sky-0#fbfdff
  • sky-1#eff6fd
  • sky-2#dbe9f9
  • paper#ffffff
  • line#e2eaf4

Ink

Text, in four weights of presence. Every one clears 4.5:1 on all four surfaces.

  • ink#16233a15.72 on paper15.42 on sky-014.43 on sky-113.69 on blue-soft
  • ink-soft#3d4c648.69 on paper8.52 on sky-07.98 on sky-17.57 on blue-soft
  • muted#4e5b6d6.91 on paper6.77 on sky-06.34 on sky-16.01 on blue-soft
  • faint#5a6d865.29 on paper5.19 on sky-04.86 on sky-14.61 on blue-soft

Accent

Spent on state and meaning, never ornament. Each state has a soft fill and an ink measured against it.

  • blue#2d6ac75.25 on paper5.15 on sky-04.82 on sky-14.57 on blue-soft
  • blue-soft#e7f0fd
  • blue-ink#245aa86.77 on paper5.89 on blue-soft
  • blue-soft-hover#d9e8fc
  • blue-line#b9d2f3
  • blue-line-soft#d8e6fa
  • blue-dash#a9c8f0
  • sun#f2b134
  • sun-soft#fdf3dd
  • sun-ink#8a5e125.69 on paper5.16 on sun-soft
  • sun-line#c98d22
  • sun-rail#e8d3a4
  • sun-tape#fbe6be
  • sun-tape-edge#f9d89a
  • mint#2fa87c
  • mint-soft#e4f4ee
  • mint-ink#1d7a585.28 on paper4.65 on mint-soft
  • mint-line#8fd4b6
  • blush-ink#b3402c5.70 on paper

Typeface

Four faces, each with one job.

  • displayvar(--font-display), Georgia, serif
  • bodyvar(--font-body), system-ui, -apple-system, sans-serif
  • monovar(--font-mono), ui-monospace, Menlo, monospace
  • handvar(--font-hand), cursive

Type scale

Eight steps. Nothing below 12px, anywhere.

  • fs-2xs12px
  • fs-xs13px
  • fs-sm15px
  • fs-md17px
  • fs-lg20px
  • fs-xl24px
  • fs-2xl30px
  • fs-3xl38px

Spacing

A 4px base. Layout uses gap, not stacked margins.

  • s14px
  • s28px
  • s312px
  • s416px
  • s524px
  • s632px
  • s748px
  • s864px
  • s996px

Radius

Four steps, by role rather than by taste.

  • r-sm6px
  • r-md12px
  • r-lg20px
  • r-pill999px

Line height

Tight for display, generous for reading.

  • lh-tight1.15
  • lh-snug1.4
  • lh-body1.65

Elevation

Three levels. Shadow means "separate object", so it is rationed.

  • shadow-sm0 1px 2px rgba(22, 35, 58, 0.04), 0 2px 8px rgba(22, 35, 58, 0.05)
  • shadow-md0 4px 10px rgba(22, 35, 58, 0.06), 0 14px 34px rgba(22, 35, 58, 0.09)
  • shadow-lg0 10px 20px rgba(22, 35, 58, 0.08), 0 28px 60px rgba(22, 35, 58, 0.12)

Every colour that carries text is measured where it is used: the four inks and the blue against paper, sky-0, sky-1, blue-soft, and each state ink against its own soft fill. A token that passes on paper can fail on a tinted band, and that is exactly where it slips through.

Components

Live, using the same classes as the rest of the site. Nothing here is a mock-up.

Buttons

One shape. Weight carries the hierarchy; the dashed one is a utility, never the main action.

PrimarySecondaryUtility

State pills

Status is never carried by colour alone: every pill states its state in words.

LiveArchivedBuildingalongside

Commit log

The journey is a git graph: a node per commit, gitmoji for the type, and a merge row for a promotion. Gitmoji appear here and nowhere else.

  1. rewrite end-to-end testing onto Playwright
  2. take over the design system
  3. Promoted to Senior Full-Stack EngineerOct 2025

Emphasis

Three levels, each meaning something different.

Highlighter marks the phrase that matters, bold carries a claim, and the hand is for asides only.

The rules

A system is the constraints, not the swatches. These are enforced on every change.

  • Text clears 4.5:1 and any marker that carries meaning clears 3:1, both against the background actually rendered behind them, not the one assumed.
  • Nothing is set below 12px, and every tap target is at least 32px on both axes.
  • Every class defined has a use and every class used has a rule. A script checks both directions.
  • Colour never carries meaning on its own. Each state has a word as well as a hue.
  • Not everything is a card. Border, fill and shadow mean a separate object, so they are spent sparingly.
  • Content is visible at rest. Anything that animates in has a failsafe, and plays again each time it comes back into view.
  • Reduced motion is honoured everywhere.
  • One metaphor per section: the journey is a git graph, so the paper planes stay out of it.