Home

Design system

The tokens and components behind this site, rendered live from the real code.

Read how it was built

Components

Button

Four variants, three sizes. With an href it renders as a link, so a button is never nested inside an anchor.

Variants

Sizes

States

Badge

Small labels for tags, formats and statuses. 11px, semibold, 4px radius.

  • default
  • accent
  • outline
  • muted

Card

The base surface: 1px border, surface background, 6px radius, no shadow.

Default card

Static container for grouped content.

Hoverable card

The border darkens on hover. Nothing lifts or glows.

Tokens

Colour

Each swatch is painted with the live CSS variable, so it follows the current theme. Values are listed for both themes.

  • --color-primaryDark #4a8f85Light #3d7d74
  • --color-primary-hoverDark #3d7d74Light #336b63
  • --bg-baseDark #111318Light #ffffff
  • --bg-surfaceDark #1a1d24Light #f7f8f8
  • --bg-elevatedDark #21252eLight #ebedef
  • --text-primaryDark #e4e6eaLight #15171c
  • --text-secondaryDark #a0a5aeLight #515862
  • --text-tertiaryDark #6b7280Light #8a939e
  • --text-disabledDark #454952Light #b0b7bf
  • --border-defaultDark #2a2e38Light #d4d8dc
  • --border-hoverDark #3b4049Light #b0b7bf
  • --color-successDark #3d9970Light #3d9970
  • --color-warningDark #c79a3aLight #c79a3a
  • --color-dangerDark #c0504dLight #c0504d
  • --color-infoDark #4a8db7Light #4a8db7

Tokens

Type scale

Seven sizes, one family (Open Sans). Nothing in between.

  • 11px · .text-xsSecurity-first, from line one
  • 13px · .text-smSecurity-first, from line one
  • 15px · .text-baseSecurity-first, from line one
  • 17px · .text-mdSecurity-first, from line one
  • 21px · .text-lgSecurity-first, from line one
  • 26px · .text-xlSecurity-first, from line one
  • 32px · .text-2xlSecurity-first, from line one

Radii

Strict caps: 2px for tags, 4px for controls, 6px for cards and modals.

  • --radius-tag2px
  • --radius-btn4px
  • --radius-badge4px
  • --radius-input4px
  • --radius-card6px
  • --radius-modal6px

Spacing

An 8px base grid with a 4px half-step.

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

Tokens

Motion

One easing curve for everything, with short durations. Motion is reduced to near zero when the system asks for it.

--ease-default

cubic-bezier(0.22, 1, 0.36, 1)

--duration-fast
150ms · Fast (hover, focus)
--duration-normal
200ms · Normal (reveals)
The demo runs at 600ms so the curve is easy to see.