OOI · SXThe open workshop — one exhibit
One construct's construction record, standing at its own stable address. The register's laws travel with it: entries are operator-declared and dated as of 2026-10-24 — never auto-asserted; the subject is the construct — never you: reading this page records nothing about anyone (E-only, standing). The full record: /sx/workshop.
Exhibit — The OOI Design System
lifecycle: draft · The house's one visual system — one token set, two planes (the document plane where people read and act; the instrument plane where the node measures), one typographic voice — extracted from the code that already carries it and published as a design system artifact with a public endpoint (https://claude.ai/artifact/7hNn3p7errdDpTReEBz4we): the tokens, the faces, the plane marks, the brand book and the components, each component a live preview and its guidelines. It evolves in the open; the code stays the source of every value it names. Covering starl3n, endorsing Link Digital. Exhibited retrospectively for its first versions, which came before the seal.
the address: /sx/workshop/the-ooi-design-system · machine read: /sx/workshop/the-ooi-design-system.json
| when | kind | the entry |
|---|---|---|
| 2026-09-25 | DRAFT | EXTRACTED — the first published version: the tokens, the faces, the marks, the brand book and fifteen components, from the code at 16887f8 His word: 'Extract the design system from this codebase and make a new design system.' Built from ooi_network/client/shared/ooi-tokens.css, ooi_network/client/shared/ooi.css, assets/theme.css, the two-register header in ooi_social/navigation.py and the reading surface's style in ooi_social/reading.py, at master@16887f8, every value exact to the code. THE TOKENS: twenty-eight colours in two themes (the document plane, the instrument plane), fifteen type styles, the 4pt spacing steps, six radii, three layout measures. THE FACES: Mona Sans and JetBrains Mono, the self-hosted files. THE MARKS: the six plane lettermarks (OOIOX, OOISX, OOICX; sign and logo). THE BRAND BOOK: the plane rule; the colour law (Solar Orange a fill, never text; orange always means measurement; magenta chrome, never palette); type; layout; data visualisation; marks; voice; navigation; states. THE COMPONENTS (fifteen, pure CSS, zero script): eyebrow, chip, state chip, button, the two-register header, hero, stat band, door, ladder, pillar, card, note, prose, table, contrib chrome. WHAT IT SAYS OF ITSELF, honestly: four text pairs in the code miss AA contrast and are kept exact, flagged in their notes (the muted brown on ivory 4.36:1; ivory on Solar Orange 4.1:1; Solar Glow as text on ivory 2.1:1; the contrib ribbon 4.33:1); the state chip's 9.5px sits under the house's own 11px floor; a keyboard focus ring added where the code relies on the browser's. |
| 2026-09-25 | DRAFT | THE SHARE CARDS — the default link-preview image of each plane, designed here and stamped on every served page His word: 'I'd like to have something like a 'default' visual anchor for such snippets when links are shared in systems like slack, discourd, X, etc.' Two cards, 1200x630 PNG, the sign and the name inside the centre square so a square crop keeps both: the SX card on the document plane (ivory, the OOISX sign, 'The publicly verifiable accord', opendata.ly) and the OX card on the instrument plane (Void, the OOIOX sign on an ivory disc, 'Every experiment has a door', opendata.ai); every word on them already the house's own. The brand book's Link previews section; the tags stamped at the route by ooi_network/ooi_share.py (committed eccd3b7). |
| 2026-09-25 | DRAFT | THE EXPLAINERS — the two registers of the Manim explainer series, and the record and the export The design carried for Exhibit Thirty-Nine: the paper marks of The Unlearning (gold the grown, blue the word, red the price paid, green the held) and the white stage as tokens; the explainer frame's type at 1920x1080 and its format (30 fps, the 96px safe inset, the 160px caption band, the step and shot lengths); the Explainers section (the two registers, the shot grammar, motion, the honesty rules, the record and the export); explainers/explainer-style.json for scene code; three components — the experiment explainer frame, the reading explainer frame, the explainer record (the embedded player of the first cut withdrawn when he chose the local pinned master and the external link). WHAT IT DECLINES: the live experiment canvases' pre-redesign palette, and the figures kit's four-hue series, each named and kept where it is. |
| 2026-09-25 | SEAL | THE DESIGN SYSTEM — the intent sealed: public, evolving in the open, covering starl3n, endorsing Link Digital; its endpoint the artifact's own public link His word verbatim: 'The claude design system link is already shared as a public link. I am happy for the design system to evolve and improve publicly as an artifact of 'starl3n' also endorsed by 'Link Digital'. As such, to cross that T, please also start a workshop item for the design system. It is already public, so it has something like a public endpoint already.' THE ENDPOINT: https://claude.ai/artifact/7hNn3p7errdDpTReEBz4we, shared by his own act as a public link. THE RULES IT KEEPS: the code is the source of every value it names — a value changes in the code first, or is declared a proposal; a failing pair is flagged, never quietly re-tinted; the house's own words win over any template's; each revision a dated entry here. The first versions stand above as its retrospective drafts. |
| 2026-09-26 | DRAFT | THE SIX PROPOSALS APPLIED — the maturity plan's Appendix D taken into the code at 2e7a01f, and the design system re-synced from it (version 8): the four flags of the first version closed His words, in order, verbatim — in the 'OOI design system maturity plan' session, relayed by it: 'Go on the six proposals as recommended, and stage the plan' · 'have the session that owns the tree work from Appendix D' · 'Stage the plan and have the peer commit the seven' · 'Push both commits and have the peer do D.6'; in this session, asked directly with the options separated, his ticks: 'Apply D.1–D.4, the six proposals' · 'Yes, commit the six files' · 'D.6 (a): the Exhibit Forty entry' · 'D.6 (b): re-sync the design system from the code' · 'Also commit the staged plan file'. THE DESIGN OF RECORD: ooi_network/docs/ooi-design-system-maturity-plan.md — the OOI design system reviewed against the NSW Design System, a twelve-dimension scorecard, a seven-phase closing plan, and Appendix D, the six proposals as exact edits (committed d440ff2). THE CODE: commit 2e7a01f, six files (the tokens sheet and its byte-identical SX twin, assets/theme.css, ooi.css, viz_theme.py, test_ox_shell.py; +85/−44). THE SIX: P-1 --ooi-label / --text-label, the label tone for text under 16px — ooi-ink-2 on the document plane (7.35:1), ooi-muted on the instrument plane (5.33:1), declared on both planes; thirteen shell selectors and the eyebrow move to it · P-2 --ooi-action-fill, the plane's accent-text as the fill of buttons and the open chip, with on-accent on it (5.90:1 / hover 7.54:1 light; 7.42:1 / 9.60:1 dark — the dark pair had sat at 4.39:1 on #CC5500, unflagged); #CC5500 a fill and a graphic colour, never a button · P-3 --glow-text, gold as text only where it reads — Solar Flare #A34400 on light (5.85:1), the gold #DAA520 on dark (8.41:1) — on six selectors; every gold border and rule stays · P-4 --ooi-contrib-fill #D6248C → #D12388 (4.52:1 under the ribbon's #FFF3FA) · P-5 the state chip 9.5px → 11px, the mono floor · P-6 --ooi-cat-exception #B23A12 → #B73C12 (3.04:1 on Umbra, a mark). THE GUARDS: test_design_tokens 7/7 first, then the sweep one suite at a time — test_ox_shell 13/13 after its two P-3 assertions moved from the #DAA520 literal to var(--glow-text) and the token's two plane values; wayfinding 16/16; sx 14/14; navigation 7/7; reading 10/10; constructs 12/12; seb 7/7; share cards 6/6; release 11/11; unco 18/18; atlas 2/2; slip 3/3; double slip 5/5; quad slip 11/11. THE RE-SYNC (version 8, from the code, file by file): tokens.json at master@2e7a01f gains ooi-label, ooi-action-fill and ooi-glow-text as aliases with their notes, the contrib fill and the exception follow the code, the state style sits at 11px; the four flags of the first version closed on the cards and in the brand book, whose colour law now carries the action fill (rule 3) and the label rule (rule 8); bundle.css follows; the explainer style's exception follows. ONE PAIR STANDS FLAGGED, outside the six: the participant button's hover in ooi.css (#1a1410 on #CC5500, 4.23:1), kept exact. NOT DONE, his call: D.5 — the fenced SX modules and client pages, the contrib pages' stale magenta fallback. Nothing invented; every value the code's. |