The Techne v4 design system rendered operational: the token layer as code, the two-grammar rule, and a named pattern inventory, so that a build agent applies the system rather than reinterpreting it on every surface. This page is set entirely in the layer it specifies; almost every pattern it names is live somewhere on it.
Two documents share this territory and do different work. The constitution is the live Palette and Component Reference at techne.coop/design-system: why the parchment ground, why blue is primary and ember secondary, what the sunset sweep means, and the site-wide standards every page inherits. It supersedes the local v4 reference file this draft first cited, which remains in the record as history. This artifact is the operating layer beneath it: what an agent actually types. It does not re-argue a single choice; every why here is a citation to it.
Its lineage in the estate: it supersedes the shared stylesheet and the v3 design-system reference currently served on the commons pages. Its emission follows the pattern the Build Protocol set with its root distillation: this document governs, and commons.css distills it into the file every page links. If the stylesheet and this inventory ever disagree, this document wins and the disagreement is filed, per BP v1 §9.
One constraint stated honestly: in the artifact viewer where series documents are drafted and reviewed, pages cannot link a shared stylesheet, so each inlines the layer verbatim. On the site, inlining the layer per page is the sanctioned emission; pages may instead link commons.css where they already do. Amended by decision record: SUB-02 escalation card, adopted by Todd Youngblood, 2026-07-20. The inlined copies are emissions too, and drift between any copy and this document is a defect, detected under X-06, the design token audit.
Every color, size, and duration in the system is a named variable. The binding rule is short: pages use tokens only, and a raw hex value outside the token layer does not merge. The groups, with their live values shown in the current mode:
--bg --inset --surface --raised, with --line and --rule for structure. Warm neutral, parchment in light, never a tinted field.--heading, --text, --muted, --faint: the four steps of emphasis. Prose is text; titles and em are heading; captions are faint.--blue is primary: links, primary action, focus, selection. --ember is secondary: section marks, provenance edges, secondary action. Each has a readable -text partner. Neither ever fills a panel.--ok --info --warn, instruments and chips only, always paired with a word and a square mark. Never the sign of a number; signs are parentheses.-t partners per mode, and a five-step heat scale whose mapping flips with the mode so luminance order holds.--s1 to --s8 on a 4px base. Two faces: Libre Baskerville carries the document voice, and IBM Plex Mono carries the interface layer, labels, addresses, figures, and the status bar. Amended by decision record: X-06 escalation card, adopted by Todd Youngblood, 2026-07-20. Motion is --micro for response and --dur for mode, honored only when the device permits it.Every surface chooses one of two grammars before anything else is decided, and the choice is the first line of its packet. Mixing grammars on one surface is an escalation, not an experiment.
For written and governing content: specifications, guides, records, the public page. A reading column of 760 to 920 pixels, prose-forward in the serif, scrolling as a document should. Structure comes from citable section addresses, register rows, and the sweep as atmosphere.
this page · the PRD · the protocol · the landing page
For operational surfaces watching live state: the HUD, the signal loop, dashboards. Widescreen to 1600 pixels with no-scroll intent, mono-forward, built from stages, panels, tiles, gauges, and data tables. Structure comes from layout, not headings.
the implementation HUD · the signal loop · the wheel kit
The decision rule, plainly: if a person will read it top to bottom, document grammar. If a person will glance at it and act, instrument grammar. When a surface seems to want both, it is two surfaces, and the packet says so.
Version 4 assigned the sweep per page with paired selectors. This layer codifies the established attribute form: a section declares data-tint and inherits its hue for the address, the heading spine, and subhead rules. This page uses the mechanism live; the amber left of this heading is data-tint="amber" doing its work.
The usage rules carry from v4 unchanged: the sweep is atmosphere on written structure and encoding inside charts, ordered warm at the top of a page to twilight blue at the foot; it never colors a control, and never carries the sign of a number. Sections pair through the sweep so a long document crosses all six stops roughly twice at most, and a short one at least once.
Patterns are named so a packet can cite one instead of describing one: UI v1 §5 · chip is a complete instruction. Most patterns below are live on this very page; the three that benefit from a close look are demonstrated inline.
The elements a HUD is built from. A compact stage is demonstrated below; the fuller data-visualization vocabulary is live in the v4 reference and is named here so packets can cite it.
| packet | slice | status |
|---|---|---|
| B-04 | Belong · signatures | done |
| G-02 | Gather · registration | in review |
| S-01 | See your share · folds | blocked · Q3 |
| ledger | 41 entries |
The parts a hand touches, identical on every surface. Links are underlined, so affordance survives grayscale; focus is a visible 2px blue outline wherever it lands; nothing essential lives only behind a hover.
Buttons are mono, 2px radius, bordered rather than filled, with blue and ember carried on the border and text only. The mode toggle sits in the topbar of every page, and persists the choice under techne-mode. The rite is inline in the head, before any stylesheet, so no page flashes the wrong mode:
<!-- mode flash prevention: inline in <head>, before CSS -->
<script>
(function(){var s=null;try{s=localStorage.getItem('techne-mode');}catch(e){}
var m=s||(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');
document.documentElement.setAttribute('data-mode',m)})();
</script>
Every site page also carries the required head block from the live reference: color-scheme declared as dark light, a title on the pattern Page Name · Techne, a description of 120 to 160 characters leading with what the page holds, a canonical link, the Open Graph set with the default image as fallback, and the favicon linked by absolute path. The favicon is the cooperative grid mark, an ember-ground square with a 2×2 quad of cream marks, the last at partial opacity to suggest work in progress; its canonical source lives at /favicon.svg.
Content standards are absolute: no emoji anywhere on the surface, in copy, badges, avatars, or controls, with typographic and geometric Unicode carrying the work instead, arrows and shapes such as → and ◈ and ⬡. Icons are inline SVG on a 16 or 24 viewBox at 1.5 stroke, color inherited from currentColor, with paths kept in one shared constant rather than an icon library.
Two declarations remain non-optional: color-scheme on the root so native controls render correctly in both modes, and a prefers-reduced-motion block that disables transitions entirely. Where distinctiveness and accessibility conflict, distinctiveness loses, per the constitution.
Adapted from the constitution's closing constraints and kept negative on purpose: these are what hold the line when generation drifts toward the generic. An agent runs the audit against the rendered page, in both modes, before a surface leaves its packet.
GRAMMAR choose one: document (.wrap, 760-920) or instrument
(.wrap-hud). a surface wanting both is two surfaces.
GROUND warm-neutral tokens only; never a tinted field;
no raw hex outside the layer.
ACCENTS blue is PRIMARY (links, primary action, focus,
selection). ember is SECONDARY (marks, provenance
edges, secondary action). edges and marks only;
never fill a panel.
SUNSET data-tint for atmosphere on written structure;
the five-step heat scale inside charts. never on
a control, never the sign of a number.
STATE the five chips on three earth states, a word and
a square mark, never color alone. filed+ratified
green, drafted blue, open red, roles ember.
blocked = the Open chip, named. signs are
parentheses, never a hue.
TYPE two faces: libre baskerville document voice,
plex mono interface, labels and figures,
tabular and right-aligned. amended per X-06.
SHAPE radius 2px controls, 0 surfaces; no gradient, no
shadow, no blur; motion only in answer to action,
and none when the device says so.
Site pages consume the layer by inlining it per page, the sanctioned emission; pages may instead link commons.css where they already do. Series documents drafted in the viewer inline it verbatim, per §1. Amended by decision record: SUB-02 escalation card, adopted by Todd Youngblood, 2026-07-20. Shared scripts are a distinct emission: one dependency-free file the page remains readable without, per the precedent of assets/error-boundary.js (X-01) and the shell at assets/shell.js (U-01, its card staged 2026-07-24); each carries only its own styles and never the page's token layer. The stylesheet opens with a version header naming this document as its governor, and it changes only the way this document changes: a Tier C review under BP v1 §6, since the layer is a series artifact, with token changes recorded as decisions.
Migration from v3 is packet work: each commons page that still links the old stylesheet becomes one packet, citing this artifact, converting sweep assignment to data-tint, and passing the §8 audit before merge. The v3 stylesheet and reference remain in the record as history, superseded and cited, never deleted.
The layer exists so that taste is spent once. Name the pattern, cite its address, and let every surface inherit the decision instead of relitigating it. When a needed pattern has no name, that is not a license to improvise; it is a packet to extend this inventory.