Quiet paper, soft white cards, plain words.
v4 keeps the warm paper canvas and the semantic colour meanings of v3, and changes the delivery: hairline boxes become white cards with a quiet shadow, small print becomes a 16px base, machine codes step behind human words, and every label survives being twice as long in Russian.
One token set serves the Astro public site, the self-contained Go-rendered dashboard and a future Nuxt UI. No remote icon kits. Onest and IBM Plex Mono only.
1 · Foundation
Colour carries meaning, never decoration. Ochre is the human authority and drift branch, teal is the agent path, red is literal blockage, green is a verified fact, plum marks a multi-party decision.
Every colour below is a semantic token, so the same markup serves both themes: the hex values in this section are the light values, and the dark theme only re-points the tokens. Hue is preserved across themes — teal stays teal, red stays red — while lightness flips. Light is the default; the choice is remembered per reader.
Surfaces
Ink
Semantics
Type scale
Radius, elevation, motion
2 · Artifact types
Eight document types, one grammar. The human word leads, the prefix stays visible for machine correlation. Colour plus word plus prefix — never colour alone.
3 · Components
Every part below is expressible as semantic HTML plus CSS, so the Go-rendered single file and a future Nuxt build can share it.
Status pills
Tinted fill, dark text, 6px radius. Sized by content so a Russian label just gets wider.
System monograms
Two letters, one tint. Round only here and on status dots — everything else is softly rectangular.
Controls
Buttons are 10px, tall enough for touch, sentence case.
Fact table
Label–value pairs are always a table: label left, value right-aligned, hairline row separators.
List row
Type, consequence, title, route. Selected state is a teal ring.
Contract line
Drift is a property of one consumer line, never of the contract as a whole.
Exchange lane
The network unit. Two monograms, a lane, a count. Solid lane is a contract dependency, dashed is an open exchange.
Unavailable block
Missing context is stated in words. Never green, never zero, never a guess.
4 · Patterns
Three layouts cover every dashboard view.
Master–detail
Overview, Work, Threads, Contracts, Integrity. Narrow list, first item open by default, detail never pushes the list.
Map
Network and Spaces. Grouped by space, lanes inside, no free-floating graph and no physics.
Ledger
Versions and long fact lists. One table, right-aligned values, no card per row.
5 · Rules that keep it honest
Two languages, one layout; product truth over decoration.
Bilingual by construction
Data honesty
Dropped from v3
6 · Surface parts
The public site adds narrative and machine-readable actions on top of the same vocabulary. Everything below is live: buttons copy, disclosures open, states switch.
Copyable command block
Dark panel, mono 14–15px, a role label and one control with success and failure states. Never a fake terminal window with prompts and cursors.
“Ask an agent” menu
One control in the sticky header, on every public page. It opens on click — never on hover — and every machine-readable action lives inside it, so the page body stays free of utility buttons.
Header order, left to right: language (EN default, RU in the popover), theme (light default), Ask an agent, Install a2a.
Evidence strip
Earned facts only, each with its own scope. No certification marks, no uptime, no customer logos.
A bounded live-evidence claim always names its immutable candidate. It is never a standing badge.
Plain-language disclosure
Machine codes stay available; the human sentence leads. Click, not hover — essential information is never hover-only.
Lifecycle marker and transition rail
One current state per artifact, and the transitions the fold table allows from it. Legal next moves name the systems allowed to make them.
Provenance chip
Every fact belongs to one of three classes, and the class is visible wherever it matters.
Causal rail and event row
Documents and events on one rail, in committed order. Not chat bubbles — nobody is speaking here.
Next-owner panel
One panel per thread answers whose move it is and why. The reason is a sentence, not a code.
Snapshot / compatibility ribbon
Four independent axes. Never infer one from another, and never average them into one health score.
Degraded and empty states
Five distinct shapes. None of them is a blank panel, a zero or a green tick.
Changelog entry and impact block
Kind, impact and affected surfaces first; then whether a human has to do anything, and exactly what to run.
Autonomy boundary
The signature gesture: ochre is the human authority branch, teal is the agent path. The human sits beside the loop, never inside every turn.
Roadmap horizon marker
Three visibly different commitment states, and never a progress percentage.
Docs shell parts
Section nav, working search, local table of contents, heading anchors, and a source note. Normal page scrolling — never a nested viewport.
Reading measure 34em ≈ 68 characters. A page whose body is not owned by the site shows an honest injection block instead of invented prose.
Agent-compatibility row
Named surfaces are examples the binary can detect — not integrations, not endorsements. The neutral row prevents a logo wall.
7 · Implementation note
What the three surfaces share, what belongs to one of them, and which data the Go assembler has to project so the browser never computes protocol truth.
Token names
Three layers. Component tokens resolve to semantic tokens, semantic to primitives — never the reverse.
Shared by all three surfaces
Semantic HTML plus CSS plus small vanilla JS, so Astro, the Go renderer and a future Nuxt build can express the same component.
In this prototype the first six are real files; the rest are compositions of the same tokens and are named so a Vue or Astro implementation keeps the boundary.
Surface-specific
Data projections this design needs from the Go assembler
The browser must never reimplement fold tables, authorization, severity, drift, deadline policy or validation. Each row below is a fact the HTML consumes already computed.