@dm/ui component gallery

internal

Shared layer used by Decision Manager (editors, pipelines, Git review), Decision Server (API workbench, probe, warehouse), and Admin. Every component state is named here — if a state is missing, consoles must not invent it.

Enterprise density · 2px radius · 40px rows128 colour pairs checked at WCAG 2.2 AASurfaces: editors · API workbench · pipelines · Admin

Design System Tokens & Style Guide

Color tokens, typography hierarchy, button variants, and card container specifications.

@dm/ui Design System Tokens & Style Guide

Type scale

Nine steps, each with the line-height and tracking it should have. Named for the job, not the size.

text-display30 / 36Decision tableMarketing display
text-h124 / 30Decision tablePage title (sm+)
text-h220 / 26Decision tablePage title, stat value
text-title16 / 22Decision tablePanel and dialog titles
text-read14 / 22Decision tableProse meant to be read
text-body13 / 18Decision tableThe console size: cells, buttons, fields
text-meta12 / 16Decision tableSecondary text, pagination
text-caption11 / 16Decision tableColumn headers, stat labels, hints
text-micro10 / 14Decision tableLegends, counts

Colour roles

Four surfaces back-to-front, four ink weights, four status roles. Ratios shown are against the canvas in the dark theme; every pair is machine-checked by packages/ui/scripts/contrast-audit.mjs.

Surfaces

bg-canvasthe page
bg-surfacerecessed regions, toolbars, table heads
bg-panelthe resting card
bg-elevatedfields, chips, things you can act on

Ink and status

Primary text19.1 : 1
Body and secondary7.8 : 1
11px labels and hints5.4 : 1
Accent as text5.4 : 1
Success11.4 : 1
Warning13.0 : 1
Info9.3 : 1
Danger7.2 : 1

Elevation

Four steps with four jobs. Nothing in the product invents a fifth.

shadow-card

resting

shadow-lift

hover / drag

shadow-popover

attached to a trigger

shadow-shell

detached from the page

Buttons

One box, four fills, two sizes. Hover darkens in both themes; disabled neutralises hover so it cannot lie about being clickable; busy shows a spinner and sets aria-busy.

primary
ghost
subtle
danger

Fields

Filled surface, one bottom rule, 32px. The invalid state paints a 2px danger rule — it used to set aria-invalid and render nothing, so the error message sat under a field that still looked untouched.

Lowercase, hyphenated.

Lowercase, hyphenated.

Already in use in this workspace.

Set by the engine.

Tags and status

Fixed 20px height so a badge never changes the height of the row it sits in. Every tone carries a dot as well as a hue — colour is never the only carrier of meaning.

tones
neutralmutedaccentinfookwarnerr
StatusBadge — the vocabularies the platform emits
draftin reviewapprovedpublishedarchivedrunningsucceededfailedbudget exceededshedlivestandby

Stat tiles

A tile distinguishes measured-and-zero from not-measured. The second renders an em-dash and says why — a confident zero for a counter nobody increments is the defect this component exists to prevent. Latency specimen uses the published method (~3.4 ms for 2 MB / 500 candidates), not a freestanding sub-2 ms claim.

Executions today

18,253

+12.4%vs yesterday

p99 latency (published method)

~3.4 ms

2 MB · 500 candidates · including parse

Rules evaluated

0

No calls in this window.

Cache hit rate

Not measured

The edge binary does not report this counter yet.

Product surfaces these components serve

Marketing names match console routes. Gallery specimens must not invent a fifth surface.

Decision Manager editors

Table grid · action rules · ruleflow · tree/template

Manager DevOps

Pipelines · Git review · commit summary · drift explain

Server API workbench

Collections · environments · assertions · codegen

Server ops

Probe · warehouse · deploy matrix · blue/green slots

DataTable

Sticky header, 40px rows, no zebra. Numeric columns align right with tabular figures via meta.align. The neutral sort arrow appears on hover or focus; the active one is accent-coloured and always shown.

  • Rulesetsample-refund
    Statuspublished
    Rules26
    p99~3.4 ms*
    Updated2 min ago
  • Rulesetloan-eligibility
    Statusin review
    Rules148
    p99—
    Updated1 h ago
  • Rulesetfraud-triage
    Statusdraft
    Rules9
    p99—
    Updatedyesterday
  • Rulesetkyc-screening
    Statusarchived
    Rules61
    p99~3.4 ms*
    Updated12 Mar
  • Rulesetpricing-tiers
    Statusfailed
    Rules33
    p99—
    Updated12 Mar
Rulesets

Tabs and the four non-content states

The tab set is one tab stop; ←/→/Home/End move inside it, following the writing direction. Below: what a region shows when it is loading, empty, filtered to nothing, or failed — four different facts that used to share one grey box.

No rulesets yet

A ruleset holds the decision tables, action rules and ruleflows for one decision.

No rows match this filter

Nothing matches “xyz”. Clear the filter to see every row.

Loading…

Feedback

Inline alerts are for a result you are looking at; toasts are for one you may have navigated away from. An error toast is assertive and lives 9s; a confirmation is polite and lives 4s.

Version 12 published to production.