Skip to content
UXAtom

Design system

The system this site runs on.

Nine token layers, forty-eight components, one contract between design and code. Everything below renders the real component, not a screenshot.

Foundations

309
Design tokens
31
UI primitives
9
Stylesheet layers
AA
WCAG 2.2 target

Tokens, not values

Every colour, space and duration resolves through a semantic token. Rebranding is a variable change, not a refactor.

Variants as contract

Each component declares its variants, sizes and states in one table. If it is not in the table, it does not exist.

Accessible by construction

Focus rings, ARIA wiring and reduced-motion handling live in the primitive, so no consumer can forget them.

One source, two surfaces

The Figma library and the code library are generated from the same token file, so they cannot drift apart.

Colour

Components consume semantic roles, never raw palette values. Switching the theme re-resolves every role — try the toggle in the header.

  • Primary

    --primary

  • Secondary

    --secondary

  • Accent

    --accent

  • Success

    --success

  • Warning

    --warning

  • Danger

    --danger

  • Surface

    --surface

  • Background

    --background

Typography

Geist for display, Inter for body, Geist Mono for code. Display sizes are fluid and clamp between a mobile and desktop bound.

  • Heroclamp(44 → 96) / -0.04em
  • Sectionclamp(32 → 64) / -0.035em
  • Titleclamp(24 → 36) / -0.025em
  • Leadclamp(17 → 20) / 1.65
  • Body18 / 1.78
  • Small14 / 1.43

Spacing

An 8pt grid with 4px half-steps. Section rhythm is fluid, clamping from 64px on mobile to 160px on wide screens.

  • 3xs4px
  • 2xs8px
  • xs12px
  • sm16px
  • lg24px
  • xl32px
  • 3xl48px
  • 5xl64px
  • 7xl96px

Buttons

One primitive, six variants, five sizes, plus loading, disabled and icon-only states. Every clickable on this site is this component.

Variants

Sizes

States

Forms

Every control is wrapped by UiField, which owns the id, aria-describedby and error announcement — so no form in the codebase can ship an undescribed input.

We never share it.

One email a month.

Feedback

Badges, chips, tooltips, skeletons and toasts. Toasts render into a single aria-live region so nothing is announced twice.

Badges & chips

PrimaryLiveWarningDanger

Toasts

Loading

Overlays

Dialogs and drawers trap focus, close on Esc, lock body scroll and return focus to the trigger. Try it with the keyboard.

Want one of these

We build this for clients too.

Token architecture, Figma library, coded components and the governance model that keeps it alive after we leave.

Start a conversationSee how it works

Or email us directly at hello@uxatom.com