A standalone reference for the visual artifacts of a cooperative: the documents it writes to govern itself, and the instruments it builds to watch itself. The palette is borrowed from techne.institute and extended, with blue raised to the primary accent, ember held as the warm secondary, and a sunset range added for data.
A reference specification holding the tokens, type, rules, components, layout, and voice that make a cooperative's artifacts recognizably its own, together with the key instruments those artifacts compose into and the instructions an agent needs to produce them. It unites in one place the document grammar, in which governance texts are written, and the instrument grammar, in which operational surfaces are built.
The palette has a lineage worth stating, because identity here rests on referents rather than reactions. The neutral ground, the warm accent, and the earth state colors are borrowed from the published tokens of techne.institute, the learning institute that shares this cooperative's building. From that palette, blue, which there is an informational color, is extended into the primary accent, and a sunset range is added for the one job the borrowed palette could not do: encoding magnitude and category in data. Sections carry the section sign because governance documents cite one another, and an address here can be cited from anywhere in the commons.
Six commitments hold the rest in place. Each is a constraint, and the constraints are what keep an agent-built surface recognizable rather than generic.
A warm-neutral ground carries the hierarchy. Parchment and ink, not a tinted field. Weight, value, and rule do the work of organizing a page before any color is spent, so the ground stays quiet and the eye finds structure without being told where to look in color.
Two accents, complementary, each with a domain. Blue is the primary, the reader's color: links, the primary action, focus, the current selection. Ember is the secondary, the cooperative's color: the citation mark, the stub rule, the section address, the secondary action. Cool for moving, warm for authority. The division lets both be used without either becoming a wash.
A sunset range, woven through the writing and the data. A twilight-to-sunset sweep, blue through gold, that runs down the document as an atmosphere, tinting each section's address, spine, and subhead rules so the page passes through a sky as it is read, and that also does the work of telling magnitude and category apart in charts. It still never colors a control, never enters an action, and never carries the sign of a number: what it colors is the structure a reader moves through and the data a reader weighs, not the buttons a reader presses.
State is earth-muted, and never color alone. Operational, in review, and pending are shown in green, blue, and red, only on instruments, always paired with a word and a square mark, so no condition depends on a reader telling two hues apart.
Flat, and still. Surfaces meet at rules; depth is an edge and a value, not a shadow. The radius is 2px on controls and zero on surfaces. Motion happens only in answer to the reader, never on its own.
Every choice names its reason. A form that cannot say why it is the way it is, here or in the section that introduces it, is a default, and a default is someone else's decision. When a stranger can name these choices as defaults, the document is due for revision.
The whole palette is warm-neutral ground, two accents, three states, and a sunset sweep. It is rationed on purpose: most of any surface is the ramp, and color appears where it carries meaning.
The ground is a warm ramp in two modes, borrowed from techne.institute. Light is parchment and cream, paper warmed slightly so the serif reads quietly. Dark is ink and void, a warm near-black. Both modes share token names; components reference var(--token) and the active mode resolves the value.
The primary accent is blue, extended from the periwinkle techne.institute uses for its informational state into the system's main interactive color. It is the cool of the same sky the warm ground sits under. Blue carries what the reader does: link text, the primary action on a surface, keyboard focus, and the current selection. It splits into two tokens because a hue that decorates cannot also be read against the ground: --blue for edges and marks, --blue-text for type, deepened in light mode to hold on paper. Blue also serves as the in review state, since the informational register and the interactive register are the same cool family; the state chip carries a word and a dot, so the two uses never confuse. And blue anchors the cool end of the sunset sweep below, a twilight just deeper than this accent, so the primary color and the document's dusk are recognizably one family.
The secondary accent is ember, the warm sandstone tan of the borrowed palette, where it is named both ember and copper. It is the cooperative's own mark, and it carries authority rather than interaction: the section address, the stub rule, the provenance chip's edge, and the secondary action. Held warm against the cool blue, it is the counterpoint that keeps the system from reading as a single-color interface, and like blue it is darkened in light mode for contrast on parchment.
Three state colors express condition, and the rule that governs them matters more than the colors: 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, as chips and threshold markers, and never tint a panel, color a heading, or enter a document. Each is always paired with a word and a square mark, so no condition is ever carried by color alone. There is deliberately no second green for a dashboard and the red is muted toward brick rather than alarm.
One range is added that the borrowed palette did not have. Sunset is a six-stop sweep from twilight to last light, blue, violet, rose, coral, amber, gold, where the blue is a deeper sibling of the primary accent, so the sweep closes the loop back to the system's own color. It has two jobs and two orderings. As an atmosphere it runs through the written structure: each section is given a point on the sweep, warm at the top of the document and cooling to twilight at the foot, and that color tints the section's address, the spine beside its heading, and the rules under its subheads, so a reader passes through a sky as they read. As an encoding it serves data, where the warm five stops, ordered by luminance, make a sequential scale that still descends in lightness, surviving grayscale and reading for colorblind viewers, with the magnitude-to-color mapping flipping by mode so the high end always holds contrast. The data treatment is in §8.
sunset now runs through structure and data both; it still never colors a control or carries the sign of a number
Two families, no third. Libre Baskerville, a transitional serif, carries everything a person reads as prose: headings, body, the names of things. IBM Plex Mono carries everything machine-adjacent: labels, figures, addresses, code, and the whole instrument layer, where tabular numerals keep columns honest. The serif speaks, the mono measures, and the contrast between them does the work a second accent color would otherwise be asked to do.
The scale is small and deliberate: 11px mono labels, 16px serif body, headings stepping to 25 and 38px, figures at 22 to 28px on instruments. Line length on prose is capped near 68 characters so the eye returns cleanly.
A rule is a line with a job, and the system keeps exactly four so that a line always means something. Reusing one line for four purposes would make the heaviest tool in the kit say nothing.
--line · the ordinary divider, between rows and fields--rule · a heavier line that opens a section or a register--ember, 2px, short · marks a citable address in the marginAddresses use the section sign, tinted with the section's place in the sunset sweep, so a reader sees at a glance how far through the document a citation points; the stub rule in the margin stays ember, the cooperative's own citation mark. Any heading can be linked and cited the way a bylaw cites a clause, which is what makes the specification usable as governance rather than decoration.
The system writes in two layouts, and naming them keeps each honest. The document grammar is for things that are read: a single measured column, stub-and-column structure, generous vertical rhythm, prose that breathes. The instrument grammar is for things that are watched: widescreen, dense, no-scroll where it can manage it, panels on a grid, figures packed at the tight end of the spacing scale. The same tokens serve both; only the density and the width change. A surface that needs document spacing between its parts is really a document, and one that needs to be scanned at a glance is really an instrument, and building each as what it is prevents the muddled middle that reads as neither.
The pieces a governance text is built from. They are quiet by construction, and the two accents appear exactly where they carry meaning: ember on the address and the citation, blue on the action the reader takes.
The document's list is a register, not a card grid: numbered rows under a scope rule, each addressable by its number in ember.
A settled principle is set apart and closed with the double rule, so the eye knows nothing revises it below.
A condiment, not a wash. Two accents, each kept to its own place, do more than a panel of color, and the warm ramp carries the hierarchy on its own.
A claim that rests on authority carries its citation in a mono chip with an ember left edge. Controls state what they do and keep the name through the whole flow; the primary action takes the blue border, a secondary action takes the ember border, and keyboard focus is a 2px blue outline, because focus belongs to the reader.
The key pieces of the instrument grammar, the surfaces a cooperative builds to watch itself. This is the load-bearing subset of the fuller catalog: the panel that contains, the tile that reads a number, the table that holds the books, and the small charts that show shape. All inherit the tokens above unchanged; figures are monochrome and sign is the accountant's parenthesis, never a color.
The panel is the universal container: a header, an optional toolbar, a body, an optional footer, meeting the page at rules with no shadow. A card is a panel without a toolbar. The tile is the atom of the instrument layer, read three ways.
stat, delta, and threshold · the delta's outflow is a parenthesis, not a red; the threshold's target is a tick, not a color change
The accounting discipline made interactive: mono numerals, right-aligned, parentheses for negatives, a sticky header, and the double rule closing the total.
| account | status | period | ytd |
|---|---|---|---|
| Membership dues | posted | 4,200.00 | 21,000.00 |
| Program revenue | posted | 12,750.00 | 38,250.00 |
| Grants | pledged | 8,000.00 | 8,000.00 |
| Space operations | accrued | (6,180.00) | (30,900.00) |
| Net activity | 10,770.00 | 28,350.00 |
Shape where the trend matters more than the values. A sparkline for a single line, a bar-gauge for parts of a whole, a bullet for a measure against a target, all monochrome, the accent reserved for the live point.
The sunset range earns its place in one layer only: the encoding of data. The interface stays two-accent and quiet; the charts are where a controlled amount of color does real work, telling magnitudes apart and telling categories apart.
For a single quantity that varies, the range is used as a sequential scale, low to high. Because the range is ordered by luminance, the scale is luminance-honest: it still descends in lightness, so it survives a grayscale print and reads for a colorblind viewer. One rule makes it work in both modes: the magnitude-to-color assignment flips by mode, so the high end is always the end that holds contrast against the ground, violet glowing up to gold on the dark ink, gold deepening down to violet on the light parchment.
For a few distinct categories, well-separated stops from the range stand in for the parts, with a direct legend rather than a color key the reader must memorize. Three or four categories is the ceiling; past that, the honest move is small multiples, not more hues.
The instrument catalog encodes magnitude in a single monochrome ramp, on the argument that hue invents an order the data lacks and fails colorblind readers. A sunset scale does add hue to magnitude, the thing that principle avoided, and this system now spends sunset more widely still, letting it color the written structure as atmosphere. Two guards keep that defensible: the scale stays luminance-ordered, so it degrades to grayscale, and sunset is held off every control and every number's sign, so it colors the path through the document, never the decisions made along it. This is a deliberate loosening of an earlier restraint, recorded here so it can be weighed rather than assumed.
Contrast is verified in both modes, not assumed. Body text exceeds AAA on both grounds; the blue and ember readable tokens hold AA for links and labels; the three state colors hold AA at chip sizes; and the blue and ember edges clear the contrast floor for borders and focus rings.
No condition is signaled by color alone: every state chip pairs its color with a word and a square mark, and every figure shows its sign in a parenthesis, never a hue. Links are underlined so affordance survives grayscale and color blindness. Keyboard focus is a visible 2px blue outline wherever it lands. The sunset range is ordered by luminance precisely so that a sequential scale degrades gracefully to grayscale and remains legible to colorblind viewers. color-scheme is declared so native controls render correctly in both modes, and prefers-reduced-motion is honored everywhere. Where distinctiveness and accessibility conflict, distinctiveness loses.
An agent producing a surface in this system works inside these constraints, and runs the audit against the rendered page before publishing. The constraints are negative on purpose: they are what hold the line when generation drifts toward the generic.
GROUND warm-neutral tokens only; never a tinted field.
ACCENTS blue is PRIMARY (links, primary action, focus,
selection). ember is SECONDARY (section marks,
stub rule, provenance edge, secondary action).
edges and marks only; never fill a panel or a box.
SUNSET six-stop sweep, blue..gold. ATMOSPHERE: each
section is tinted by its place in the sweep, on its
address, its heading spine, and its subhead rules.
DATA: the warm five as a luminance-ordered scale,
the mapping flipping by mode. never on a control,
never the sign of a number.
STATE green / blue / red, instruments only, always with
a word and a square mark; never color alone. sign
of a number is the parenthesis, never a color.
SHAPE radius 2px on controls, 0 on surfaces; no gradient,
no blur, no shadow; motion only in answer to action.
TYPE Libre Baskerville for prose; IBM Plex Mono for
labels, figures, addresses, code, and instruments.
This system is deliberately scoped, and naming what it leaves out is the same discipline that holds the rest. It is tuned for dense operational and financial surfaces and measured governance documents, on pointer-and-keyboard screens, in a Latin script. It underserves touch-first and small-screen use, data visualization beyond the basic and sunset vocabularies, geographic and real-time views, and the first-run experience, each of which would need a deliberate extension that can state its own reason here.
Identity rests on referents, and the referents are now a small constellation: the warm parchment and ink of the institute next door, the cool blue of its informational color raised to the primary, the ember of its warm accent held as the secondary, and a sunset range named for the sky the same ground sits under. The revision trigger is explicit: when a stranger can name these choices as someone else's defaults, the document is due for a new version, and until then a change requires a reason that can be written down here. Two positions are worth keeping in view as that conversation continues: the refusal to carry the sign of a number in color, which departs from common dashboard practice, and the decision to let the sunset range run through the written structure as atmosphere as well as through the charts as encoding, which is now where this system spends color most freely, a deliberate loosening of its earlier restraint that should be revisited the moment the page reads as decorated rather than structured.
How v4 is applied across every page of this repository. The protocol defines the canonical page shell, the sitemap and page types, the navigation convention, and the color system mapping from v4 tokens to domain-specific usage in Daybook and Common Work. Every new page in this repo conforms to this section before publishing.
All published paths, their page type, their sunset-sweep position, and their v4 conformance status.
| Path | Title | Type | Sweep position | Status |
|---|---|---|---|---|
/ |
Landing | Document | Gold | partial |
/design-system/ |
Design System v4 | Reference | Full sweep | canonical |
/architecture/ |
Unified Architecture | Specification | Gold → Blue | partial |
/common-work/ |
Common Work | Interactive instrument | Amber / Coral | partial |
/daybook/ |
The Daybook — Full Spec | Specification | Blue / Violet | partial |
/daybook/two-layers/ |
Settled & Ripening | Interactive artifact | Blue | partial |
/daybook/onboarding/ |
A Guided Introduction | Interactive artifact | Gold → Blue | partial |
Partial: uses v4 color palette and type families but may use non-canonical token names. Canonical: this page. Target: all pages migrate to canonical token names.
Three kinds of surface, with different layout grammars:
.mast masthead, .sec sections with citable .addr addresses, the scope-rule register, and the memo component. The landing page and the architecture spec are documents.Every page in this repo begins with this shell. Copy verbatim; fill in the bracketed fields; add page-type-specific styles after the closing token block comment.
<!DOCTYPE html>
<html lang="en" data-mode="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark light">
<meta name="description" content="[page description]">
<title>[Page Title] · Techne Co-op</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ── V4 TOKENS — copy from /design-system/ §DS.tokens ── */
:root {
--serif:"Libre Baskerville",Georgia,serif;
--mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
--s1:4px; --s2:8px; --s3:12px; --s4:16px;
--s5:24px; --s6:32px; --s7:48px; --s8:64px;
--dur:.4s; --micro:.16s; --ease:cubic-bezier(.4,0,.2,1);
--sun-gold:#EAB668; --sun-amber:#E09A52;
--sun-coral:#D1755A; --sun-rose:#B45C7C;
--sun-violet:#6E5494; --sun-blue:#5476B8;
}
html[data-mode="dark"] {
--bg:#0F0F12; --inset:#08080A; --surface:#16161B; --raised:#232329;
--line:#2A2A30; --rule:#3A3A42;
--heading:#E8E4DF; --text:#CFCBC4; --muted:#8A857E; --faint:#5A554F;
--blue:#6A8AC4; --blue-text:#97B5E8;
--ember:#C4956A; --ember-text:#D4A57A;
--ok:#6A9A6A; --info:#6A8AC4; --warn:#C46A6A;
}
html[data-mode="light"] {
--bg:#F7F5F0; --inset:#EBE7DF; --surface:#FCFBF8; --raised:#FEFDFB;
--line:#D8D3C8; --rule:#9A958A;
--heading:#1A1A1F; --text:#2E2C28; --muted:#646058; --faint:#A39E92;
--blue:#4A6FB0; --blue-text:#39588F;
--ember:#8A6A4A; --ember-text:#6F5436;
--ok:#4A7A4A; --info:#4A6FB0; --warn:#A84F4C;
}
/* ── PAGE-SPECIFIC STYLES BELOW ── */
</style>
</head>
<body>
<button id="modeBtn" class="toggle" aria-label="Switch color mode">light</button>
<!-- page content -->
<script>
(function(){
var root=document.documentElement,btn=document.getElementById('modeBtn'),stored=null;
try{stored=localStorage.getItem('commons-mode');}catch(e){}
var m=stored||(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');
root.setAttribute('data-mode',m);
btn.textContent=m==='dark'?'light':'dark';
btn.addEventListener('click',function(){
var next=root.getAttribute('data-mode')==='dark'?'light':'dark';
root.setAttribute('data-mode',next);
btn.textContent=next==='dark'?'light':'dark';
try{localStorage.setItem('commons-mode',next);}catch(e){}
});
})();
</script>
</body>
</html>
Every page carries a navigation reference to its parent and to the design system. The masthead .kick line links back to the root. The page footer links to the design system reference. No global nav bar is imposed on interactive artifacts (they use their own three-column rail); document and specification pages use the masthead link convention.
The kick line in every page's masthead reads: Techne Co-op · [Section Name], where "Techne Co-op" is an anchor linking back to /. This is the sole persistent wayfinding element shared by all page types.
Footer: every page footer includes a link to /design-system/ labeled "Design System v4" and to the architecture spec at /architecture/ labeled "Architecture". These are the two canonical reference pages.
Domain-specific colors in the Daybook and Common Work extend v4, not replace it. They are layered on top of the base token system as named constants, and they are chosen from within the sunset palette where possible, so the instruments feel native to the document atmosphere.
| Domain color | v4 token / value | Use |
|---|---|---|
| Daybook · Reflection | --sun-blue #5476B8 | Blue; observer-level; the coolest kind |
| Daybook · Contribution | --sun-amber #E09A52 | Amber; labor and value in |
| Daybook · Exchange | --sun-violet #6E5494 | Violet; transfer and transaction |
| Daybook · Clearing | #16a34a (green) | State: resolved / ok; settlement |
| Work · Captured | #b45309 (amber-700) | Darker than --sun-amber; new / noticed |
| Work · Offered | --sun-amber #E09A52 | Proposed; warm like contribution |
| Work · Held | --sun-coral #D1755A | In work; the middle of the sweep |
| Work · Standing | --sun-rose #B45C7C | Ready for review |
| Work · Socialized | --sun-violet #6E5494 | Acknowledged; cooling toward resolution |
| Work · Resolved | --sun-blue #5476B8 | Complete; the coolest stage — settled, clear |
| Work · Composted | #52525b (zinc) | Retired; neutral; no longer in the sweep |
The arc from Captured to Resolved mirrors the sunset sweep from gold/amber through coral, rose, violet, to blue — the same sky the written structure moves through, with resolution at dusk.
Run this against every page before merge. It extends the agent audit in §10 with repo-specific requirements.
--bg, --surface, --raised, --inset, --heading, --text, --muted, --faint, --blue, --blue-text, --ember, --ember-text, --sun-*). No ad-hoc color constants that duplicate canonical tokens under different names.localStorage under the key commons-mode./ and identifies the section by name./design-system/ and to /architecture/.box-shadow, no gradient, no blur, no border-radius above 2px on controls or 0px on surfaces.