Palette & Component Reference

Core Palette

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 Mode Palette · Complementary

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.

State & Sunset

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.

A six-stop sweep from indigo to first gold, the sunset range's sibling for surfaces that face forward rather than back: openings, first light, the start of a cycle. Like the sunset range it is ordered by luminance, so a sequential scale degrades to grayscale and reads for colorblind viewers. Same rules: atmosphere and data only, never a control, never the sign of a number. Entered with the Philosoraptor Summit live snapshot (/philosoraptor/1/evening/live/), 2026-08-16, where it carries the closing figure's sky.

Canonical stops: --dawn-indigo #4A5A8A · --dawn-slate #6B7FB0 · --dawn-lilac #9B8BB8 · --dawn-rose #C99AA6 · --dawn-shell #E0BFA4 · --dawn-gold #F0D49A. Mode-invariant, defined in :root alongside the sunset stops. Read together the two ranges bracket the day: sunset for the record of what happened, dawn for what is beginning.

v5 · The Desert Register

v5 changes no token value. It writes down how the sunset range is used, because the front page had begun to use it well and nothing said what well meant. The register is Southwestern desert held to a minimalist discipline: horizon lines, mesa geometry carried by gradients, sand-warm neutrals the ground already has. Never pictorial. No cactus, no pottery, no glyph of a landscape: the desert enters as light and line or it does not enter.

The register's one instrument. A rule is not a bar edge to edge; it is a hairline that holds at its center and fades at both ends, the way a mesa rim loses its edge against the sky. Three placements are in force on the front page: the accent rule under a section eyebrow, two pixels in the section's own stop, fading at both ends; the section horizon, one pixel at the top of every tinted section, its stop at half strength, fading toward the margins; and the sweep horizon, the full six-stop range as one hairline, at the hero's foot and mirrored at the footer's head. The page opens on the whole evening, walks it stop by stop, and closes on it.

/* accent rule: solid at center, gone at the ends */
background: linear-gradient(90deg, transparent,
  var(--section-tint) 24%, var(--section-tint) 76%, transparent);

/* section horizon: the stop at half strength, fading out */
background: linear-gradient(90deg, transparent 4%,
  color-mix(in srgb, var(--section-tint) 50%, transparent) 50%,
  transparent 96%);

A page that tints its sections walks the sweep in order, warm to cool, gold first and violet or blue last: the sun going down as the reader goes down. Sections take their stop with data-tint, and the stop resolves to the mode's text-safe variant (--sun-*-t) wherever it colors type. One stop per section; a section does not borrow its neighbor's color.

A tinted band section may carry its stop mixed into the ground at four percent or less: color-mix(in srgb, var(--inset) 96%, var(--section-tint)). Below notice, sand-warm, and honest in both modes because it is mixed from tokens rather than pinned to a hex. Atmosphere stops there: the sunset range still never colors a control, never carries the sign of a number, and never tints body copy.

Register. The estate held two measures, the document grammar at 760–920px and the frame measure capped at 70rem, and the front page carried a third, a 1140px container with viewport-fraction gutters, that nothing else used. v5 folds the display surface onto the frame cap: max-width: 70rem, gutters at clamp(var(--s5), 5vw, var(--s7)) so they move through the spacing tokens rather than as a raw fraction of the window. A display page keeps its own interior prose measures in ch, as the front page does at 58ch for a lede. Two caps, not three; the front page reconciled per the U-24 packet, 2026-08-18.

The register informs future pages softly. It is the grammar a new public display surface should reach for first, and the reading against which a review asks why not; it is not a retroactive requirement, and no existing page is out of compliance for lacking a horizon line. Pages adopt the register at their own re-emission, the same way the estate has always moved: existing surfaces stand until each one's own recut.

Proposal · Two Named Sunset Palettes

A proposal staged with the U-24 packet: two complete sunset palettes as distinct artistic directions, either able to stand where the standing range stands. Neither is in force anywhere. Adoption is a steward's decision, and until it comes the v4 sunset range above remains the only range a page may use.

The last hour over red rock: iron and vermilion out of the cliff face, ember and amber in the air, gold at the rim, and one bruised violet where the shadow already is. Warmer and deeper than the standing range, which reads as sky; this one reads as stone holding the day's heat.

The high desert after the color leaves the sky: cold night blue, slate, one green the landscape actually holds — juniper on the far slope — then lilac gray, shell, and the pale gold of the afterglow. Cooler and quieter than the standing range; it reads as air, altitude, and the first cold hour.

