Components

A short, deliberate set. Every component composes from the same tokens — no one-off colours, no one-off spacing.

Buttons

Three intents — primary, secondary, ghost — each at one default size. Min 40 px tall to satisfy WCAG 2.2 target size (≥ 24 px) with margin to spare.

Inputs

Always paired with a visible label. Placeholders are hints, never labels.

Cards

Containers for related content. Choose a variant by intent — never by aesthetics alone.

Variants

Default

Subtle border, sunken background. The workhorse — use for grouping content with no special status.

Elevated

Same shape, drop shadow. Reach for it when the card needs to lift above a busy surface — e.g. floating dialogs, popovers.

Accent

Brand-blue border. For a single hero card per page — promotion, primary CTA target, or status callout.

Interactive →

Whole card is a link target. Hover lifts; focus shows the standard focus ring.

With media + actions

Service

IT Modernisation

Move legacy systems off life-support without losing a working day.

Service

Data Migration

Near-zero downtime moves with rehearsed cutovers and verified row counts.

Tables

For comparing values across rows. Right-align numerics; never centre body text.

Standard

Project Owner Status Records Updated
Atlas Migration J. Smith Live 12,481 2 h ago
Helios Reporting P. Grodzicki Staging 3,902 Yesterday
Vega CRM A. Nowak Blocked 847 3 d ago
Orion Backups M. Kowalski Planned

Dense

For audit logs and ops dashboards where row count beats whitespace.

Time Actor Event Duration
12:01:04systemnightly-sync started
12:03:17systemmigration step 1/4 ok133s
12:04:02systemmigration step 2/4 ok45s
12:04:51systemmigration step 3/4 ok49s
12:06:11systemmigration step 4/4 ok80s
12:06:12systemnightly-sync done308s