Skip to main content

Components

Browse live examples and minimal usage for every canonical interface component.

Choosing an owner? Use the component selection guide.

Foundations

Container

Constrains content width and keeps safe horizontal padding.

Small container
Container import
import { Container } from "@site/src/components/design-system";
Container minimal usage
<Container size="sm">Contained content</Container>

Divider

Separates adjacent ideas with an optional text label.

Divider import
import { Divider } from "@site/src/components/design-system";
Divider minimal usage
<Divider caption="Next" />

Rhythm

Applies a consistent vertical gap between related children.

tight
12px
base
24px
loose
48px
Rhythm import
import { Rhythm } from "@site/src/components/design-system";
Rhythm minimal usage
<Rhythm gap="base"><p>First</p><p>Second</p></Rhythm>

Section

Creates a semantic page region with shared spacing and background choices.

A compact alternate section.

Section import
import { Section } from "@site/src/components/design-system";
Section minimal usage
<Section spacing="sm" bg="alt">Section content</Section>

Actions and links

Button

Carries a command or a prominent destination.

Button import
import { Button } from "@site/src/components/design-system";
Button minimal usage
<Button variant="primary">Continue</Button>

CopyablePrompt

Turns guidance into a copy-ready prompt with accessible controls.

Put this to work

Review one interface

Design reviewer

Copy this prompt. Paste into Claude, ChatGPT, or any AI assistant. The page context is already loaded — send it and get analysis tailored to your role.

Review this interface.
Name the clearest next improvement.
CopyablePrompt import
import { CopyablePrompt } from "@site/src/components/design-system";
CopyablePrompt minimal usage
<CopyablePrompt label="Try it" prompt="Review this page." />

Labels and status

Badge

Shows a compact status in text and colour.

NeutralInfoReadyAt riskBlocked
Badge import
import { Badge } from "@site/src/components/design-system";
Badge minimal usage
<Badge variant="success">Ready</Badge>

Callout

Explains an important consequence or state without relying on colour alone.

Note

Check the evidence before deciding.

Review needed

The decision still needs an owner.
Callout import
import { Callout } from "@site/src/components/design-system";
Callout minimal usage
<Callout variant="info" title="Note">Check the evidence.</Callout>

Chip

Names a compact category or offers a small linked choice.

DesignReferenceProvenLinked chip
Chip import
import { Chip } from "@site/src/components/design-system";
Chip minimal usage
<Chip variant="brand">Design</Chip>

Eyebrow

Introduces a short section or taxonomy label.

Reference

Supporting label

Dark label

Eyebrow import
import { Eyebrow } from "@site/src/components/design-system";
Eyebrow minimal usage
<Eyebrow>Reference</Eyebrow>

Pill

Marks a small domain taxonomy term.

painjobfrictionsignaldefault
Pill import
import { Pill } from "@site/src/components/design-system";
Pill minimal usage
<Pill variant="job">job</Pill>

Content and layout

Card

Groups related content on one bounded surface.

Default card

A quiet content group.

Linked card

Keyboard-focusable and interactive.

Card import
import { Card } from "@site/src/components/design-system";
Card minimal usage
<Card padding="md">Grouped content</Card>

Prose

Applies readable measure and type rhythm to editorial content.

Small prose supports compact reference text without losing readable line length.

Large prose introduces an important idea with more visual weight.

Prose import
import { Prose } from "@site/src/components/design-system";
Prose minimal usage
<Prose><p>Readable editorial copy.</p></Prose>

SectionHeader

Opens a section with a label, heading, and short explanation.

Guide

Choose a component

Start with the job the component must do.

SectionHeader import
import { SectionHeader } from "@site/src/components/design-system";
SectionHeader minimal usage
<SectionHeader label="Guide" heading="Choose a component" align="left" />

TightFive

Limits a visible set to five items and arranges them consistently.

PurposeReaderActionEvidenceReview
TightFive import
import { TightFive } from "@site/src/components/design-system";
TightFive minimal usage
<TightFive as="row"><span>One</span><span>Two</span></TightFive>

Data display

DataListTable

Shows comparable rows as mobile cards and a desktop table.

  • Need
    Action
    Owner
    Button
  • Need
    Status
    Owner
    Badge
  • Need
    Structure
    Owner
    Section
DataListTable import
import { DataListTable } from "@site/src/components/design-system";
DataListTable minimal usage
<DataListTable headers={["Need", "Owner"]} rows={[["Action", "Button"]]} />

Stat

Pairs one prominent value with its label and context.

94%

Completion

This week

12

Open decisions

3

Risks

Stat import
import { Stat } from "@site/src/components/design-system";
Stat minimal usage
<Stat value="94%" label="Completion" />