Every text-safe (-t) value above was checked as WCAG 2.1 relative-luminance contrast against all three grounds of its mode (--bg, --inset, --surface), by script, 2026-08-18. All twenty-four pass AA for body text: the worst pair on the board is Vermilion Hour's light-mode --verm-ember-t at 4.92:1 against --inset, above the 4.5:1 floor. Both canonical ramps are ordered by luminance, so a sequential scale degrades to grayscale and reads for colorblind viewers, the same discipline the standing range keeps. Canonical stops are for atmosphere and data; only a -t value may color type.

If a palette is ever adopted as a choice rather than a replacement, the seam mirrors the mode toggle exactly. A key techne-palette in localStorage, values vermilion or juniper, unset meaning the standing range; a boot script beside the mode script sets data-palette on the document before first paint, and CSS remaps the six --sun-* and six --sun-*-t custom properties under html[data-palette="..."], so every page written against the token names inherits the choice with no markup change. The alternative seam is the clock: resolve the palette from the local hour, Juniper Twilight through the night and toward dawn, Vermilion Hour through the evening, the standing range through the day, with the stored key always winning over the clock. Either seam is one script and one attribute; neither adds a dependency. Building one is a separate piece with its own address, and naming a palette in public is the steward's call, not this page's.

v6 Addendum · The Incised Register

An addendum staged with the U-25 packet, extending the desert register of v5, and deepened by the U-26 packet where the steward found the system still too restrained in how often the palette appears and how it composes within pages, sections, and cards. The addendum adds three instruments, all drafted: the glyph, a single incised mark a page may carry as its device; the sky that computes, which lets Boulder's own solar time set the sweep's emphasis; and the colophon, the designed ending by which a page signs itself. U-26 grows the glyph set from five marks to ten, each named from the formation lexicon, and writes down the deepened color grammar: the wash raised to where it reads, the seam, the watermark, and cards that carry their section's stop. Ancient forms, current means: the petroglyph, the sundial, and the scribe's colophon, each rebuilt as a few strokes, a small script, or a few lines of markup. The v5 rule holds underneath: never pictorial, never kitsch, and no instrument here colors a control or carries a claim.

Ten marks, drawn by hand as single-stroke SVG: 1.5px stroke, round caps, no fills, incised rather than illustrated, the way a mark is pecked into rock rather than painted on it. A page carries one glyph as its device, in the masthead and again in the colophon, stroked in --ember or the page's own stop; a section whose meaning has earned a mark may carry it small above its eyebrow, in the section's stop. A glyph is always aria-hidden, decorative beside the words that carry the meaning. One glyph, one meaning, reused only where the meaning recurs. The five marks added with the U-26 packet each name an entry in the formation lexicon; the sources are recorded in the table below the set.

The v5 pictorial rule bends here by exactly one degree and no further: a glyph is a mark, not a picture. It has one weight, no fill, no scene, and no second color. If a proposed glyph needs shading, perspective, or a caption to read, it is an illustration and does not enter the set. Three of the ten sit unassigned: a device is earned by a page, not stocked in advance, and a mark waits in this table until a surface earns it.

A glyph enters the set only by naming something the record already holds. Each mark below cites its entry in the Commonplace, the formation lexicon, or the launch record; a mark with no source is decoration and does not enter.

The v5 sweep is static: the whole evening, always. The addendum lets the sky over Boulder set the sweep's emphasis. /assets/sky.js resolves where the day stands over 40.015 N, 105.27 W by the compact NOAA solar approximation, entirely on the device, and writes one attribute: data-sky, valued sunrise, day, sunset, or night. The page's CSS holds the sweep in a custom property, --sky-line, with its strength in --sky-glow, and remaps both per state: the full descent at dusk, gold's hour at midday, the cool stops through the night, the mirrored climb at dawn. Every value is built from the standing --sun-* tokens; the instrument adds no color and touches nothing but atmosphere.

<!-- in <head>, after the mode boot -->
<script src="/assets/sky.js" defer></script>

/* the page holds its sweep in a property the sky may retune */
:root { --sky-line: linear-gradient(90deg, var(--sun-blue), ... var(--sun-gold)); --sky-glow: .55; }
html[data-sky="day"] { --sky-line: ...; --sky-glow: .38; }

Progressive enhancement only. Scripting off, the attribute is never written, no selector matches, and the page keeps the standing static sweep; the instrument fails toward the evening the estate already renders. If the solar arithmetic errors, the script degrades to four fixed windows on America/Denver civil time, and below that to the device clock. A sundial rebuilt as forty lines of arithmetic: it tells one truth, slowly, and nothing depends on it.

