The Countersign design system — light-first cool neutrals, graphite-navy ink, one deep-teal accent that means live, functional green/amber/red that mean pass/warn/breach, and mono for every number on the record.
Atmosphere. A dense, quiet instrument panel for a consequential decision. Light-first cool neutrals and graphite-navy ink; nothing decorative competes with the data.
One accent with one meaning. Deep teal marks live, active, traceable — never decoration. Green/amber/red are reserved for pass / warn / breach and never mix with teal.
The record is monospaced. Every figure a reader compares is mono with tabular figures, so digits align down a column and a changing value never reflows its neighbours.
Depth by surface, not shadow. Light leans on a strengthened hairline; dark leans on a four-step surface ladder plus a faint top edge. Shadows are reserved for true overlays.
Light · default
#0f7d8c#0b6573teal / 10%#0a6675#ffffff#f4f6f9#dfe3ea#d3d9e2#0f2436#51607a#66727f#16a34a#d9930a#e03131Dark · graphite ladder
#2bb8cc#4dccddteal / 16%#57cfe0#0a0b0d#111315#16181b#31353d#f3f5f6#8b929d#777e8a#2ea043#d6a02b#e5484dpage-title · 22/600 · −0.024emsection-title · 18/600 · −0.014emcard-title · 18/600 · −0.014emstep-title · 15/600 · −0.008embody · 13/400 · tracking 0field-label · 12/500 · sentence caseeyebrow · mono 11/500 · +0.06emmono-data · 12/400 · tnummono-badge · 11/600 · +0.06em2hairline gaps, icon nudges
4chip padding, tight gaps
8the default gap between siblings
12control padding, card inner gap
16card padding — the system runs tight here
24section separation
32major region separation
Shell: nav rail (60px collapsed / 190px open) | document panel | agent canvas + composer. The document panel hides below 1100px. Density comes from tight padding on a strict grid — the type floor stays at 11px.
card resting · hairline only, no shadow
shadow-md · overlays only (palette, toast, modal)
inset edge highlight · dark ladder
radius · 12px · panels, major containers
radius-sm · 8px · cards, buttons
radius-xs · 6px · inputs, chips
pill · 999px · status tags only, never buttons
dashed strong · sandbox frame
3px spine · attribution
Light
Dark
Light
On the proposed revised structure · APPROVE
Dark
On the proposed revised structure · APPROVE
--ease-out--dur-1 · 0.16s--dur-2 · 0.24sexceptionsAnnounce, then rest. Attention effects fire a bounded number of times and stop; a
decision surface that keeps pulsing reads as unresolved. prefers-reduced-motion zeroes
durations and animation delays.
Do keep teal scarce. Live, active, focus, provenance, identity — never decoration, never a functional state.
Do let green/amber/red carry meaning. Pass, warn, breach. They never mix with teal and never mark liveness.
Do set every compared number in mono with tabular figures. 11px is the type floor; 600 is the weight ceiling.
Do frame tinted elements with a solid colour in dark. Alpha borders vanish on graphite, and ghost buttons on a tint need a solid panel fill.
Do treat a dashed hairline as sandbox. The what-if panel and term amendments are scratchpads, not the record.
Don’t pair a border with a shadow. Light separates with a hairline; shadows are for overlays only.
Don’t shout in small type. Uppercase is reserved for status tokens and a handful of eyebrows — not field labels.
Don’t add a second accent, a serif “document voice”, glass surfaces, theme-reveal transitions, or decorative progress rules. All were tried and rejected.
≤ 1100px — the document panel hides. Provenance citation needs the source visible, so the click-through warns instead of failing silently.
Nav rail collapses to a ~60px icon rail with hover tooltips; the state persists.
Fixed-count rows use container queries, not viewport queries — the gate metrics and the financial cards respond to their own container width, so they behave correctly inside any column.
Type never shrinks to fit. The 11px floor holds at every width; layouts reflow instead.
Re-skinning is a token swap. Change the values in :root and
:root[data-theme="dark"] in src/index.css. No component markup changes.
Adding a colour? It must answer “what state does this mean?” If it has no semantic job, it does not belong — use an existing ink or surface step.
Adding a size? Use one of the six type steps and one of the seven spacing steps. New in-between values are how a system becomes eye-tuned rather than systematic.
Check both themes and recompute contrast. Dark and light fail differently: alpha borders die in dark, and faint ink fails AA in light.
Uppercase is still broader than reference systems. Roughly twenty eyebrow roles share one disciplined recipe; top systems scope caps to one to three roles. A further cut is available.
No focus-visible specimen on this page. Focus rings exist app-wide (3px accent-soft) but are not catalogued here.
The header is dense. Brandmark, shortcut hints, theme, autonomy, speed, status and two buttons share one row; it works at desktop width but has no small-screen treatment.
No component states matrix. Specimens show resting state; hover, disabled and loading are defined in CSS but not laid out side by side.