Foundation

Semantic foundation examples rendered as interface fragments across surfaces, weight, typography, spacing, radius, elevation, and status.

Canvas and surface hierarchy

Canvas
Surface
Raised surface
Floating surface
Overlay surface

Visual weight and semantic text

Primary operational state
Secondary explanation that supports the current task.
Supporting metadata
Muted diagnostic context

Long-form reading surfaces

Conversation response
Just now

A calm reading surface keeps the primary response clear while supporting context stays visible without competing with it.

Supporting context · shared semantic surfaces

Border, radius, and elevation

Control radius
Raised
Floating
Overlay

Accent and status families

PrimaryInformationSuccessWarningDangerNeutral

Brand palette

The brand's colour-usage guide, by share of area: burgundy leads, white and green follow, electric blue accents, and the pale tints stay small.

  • Burgundy--palette-burgundy
  • Electric blue--palette-electric-blue
  • Green--palette-green
  • Peach--palette-peach
  • Black--palette-black
  • Blue pale--palette-electric-blue-pale
  • Green pale--palette-green-pale
  • Peach dark--palette-peach-dark

Brand roles

Symbol mark · theme-aware
Burgundy · primary identity surface
Electric blue · brand accent
Green · supporting brand expression
Peach · highlight surfaces, never status

Chart series

Assign in order and never cycle. Series that mean good or bad use status tokens.

  1. 1 · Electric blue
  2. 2 · Teal
  3. 3 · Rose
  4. 4 · Green
  5. 5 · Slate blue

Surface texture

Wash

Page headers and other chrome. Never behind data.

Brand

Sign-in, onboarding, and empty workspaces.

Typography hierarchy

Welcome / display
Page title
Section title

Body text describes the operational implication of the current state without decorative emphasis.

Metadata: updated 2 minutes ago

Operational typography

An opt-in scale for dense admin, catalog, connector, chat, and workspace-like surfaces.

Workspace / operational

Inventory overview

The operational preset tightens type rhythm and control text without changing the shared palette, surfaces, or accessibility behavior.

Updated 2 minutes ago
Connected resources
Sources

Semantic spacing and sizing