v5 let the sunset range into a page as hairlines and one four-percent wash, and the steward's reading of the result was right: refined, and too seldom. The U-26 deepening raises the register's color presence along four dimensions, on the five register surfaces (the front page and the four U-25 pages), with the same discipline underneath. Two variables carry it: --section-tint, the mode's text-safe stop, colors type; --section-stop, the canonical stop, carries atmosphere and never type.

The wash, raised. Every tinted section takes its stop in the ground, not only the band sections: page sections at five percent of the canonical stop into --bg, band sections at eight percent into --inset, so scrolling the page is walking the sunset sweep rather than glimpsing it. Cards inside a tinted section take five percent of the stop into --surface, and a link card deepens to eight on hover; a card carrying muted type does not deepen, because the deeper wash would spend that type's AA margin. The caps are not taste but arithmetic: every text token that can sit on a washed ground was checked as WCAG 2.1 contrast against every wash actually in use, in both modes, one hundred eighty pairs, by script, 2026-08-18. All pass AA for body text; the worst surviving pairs are dark-mode --muted on a gold five-percent card wash at 4.52:1 and light-mode --sun-amber-t on the eight-percent band wash at 4.59:1. Gold, whose light text variant has the least headroom, never sits on a band ground, because the descent opens every page on a page-ground section.

The seam. Under each section's horizon hairline, a shallow band of the canonical stop pools and fades, gone before the text begins: the mesa silhouette abstracted to one translucent layer, never taller than the section's own top padding, so no copy ever sits inside it. Its strength is opacity: calc(var(--sky-glow) * .6), which is the one place the computed sky now reaches past the masthead and footer sweeps: the seams breathe with the hour while the washes hold still.

The watermark. A section may carry its glyph once more, large, half-visible, clipped at the section's edge, stroked in the canonical stop at seven percent opacity on ink and ten on parchment. It sits at z-index: -1 under an isolated section and is placed at the margin, never behind a column of body text; it is composition, not information, and is always aria-hidden.

The eyebrow in the stop. Inside a tinted section the eyebrow speaks in the section's own text-safe stop rather than the global ember, so the walk down the sweep is legible in the labels as well as the grounds. Mastheads and untinted surfaces keep ember. The rest of the v5 floor is untouched: the sunset range still never colors a control, never carries the sign of a number, and body copy never changes color for atmosphere.

Manuscripts ended by naming their scribe, their place, and their season; this estate's pages have ended with a footnote. The colophon is a designed ending: the page's device small, one fading rule, the ledger address with its status mark, and one italic line of the page's making. It stands at the foot of the main column, before the footer, and it is the one place a public page wears its address: a signature, not a second navigation, per the U-13 reading. In force on the four U-25 surfaces; existing pages keep their endings until each one's own re-emission, the v5 way.

Standing. The addendum is drafted and unadopted, staged with the U-25 packet and deepened by the U-26 packet; merge is the act of adoption, and adoption makes it available, not mandatory. Like the register it extends, it informs future pages softly: no existing surface is out of compliance for lacking a glyph, a computed sky, a colophon, or the deepened color grammar.

Site Navigation · The Topbar

