Working reference for the Techne design system, updated to the v4 palette. Blue is the primary accent, the color of what a reader does; ember is the secondary, the cooperative's own mark on structure. Both are held against a warm parchment ground through dark and light modes, with a sunset range reserved for section atmosphere and data. Toggle modes with the control in the top-right; it follows your device setting by default.
The ground is a warm ramp in dark mode: ink and void, a warm near-black, so a heading reads quietly against it. Every component references a token, and the active mode resolves its value. Values below are the dark-mode resolutions.
The change from the previous reference is here: copper is no longer the single accent. It is retained as ember, the secondary, while blue is raised to primary. Blue carries interaction, ember carries structure, and the two are meant to be read together rather than either standing alone.
Light is parchment and cream, paper warmed slightly so the serif reads quietly. Token names are shared with the dark palette; only the resolved values differ. Both accents are deepened for contrast on paper.
The previous reference carried seven status hues. The v4 palette narrows this to three earth states for condition and adds a sunset range for data, on the argument that fewer colors, each paired with a word, read more reliably than a wide status wheel.
Green for what is operational or ratified, blue for what is in review or simulated, red for what is pending or wants attention. They appear only on instruments, never tint a panel or a heading, and each is always paired with a word and a square mark, so no condition is carried by color alone.
A six-stop sweep from twilight to last light, ordered by luminance so a sequential scale degrades to grayscale and reads for colorblind viewers. As atmosphere it can tint section structure; as encoding the warm five stops form a magnitude scale. It never colors a control and never carries the sign of a number.
Every public surface carries one primary navigation: a sticky 48px topbar holding the wordmark, the public map (Participation, The commons, Legal, Intranet), and the mode toggle. The bar is injected by /assets/topbar.js from a single manifest, so its contents and size cannot drift page to page; the per-page inline topbars it supersedes are retired. Its geometry mirrors the shell topbar below, so crossing between the public face and a signed-in surface the frame reads as one element. Added per the U-13 packet, 2026-08-07.
<!-- in <head>, after the mode boot --> <script src="/assets/topbar.js" defer></script>
Self-contained: the bar carries its own --tc-* tokens resolved from data-mode with the values on this page, so it renders identically over any page token vocabulary, old or new. The section holding the reader marks with aria-current. The bar hides in print and holds across page loads by cross-document view transitions, honoring prefers-reduced-motion. The mode toggle writes localStorage('techne-mode') and sets data-mode on the document, falling back to the device scheme on first visit. A public page loads topbar.js; a signed-in surface loads shell.js; no page loads both, and no page carries an inline topbar of its own. The validator enforces the rule: every page names exactly one of the two.
The instrument layer under the v4 palette. Controls take a 2px radius and a single-pixel border; primary action reads blue, secondary reads ember, and neither fills a panel.
Where the earlier palette gave rejected and pending separate hues, v4 collapses both to red and lets the word carry the distinction. Roles such as steward and patron member take the ember mark, since a role is structure rather than condition. Role names follow the CIS v0.3 information model: patron_member, director, steward, applicant.
Materialized view of all cooperative accounts, capital, CLOUD credits, labor, and voting power.
Every page on techne.coop carries a standard head block: charset, viewport, color-scheme, title, description, Open Graph, and canonical. The favicon is the cooperative grid mark -- an ember-ground 2×2 quad, no letter, no tau.
<!-- 1. Core --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="color-scheme" content="dark light"> <!-- 2. SEO --> <title>Page Name · Techne</title> <meta name="description" content="One or two sentences. 120–160 characters. Plain language, no keyword stuffing."> <link rel="canonical" href="https://techne.coop/page/"> <!-- 3. Open Graph --> <meta property="og:type" content="website"> <meta property="og:url" content="https://techne.coop/page/"> <meta property="og:title" content="Page Name · Techne"> <meta property="og:description" content="Same as meta description or a tighter social pull-quote."> <meta property="og:site_name" content="Techne"> <meta property="og:image" content="https://techne.coop/assets/og-default.png"> <!-- 4. Favicon --> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="alternate icon" type="image/png" href="/favicon.png" sizes="32x32"> <!-- 5. Mode flash prevention (inline, 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>
120–160 characters. Active voice. No "welcome to" opener. Lead with what the page holds rather than what the organization does. Every page on the same domain must have a distinct description. The homepage description names the cooperative and the August 14 milestone; section descriptions name what a reader finds on arrival.
The favicon is a 32×32 SVG: ember-ground square, 2×2 grid of cream marks, bottom-right mark at 38% opacity to suggest work-in-progress. No letter, no tau. The mark is at /favicon.svg in the repo root. All pages link it from root regardless of depth using the absolute path /favicon.svg.
<!-- /favicon.svg -- the canonical source -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="3" fill="#C4956A"/>
<rect x="7" y="7" width="8" height="8" rx="1" fill="#F7F5F0" opacity="0.88"/>
<rect x="17" y="7" width="8" height="8" rx="1" fill="#F7F5F0" opacity="0.88"/>
<rect x="7" y="17" width="8" height="8" rx="1" fill="#F7F5F0" opacity="0.88"/>
<rect x="17" y="17" width="8" height="8" rx="1" fill="#F7F5F0" opacity="0.38"/>
</svg>
The default OG image (/assets/og-default.png) is 1200×630px, dark-mode background (#0F0F12), Techne wordmark in ember-text center, subtitle in muted mono. Pages may supply a custom og:image but must not omit the tag; fall back to the default if no page-specific image exists.
Libre Baskerville carries the document voice and IBM Plex Mono carries the interface layer, labels, hashes, and the status bar: two faces, amended by decision record (X-06 escalation card, adopted by Todd Youngblood, 2026-07-20). Re-emitted per U-12: Inter is retired from this page, from commons.css, and from the specimens below; the third face loads nowhere the system governs. Formation-era commons documents that inlined it stand until each page's own re-emission.
The token set resolved in dark mode. Light-mode values are listed in the light palette above; the names are the contract, and a component should never reach past a token to a literal hex.
| token | value | usage |
|---|---|---|
| --bg | #0F0F12 | page ground |
| --inset | #08080A | app background, wells |
| --surface | #16161B | cards, panels |
| --raised | #232329 | elevated surfaces, table headers |
| --line | #2A2A30 | hairline divider |
| --rule | #3A3A42 | heavier scope rule |
| --blue | #6A8AC4 | primary · links, primary action, focus |
| --ember | #C4956A | secondary · section marks, provenance edge |
| --heading | #E8E4DF | display headings, titles |
| --text | #CFCBC4 | body copy |
| --muted | #8A857E | secondary, nav text |
| --ok | #6A9A6A | operational, verified, live |
| --info | #6A8AC4 | in review, informational, completed |
| --warn | #C46A6A | pending, rejected, attention |
Icons are drawn from the Lucide set and inlined as SVG markup: no emoji, no icon font, no runtime library, no external request. The glyph is copied from Lucide into the page, normalized to a 24 viewBox, 1.5px stroke, round caps and joins, color inherited from currentColor. Amended per the U-08 packet, 2026-08-07: Lucide replaces the hand-drawn set below as the source of new icons; existing glyphs stand until each surface's re-emission.
<!-- a Lucide icon, inlined; decorative beside its word --> <svg class="lucide" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="..."/> </svg>
Rules. An icon is decorative beside a word, never a meaning alone: aria-hidden="true" on every inline icon, and the adjacent text carries the sense. Sizing through svg.lucide (16px inline, .lg 22px, .ico-well for card wells) in commons.css. Choose the plainest glyph that names the thing; one icon per concept, reused everywhere the concept appears.
The grid above is the formation-era hand-drawn set, retained for the record. The earlier note pointing to HUDLayout.jsx described a component that never landed and is retired with the U-08 amendment: an icon is now Lucide markup inlined where it stands, styled by svg.lucide in commons.css.
Two instruments of gated complexity, added per U-08. A term hint gives a weighted word its definition where it stands; a disclosure holds depth behind a one-line summary, closed by default. Together they carry the cooperative principle of education, training, and information into the surface itself: the page teaches at the moment of contact, and the depth waits until asked for.
A dotted-underline button inside prose. Hover or keyboard focus shows the definition card through CSS alone; /assets/hints.js adds tap-to-open, Escape, outside-tap close, and aria-expanded, so touch readers get the same definition. The card ends with a path deeper, usually the Lexicon. Never a title attribute: those reach neither touch nor keyboard.
<span class="term"> <button type="button" aria-expanded="false">patronage</button> <span class="term-card" role="note"><b>Patronage</b> is participation the record counts... <a href="/commons/build/lexicon/">Lexicon</a></span> </span>
Native details.disclose with a mono summary line and a plus mark that becomes a minus when open. Promoted from the treasury statements view, where a month's statement sits closed behind its headline figures. Use it wherever a newcomer needs the sentence and a member may want the paragraphs.
<details class="disclose"> <summary>How patronage becomes ownership <span class="sum-note">the pathway</span></summary> <div class="disclose-body">...</div> </details>
The class-of-participation card, added per U-08: how a newcomer meets the four classes of the Participation Framework and chooses a track. The card carries the track banner, the class number and name, the cost, the rights (a mark beside every line, the word carrying the meaning), the admission path, and one action. Cards render on public surfaces from the ratified framework at /legal/participation/, which remains the instrument; the card cites, never restates beyond it.
Anatomy (commons.css): .pgrid a responsive comparison grid · .pcard the card, top-ruled in its track's tint via data-tint · .p-track, .p-class, .p-name, .p-price · rights as li.yes (Lucide check, ok green) and li.no (Lucide minus, muted; the sentence states the absence) · .p-admit the admission line · .p-act the action. The member curve, the path through the classes over time, renders as .curve steps: when, what, one sentence.
The v4 form and the three honest states, added per U-08. Every form is a real <form> whose submit is the form's own event; every label is bound to its control with for; every hint sits under its field; the status line carries aria-live="polite" so a screen reader hears what a sighted member sees.
Form anatomy: .field > label (mono, uppercase, .req mark) + control (serif, 2px radius, blue focus border) + .field-hint (mono, muted, never --faint) · .form-status with .ok / .err, present in the DOM from first paint so the live region exists before the first message.
States: loading is .skel, a quiet shimmer that respects reduced motion, never a spinner; absence is .absence, a sentence naming why the thing is not here and what it waits on, after the Share door's practice; a member's first visit to a surface may show one .first-run orientation card, dismissable, its dismissal kept on the device, never shown again.
No emoji. Emoji are not permitted anywhere on techne.coop, in body copy, headings, navigation, badges, avatars, status indicators, or interactive controls. This is an absolute rule with no exceptions.
Use typographic and geometric Unicode instead: arrows (→ ← ↑ ↓), geometric shapes (◈ ⬡ ⊗ △ ◇), mathematical operators (× ±), dashes, and ellipses (…). These carry semantic weight without decorative distraction and render consistently across environments.
techne.coop is a professional coordination surface. Emoji carry platform-specific rendering, undefined semantic meaning, and decorative noise inconsistent with the studio's precision. Typography and geometry are the visual language here. This reference follows the rule it states: the forbidden categories are named in words rather than rendered.