Design system

Warden's visual language: very dark, clean, calm, spacious, professional. Dark-only — near-black with whisper-fine elevation, one calm steel-blue accent, muted semantics, tight radii, unhurried motion. Tokens only: every value below is a CSS variable, never a hardcoded color.

Elevation

Depth encodes importance — surfaces rise in whisper-fine steps.

bg-sunkenwells, inputs

bg-basepage floor

surface-1default card

surface-2raised / hover

surface-3overlay

Accent & semantics

One calm accent; muted state colors that read clearly without shouting.

accentthe one accent

positiveallowed

cautionneeds approval

dangerblocked

accent-soft

positive-soft

caution-soft

danger-soft

Text

A three-step ladder; soft white, never pure.

Primary — the soft white you read.

Secondary — supporting copy and meta.

Tertiary — hints, captions, the quietest layer.

Typography

Inter, on a role-named scale.

Display

Title

Heading

Subheading

Body — the default reading size.

Label — controls and fields.

Caption — the quietest meta.

Radius

Tight and precise.

sm · 5pxbadges, chips

md · 8pxbuttons, inputs

lg · 12pxcards

xl · 16pxhero surfaces

Buttons

Actionable looks actionable — accent fill, a focus ring, a gentle press.

Badges

Tone is the meaning — a glance reads state before words.

neutralaccentpositivecautiondangerinfo

solidoutlinesoft

Controls

Native elements, dressed to match the system.

Disclosure

Progressive reveal with an unhurried glide.

A per-action safety rule layered on top of scope — it can stop an action even when it is in scope. Most-restrictive-wins.

Assist → Supervised → Autonomous. It governs whether an in-scope, guardrail-clean action runs on its own — never whether the agent may act outside its grants.