Every public surface carries one primary navigation: a sticky 48px topbar holding the wordmark, the public map (Participation, The commons, 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.

Register. From 2026-08-10 to 2026-08-14 the bar was withheld on every public page: topbar.js resolved the mode and built nothing, behind a single switch (OFFER_MAP) in the script. The estate was still under construction, and a map is a claim about what is finished, so the steward held the map back until the public launch. The front page's four-column footer was withheld with it, on the same date and for the same reason: it carried the estate's second navigation, in link columns, under a map already held back.

Register. Both were restored on 2026-08-14, the launch day the steward named when he set the hold. The lead above is again both the specification and the present state. The switch is kept in the script rather than deleted: it remains the one hand that takes the public map off every page at once.

Register. The map carried a fourth item, Legal, from 2026-08-07 to 2026-08-14, when the steward took it off. The bar is for the ways into the cooperative; the instruments are what a reader checks, not a destination they arrive wanting. Legal keeps two routes from the bottom of a page, and they do not cover the same ground. Fifteen of the forty-six public surfaces carry a footer that links into /legal/, among them the front page, both participation surfaces and /commons/join/: those are the four-column footer and the legal documents' own. The other thirty-one carry a document colophon, which is a signature and not a second navigation, and they reach the instruments by the formation notice, which every one of the forty-six carries and which points at /legal/#formation. Nothing was unlinked: fifty-five pages link into /legal/ in their prose.

CIS Navigation · The Shell

Every signed-in surface stands inside one persistent frame: a sticky topbar carrying the wordmark, the member chip, and the mode toggle; a left map carrying the complete grouped taxonomy of the intranet; and a context strip naming where the reader stands. Navigation changes only the primary view; the frame holds, carried across page loads by cross-document view transitions. The frame is injected by /assets/shell.js, the shell, which supersedes the earlier /intranet/nav.js specification: that component was specified here but never built, and the shell fulfils its intent. Amended per the U-01 packet, staged 2026-07-24.

Overview -- the member dashboard, the doors and the record live. Belong -- Agreements, Directory. Gather -- Gatherings. Find one another -- Opportunities, Programs. Treasury -- The Desk. Steward -- Admissions, shown only to steward and director roles. The record -- The Commonplace Book and the Almanac, public surfaces the frame links but does not wrap. The deployed grouping governs, adopted over the earlier five-slice draft (Belong, Gather, Find, Account, Agreements) by decision record: U-03 escalation card, adopted by Todd Youngblood, 2026-07-24. Account remains a planned card on the Overview until the counting rules open it.

The shell reads a declared manifest naming, for every section: its slice (the group above) and its tint (a stop on the sunset sweep: gold for Overview, amber for Belong, coral for Gather, rose for Find one another, violet for Treasury, ember for Steward, blue for The record). The context strip renders that identity at the head of every primary view, so the interface inherits what each section is rather than restating it per page.

Register. The strip once also carried each section's grammar and the tables it read. Both were true of the build and neither was anything a member came to read, so U-05 removed them from the manifest and the strip together, with the same cut applied to the page footers, which had carried the database project reference, packet addresses, and table lists. The rule the cut leaves behind: a member-facing surface speaks in the cooperative's language. Addresses, table names, project references, and packet marks belong to the build and live in the roadmap, the ledger, and this reference, never on a member's page. Amended per the U-05 packet, 2026-07-24, at the steward's direction.

<!-- in <head>, after the error boundary -->
<link rel="stylesheet" href="/assets/shell.css">
<script src="/assets/shell.js" defer></script>

The stylesheet is not optional and its order is not incidental. The frame's appearance, and the @view-transition opt-in with it, must be in the document before the first paint: the browser reads the opt-in at pagereveal, which precedes every deferred script. Amended per the U-18 packet, 2026-08-09.

Self-injects the frame on DOMContentLoaded and re-parents the page into the primary view. Reads the Supabase session from storage without creating a second auth client; pages keep their own data loading. The member chip carries the signed-in address and, once the record answers, the display name. The mode toggle writes localStorage('techne-mode') and sets data-mode on the document. The active section marks from window.location.pathname. The steward group appears only when the reader holds the steward or director role. window.cisUser is exposed and the cis:user event fires for page scripts that need member context. Signed in, the shell also declares the map's destinations to the browser as speculation rules at moderate eagerness, so the next surface is fetched on hover or pointerdown rather than after the click; browsers without the API ignore the declaration.

Register. This reference claimed from U-01 that cross-document view transitions held the topbar and map in place while the primary view changed. They did not. The opt-in lived in a stylesheet the shell injected on DOMContentLoaded, so it was absent when the browser read for it at pagereveal, and every transition on this estate was skipped from the first day to 2026-08-09, each skip rejecting with an AbortError the error boundary recorded as benign. U-18 moved the opt-in into shell.css, where it loads with the document, and the transitions now run and honor prefers-reduced-motion. U-19 then rendered the frame into each surface’s markup from one manifest, so the topbar and the map exist in the new document at pagereveal under their own transition names and hold still while the primary view changes; whether a reader may see the map is decided before the first paint by a synchronous gate script, failing closed.

One standard, owned by the shell (U-04): every signed-in surface presents the same card when the reader is signed out. The card carries the house label, the heading Member intranet, one sentence of instruction, a destination line read from the manifest (mark, slice, section, in the section's tint), the email field, the primary action, and a status line; after sending, the sent state with a resend affordance. The gate sends the magic link itself through the GoTrue REST seam, so no page carries a gate of its own. Signed out, the frame shows only the topbar and the gate: the map is for members. A magic-link landing, tokens in the address, renders as signing-in while the page's client completes the exchange, never as signed-out. Pages contribute nothing to authentication except loading their data once the session stands.

Layout · The Frame Measure

Every surface the shell frames uses one content measure and one alignment pattern. A new members' page adopts both and decides nothing about its own width. This section is the rule; commons.css is its emission and scripts/measure_audit.py enforces it in CI.

Register. The nine framed surfaces once carried four different content widths, 720 to 1120 and one with no cap at all, and five different alignment patterns beneath them. Nothing had gone wrong; nothing had been decided. This reference named two grammars, the reading column and the widescreen instrument, and neither fitted a members' page, so each page chose for itself on the day it shipped and the estate stopped looking like one thing. Named per the U-20 packet, 2026-08-09, at the steward's direction.

/* the container of every framed surface */
<main class="wrap-frame"> ... </main>

.wrap-frame {
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-block:  clamp(var(--s5), 3.5vw, var(--s7));
  padding-inline: clamp(var(--s4), 3vw,   var(--s6));
}

Bounded, not set. The column fills a phone edge to edge, grows with the window, and stops at a comfortable maximum on a desk; the gutters scale continuously through the spacing tokens rather than jumping at a breakpoint, so there is no width on the way at which the page looks wrong. The cap is in rem, so a reader who raises their base font size gets a proportionally wider column instead of a cramped one. Prose inside the frame keeps the layer's measure at 68ch: a column wide enough for a roster is far too wide for a sentence.

/* every list of cards on a framed surface */
<div class="frame-grid"> ... </div>
<div class="frame-grid" style="--grid-min:150px"> ... </div>

.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 300px), 100%), 1fr));
  gap: var(--s4);
  align-items: start;
}

