Skip to main content
Design system

Molecules

Small groups of atoms with one portable job. Import from @site/src/components/molecules.

Page header

Back to the system

Wayfinding

One title, on every page.

The lead is the body voice at text-lead. It does not outgrow the section title.

The one page opener. Fraunces h1 at the text-h1 token, a lead that stays under h2, and the same back link and eyebrow slots when the page already has them.

Used on Home, Process.

Section

A section on warm muted paper.

Vertical rhythm from the rhythm-section token. Surfaces are warm paper, white, or warm stone.

Used on Home.

Card grid

  • First

    One card, one radius, one hairline.

  • Second

    The grid does not invent a second card style.

Cards in one gap. Each card is the shared Card, with an h3 and body.

Used on Home.

Numbered list

  1. 01Name itThe first step in the sequence.
  2. 02Do itThe next step uses the same type.

An ordered sequence. The marker is mono. The title is the h3 token.

Used on Home.

Prose

Reading copy stays in this measure. The heading above it is the section title, not this paragraph.

Body measure. Paragraphs stay on the body token so they cannot outgrow an h2.

Used on Home.

Section header

Guide

Name the next move.

One title, one lead, then the work. A second title size is drift.

The only page-title composition. The heading is Fraunces. The description is the lead, in muted ink, left aligned on a guide.

Used on Design system.

Card

Default. White on paper, one hairline.

Muted. Filter panels and inset stages.

Accent. A named alarm, not decoration.

Dark. Chalk on ink.

A bordered surface for one related group. Accent is a tinted alarm surface. Dark is an ink section, not a site theme.

Used on Play, Time.

Index card grid

01

Subject index

Choose among a few curated paths.

Open template

02

Capability finder

Filter a large governed job catalogue.

Open template

A small set of paths. Each card names a destination, a reason, and one action. The action is ink.

Used on Platform, Playbook artifacts.

Check item

Owner is named

The page can say who decides.

Outcome is observed

A green check is not proof.

A row that shows done or not done without using color as the only signal.

Collapsible section

The reader asked for the rest. The heading stays a button.

Closed by default. Open reveals the same surface, not a new page.