Contact

Get in touch
This site

One system, every page.

This page documents the design system this site is built from — the semantic tokens, one type system, the component vocabulary and the rules that keep twenty-seven pages looking like one product.

01 · Colour

Layers, not decoration.

Depth comes from stepping neutral surfaces — --background to --layer-01 to --layer-02 — and from bands whose theme is fixed. Shadows are reserved for surfaces that genuinely float. Every colour is written once with light-dark() in src/css/tokens.css, so a theme zone flips a whole band by changing color-scheme alone.

The brand forest green replaces the interactive family only: links, focus, the primary button, current-page indicators and the accent gradient. The neutrals stay Carbon's, because they carry the layering the rest of the system depends on.

Background --background

The page surface. White in light, #161616 in dark.

Layer 01 --layer-01

The first step up: alternate bands, resource cards, fields.

Layer 02 --layer-02

The second step: a tile on a layer-01 band, a field on a layer.

Layer accent --layer-accent

Table headers and group rows.

Interactive --interactive

The brand forest green — the one colour that means “interactive”.

Button primary --button-primary

6.6:1 with its white label, in both themes.

Text primary --text-primary

18.1:1 on the background in light, 16.5:1 in dark.

Text secondary --text-secondary

AAA (7:1) on background and layer-01 in both themes.

Border subtle --border-subtle

Dividers and card outlines.

Border strong --border-strong

Field underlines and control outlines — 3:1 non-text contrast.

Support error --support-error

Status only, always beside an icon and a message.

Support success --support-success

Status only. Colour is never the sole signal.

02 · Typography

Weight lightens as size grows.

One family: IBM Plex Sans at 300, 400 and 600, self-hosted from the openly licensed @ibm/plex package in Latin-1 subsets, with IBM Plex Mono for code. Display sizes are light, headings from 20 to 32px regular, and anything at or below 16px semibold — heavy large type is off-system.

Two registers share the scale: an expressive, fluid set for lead spaces and section headings, and a fixed productive set for body copy, menus, tables and forms. A page uses five or six steps, never more. Everything is left-aligned and flush to one text edge.

--display-01 · Plex Sans 300 · clamp(34→60px)

Science that moves from the laboratory to real systems.

--heading-05 · Plex Sans 400 · 32/40

Five themes, one engineering lens.

--heading-04 · Plex Sans 400 · 28/36

Evidence before assumption

--lead · Plex Sans 400 · clamp(20→24px)

A lead paragraph carries the sentence that explains the page, and sits within eight columns.

--heading-02 · Plex Sans 600 · 16/24

A criterion of shear stability

--body-02 · Plex Sans 400 · 16/24

Body copy measures 66 characters at most, wraps pretty, and keeps primary text above 13:1 so long reading never depends on ideal conditions.

--body-01 · Plex Sans 400 · 14/20 · the only uppercase Eyebrow label
03 · Components

The building blocks, rendered live.

Every component below is the production component — this page is built from the system it documents. Controls stand 48px tall from a size token, carry a 4px radius, and centre their label with its icon.

Gray tag Aerosol science Catalysis Sustainable materials
Geometry
Radius
4px for every surface and control; 0 inside edge-to-edge bars
Control height
48px default, 40px dense, from size tokens
Targets
44px minimum for standalone controls
Focus
2px ring, 2px offset — drawn inside edge-to-edge bars

Inline notification A 3px support-colour rule on a layer, with the status icon beside the text. Colour never carries the meaning alone.

Warning The warning colour is the text-safe variant, not Carbon's icon-only yellow.

Error An error says what happened and how to recover, and never stands on colour alone.

Helper text sits below the field and is linked with aria-describedby.
Enter a valid email address.
Loading

Nothing here yet.

An empty state says why it is empty and what to do next — left-aligned, on the grid.

Browse the catalog
04 · Usage rules

Ten rules that keep it one system.

01 — Tokens only

Components read semantic custom properties. No raw hex, no arbitrary pixel value where a token fits.

02 — The grid is the design

One 16-column grid, one text edge, 4/12 and 8/8 splits. Nothing is centred to look balanced.

03 — Layers before borders

Depth steps through neutral surfaces. Borders divide; shadows belong to surfaces that float.

04 — One definition per colour

light-dark() writes each colour once, so a theme zone flips a band with color-scheme alone.

05 — Focus is never optional

A 2px ring in the focus token, offset outside standalone controls and inside edge-to-edge bars.

06 — 44px targets

Standalone controls meet 44px; menu, footer and tree rows keep 32px and grow on coarse pointers.

07 — One primary per decision

A button group carries at most one primary; tertiary and ghost stay visibly subordinate.

08 — Motion collapses

Durations and curves are tokens, and every transition yields to prefers-reduced-motion.

09 — Fluid, rem-based type

Expressive sizes interpolate between the grid's breakpoints; zoom and text resizing always work.

10 — States are designed

Hover, focus, selected, disabled, loading, empty and error ship with the component, not after it.