Skip to main content

Demo 01 · The priority hire need

Design system and component library

The role asks for this twice. Here is how I build it. A token layer is the single source of truth. It feeds a small set of accessible, reusable components. Change a token, and the whole system updates.

The token architecture

Components never hard code a color or a size. They read semantic tokens, and those tokens point at the brand values. That one step is what makes the system easy to theme and keep consistent.

/* tokens.css: the single source of truth */
:root {
  --kcrw-acid: #d6ff00;             /* brand value */
  --color-accent: var(--kcrw-acid); /* semantic role */
}

/* Button.module.css reads the role, never the raw value */
.primary { background: var(--color-accent); }

Color tokens

Page background--color-bg
Card / panel--color-surface
Sunken / hover--color-surface-sunken
Primary text--color-ink
Secondary text--color-ink-muted
Borders / dividers--color-line
Accent / CTA--color-accent
Dark blocks--color-inverse-bg
Errors / live--color-danger
Success--color-success

Type scale

A simple modular scale. Body text never drops below 16px.

  • Display--text-5xl · 61px
  • Page title--text-4xl · 49px
  • Section--text-3xl · 39px
  • Subsection--text-2xl · 31px
  • Card title--text-xl · 25px
  • Lead / large body--text-lg · 20px
  • Body (minimum)--text-base · 16px
  • Secondary--text-sm · 14px
  • Caption / label--text-xs · 12px

Spacing and radius

An 8px spacing scale and a small set of corner radii keep the rhythm even.

Spacing

  • --space-14px
  • --space-28px
  • --space-312px
  • --space-416px
  • --space-524px
  • --space-632px
  • --space-748px
  • --space-864px
  • --space-996px

Radius

--radius-sm
--radius-md
--radius-lg
--radius-pill

Buttons

One component renders a button or a link. Four styles, three sizes.

Badges and status

NeutralAccentInkOn air

Cards

Programme

Morning Becomes Eclectic

An interactive card. The whole surface is one focusable link.

Dark variant

High-contrast block

The same component, inverted with tokens for dark blocks.

Commerce surface

The same system covers a store card too. That matters for Shopify and storefront work, not just media UI.

Reagent Starter Kit

Everything a new lab bench needs to get going on day one.

$129

Sample Vials (x100)

Borosilicate, autoclavable, with screw-cap seals.

$42

A bigger component: the audio player

Tokens and small parts build up into one complex, fully accessible component. It also stands on its own as Demo 02.

Morning Becomes Eclectic

Morning Set, Pt. 1

The Resident

Space play/pause · J back 15s · L forward 15s · arrow keys on the seek bar scrub