Foundations

Color

The palette is black plus a value scale of white — no gradient soup, no decoration. Roughly 70% black, 29% neutral values, and under 1% reserved accent. White-with-opacity is the source of truth for hairlines, so structure composites cleanly on any near-black surface.

Surfaces

Depth is expressed by lightness and hairlines — never shadow. Each step lifts the surface one measured notch above the canvas.

--pds-color-canvas

The stage — page background beneath everything.

--pds-color-surface

Raised blocks: cards, CTA panels, code frames.

--pds-color-surface-2

Sunken step: inputs, code panels, table headers.

--pds-color-surface-3

Floating step: menus, popovers, tooltips.

Text

Three tiers of legibility. muted clears contrast for labels and metadata only — never set body copy in it.

--pds-color-ink

Primary text and the inverse fill of primary buttons.

--pds-color-secondary

Body copy and secondary text — ~9:1 on canvas.

--pds-color-muted

Eyebrows, metadata, disabled. Labels only — never body.

Hairlines

Four alpha-white rules do all the structural drawing. Borders are always 1px hairlines, never solid gray. The chip below shows each token as a fill for visibility.

--pds-border-subtle

Inner and secondary dividers.

--pds-border-faint

Default hairline — card edges and dividers.

--pds-border-strong

Section top-rules and panel frames.

--pds-border-ctrl

Control borders — secondary buttons, chips, inputs.

Ghost fills

Barely-there tints for secondary control fills and quiet panel washes.

--pds-fill-ghost

Secondary button rest fill; quiet panel tints.

--pds-fill-ghost-hover

Secondary button hover fill.

Accent

--pds-accent is the single reserved signal: focus rings, selected nav markers, and the lone live number on a page. It is never a button fill and never a status. Five curated accents are available; each darkens automatically for AA contrast in the light theme.

Greendefault

Bluedata-accent

Reddata-accent

Amberdata-accent

Violetdata-accent

The budget rule: if the accent appears more than once on a screen, it is wrong. It marks exactly one live number — [ 19 ] open roles.

Status tones

The five status tones — success · warning · danger · info · neutral — read as tint background plus a readable foreground. info is deliberately distinct from neutral. Status color appears only on Badge, Callout, Banner tints and status dots — it never carries interactivity, and never stands in for the accent.

Deployedsuccess

completed, healthy, live

Pendingwarning

needs attention, degraded

Faileddanger

error, destructive, down

Queuedinfo

informational, in progress

Draftneutral

inert, unremarkable state

Environment

A separate ramp colors deploy-environment chrome, so an operator can never mistake staging for production. It lives outside the status system.

Developmentdata-env="dev"

Stagingdata-env="staging"

Productiondata-env="prod"

Both themes

The system ships dark and light from one set of semantic tokens, swapped by data-theme. Light inverts value, not personality — same hairlines, same sharp corners, same mono metadata. The panels below force each theme locally.

dark

DeployedPendingFailed

Ink over canvas

Secondary body copy holds its ~9:1 contrast in both themes.

light

DeployedPendingFailed

Ink over canvas

Secondary body copy holds its ~9:1 contrast in both themes.