A page sets the track minimum and nothing else. The grid reflows on the space it actually has, so it needs no media query and no container query.

A framed surface sits beside a 212px map, so the viewport is not the width the content has, and a breakpoint written against the viewport fires at the wrong moment. Agreements went to two columns at a 1100px viewport while its content column measured 1056px: a rule keyed to a number the content never sees. Prefer an intrinsic grid. Where a genuine query is unavoidable, key it to a container, never to the viewport; do not put container-type on the shell's .cis-main, because the drawers are position: fixed and containment would trap them inside the content column.

Give <main> the frame measure, put every card list in a frame-grid, and set --grid-min only if the default 300px is wrong for the content. Do not give main a max-width, do not write a viewport breakpoint that changes a column count, and do not introduce a second width. The measure audit fails the build on all three. The one exception in force is dense numeric tiles, which take --grid-min:150px; any other value is a design decision and belongs in a decision record rather than in a page.

Components

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.

SEO & Favicon

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 &middot; 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.

Typography

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.

Design Token Reference

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.

Icon System

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.

Term Hints & Disclosure

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>

Participation Cards

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 rights (a mark beside every line, the word carrying the meaning), the cost, the admission path, and one action. Cards render on public surfaces; the Participation Framework itself is drafted, unadopted, and not published, and the card cites it, never restating beyond it. Where the card is used to describe standing rather than to sell, the cost goes in .p-cost, below the rights, rather than in the .p-price head slot: price above the rights, repeated down a column of cards, reads as a column of rungs, and standing here does not follow price (P-09).

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, and either .p-price or .p-cost · 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.

Forms & States

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.

Content Standards

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.

For Agents · The System as Directions

This page is written for a person. An agent writing a page against it read it as prose and applied what it happened to retain, and the estate showed the result: most pages carried an incomplete head block, a third of them linked no favicon, and a formation-era typeface survived on sixteen. The same system, rewritten as directions, is at /design-system/AGENT-DIRECTIONS.md: the grammar to choose, the head block in order, the token layer to copy verbatim, the skeleton per grammar, every component by its class name, the rules for color, type, content, and accessibility, and the battery to run before a pull request. It adds no rule; every line cites this page or the token layer.

Values live in commons/ui/commons.css: every hex, size, spacing step, and face. A page inlines that layer verbatim and scripts/token_audit.py refuses a copy that differs. Usage lives here: what blue is for, where the sunset range may appear, how a head block is built. The directions cite both and decide neither; where they disagree with either, the source wins and the directions are the defect.

scripts/design_audit.py reads every tracked page against the directions and writes /design-system/AUDIT.md, named by the commit it ran against. Each finding is sorted: mechanical, which the script's fix mode applies (a missing favicon, canonical, Open Graph block, color-scheme meta, or mode boot); judgment, which waits on a person (a missing description, a third typeface, an rgba() literal, a container none of the grammars name); and observed, a convention read off the token layer rather than a rule this page states, reported and never counted. A type scale was drafted at v6 and reverted, so the script does not pretend one exists.