Loom Site is this website's own design system, governed by Loom. Every block on every page is one of the 134 elements below: a module with a typed render function and its contract. Every specimen and thumbnail on this page is drawn by that code.
Fields
- Indigo
--indigoThe hero · Product · Run · tightly woven - Teal
--tealSee · the UX Ops lead · the Academy · articles · holding together - Madder
--madderShape · Roles · the problem and cost · loose threads - Saffron
--saffronGovern · Proof · the call to action · taking shape - Ink
--field-inkCompany · showcase panels
Type ramp
- Woven
--fs-displayh1, the landing headline - Woven
--fs-h2h2, field verbs, big numbers, long h1s - Woven
--fs-h3h3, card titles, the lede - Woven
--fs-bodyrunning text, buttons, inputs - Woven
--fs-smallcaptions, sources, secondary lines, dense UI - Woven
--fs-labelmeasured values: figure keys, token names, scores beside a swatch
Spacing scale
--space-12 px--space-24 px--space-36 px--space-48 px--space-512 px--space-616 px--space-720 px--space-824 px--space-932 px--space-1040 px--space-1148 px--space-1264 px--space-1380 px
The numbers
| Measure | Value | Command |
|---|---|---|
| Elements | 134: 19 foundations, 3 tokens, 17 atoms, 12 molecules, 54 organisms, 19 templates, 10 pages | npm run site:system |
| What Loom's audit reads | 83 components (the atoms, molecules, organisms and templates) and 2114 tokens. Foundations and page declarations are documented here and held by the site's own gates. The governance view counts 2226 items in five tiers: the 2114 tokens, the 83 components and 29 page patterns (the templates and page sequences Loom reads as patterns). | npm run site:register |
| Contract metadata coverage | 94.7% of the 20 points across all elements. No element reaches 20: none is mapped to Figma yet. | tsx scripts/site/system/check.ts |
| Rendered CSS-class ownership | 99.2% of 17,650 rendered class uses (30.2% before Loom Site) | tsx scripts/site/system/check.ts |
| Composition | 74 pages checked, 0 violations, no exceptions | tsx scripts/site/system/check-pages.ts |
| Loom's audit of Loom Site | 75/100, Holding together, 30 Oct 2026 (21 recorded runs; the history is on This site runs on Loom) | npm run site:audit |
These measurements describe contract metadata and CSS-class ownership. They do not establish executed behaviour, full token/component adoption, accessibility or product acceptance.
The matrix by point: identity 134/134 · purpose 134/134 · anatomy 134/134 · api parity 134/134 · variants 134/134 · states 134/134 · tokens 134/134 · layout 134/134 · spacing 134/134 · motion 134/134 · accessibility 134/134 · content 134/134 · icons and illustrations 134/134 · do and don't 134/134 · rules with why 134/134 · decisions 134/134 · usage 127/134 · tests 134/134 · figma 0/134 · links 134/134.
Decisions and exceptions · Governance · Storybook · This site runs on Loom
Foundations
- Accessibility
WCAG 2.2 AA as a floor: axe at zero, 44 px targets, visible focus, colour never alone, reduced motion respected; each element's passport (point 11) says how it meets them.
- Base styles
The document defaults every page starts from: the cotton ground, ink text, the type roles on h1 to h3 and body, links, focus, and the reset.
- Colour
The site's colour roles: cotton and ink for reading, four dyes and ink for structure, small marks for state, all resolved from Loom Base's Selvedge tokens.
- Elevation
Flat at rest: one step of tone raises a panel; the only shadow is for things that float (menus, dialogs).
- Grid and layout
A 12-column grid inside a 1240 px wrap with 16 px gutters on phones and 40 px on desktop; text runs at 720 px.
- Iconography
The governed asset set: 55 icons on viewBox 0 0 24 24 with a 1.75 px line, each with a record (icon:<name>) and usage.
Show all 19 foundations
- Illustration
The governed illustration set: 20 flat geometric pieces (edges, spots, states) in the site palette with a 2 px ink line, each with a record (art:<id>).
- Imagery
The only photographs-like images on the site are real screens of Loom with sample records, captured by the build from the product tour; no stock photos, no people.
- Layout primitives
The wrap that centres content on the grid with its gutters, the plain section and section head used by hub pages, and the shared unstyled app mount inside task bodies.
- Localisation
English and Japanese.
- Motion
One easing set and four transition durations, with distinct authored sequence holds.
- Radius and rules
Square cloth: one small radius for controls, pills for chips, and four rule weights (hair, rule, frame, heavy).
- Sample honesty
Every number and screen says where it comes from: real output, recorded output or sample data, in one caption style with fixed words.
- Spacing and rhythm
Loom Base's spacing scale (2 to 80 px) and the section rhythm: one padding per template.
- State modifiers
The state vocabulary: 77 is-* and has-* modifiers.
- Terminology
One word per concept in each language: the glossary of site terms (job names, honesty labels, bands) and the content tokens that carry them.
- Type
Three faces (Archivo for display, Atkinson Hyperlegible Next for text, Martian Mono for figures), six sizes and one role per use, plus a Japanese display face.
- Utilities
The few utility classes the system allows: visually-hidden (text for screen readers), sprite, and the once-only reveal used by selected below-fold section content.
- Voice
How the site speaks: plain words, short sentences, real numbers with their sources, no metaphors in headlines, no status chips, and nothing claimed that does not run (site-content/voice.md, enforced by npm run site:copy).
Tokens
- Primitive tokens
Loom Base's primitive palette and scales (311 values in packages/base/tokens/primitive.tokens.json): the only place a hex or pixel value is written.
- Semantic tokens
The site's roles (48 colour roles plus type, space, layout, radius, rule, motion), each a path into Loom Base, resolved into 350 CSS variables.
- Component tokens
V4 elements define per-part aliases in brand/component-tokens.ts; 70 existing components retain selector/state-scoped defaults in brand/component-bindings.json.
Atoms
- Arrow link
The quiet next step at the end of a section: read more, see the demo, open the page that proves the claim.
- Band word
Shows a health band (Tightly woven, Holding together, Taking shape, Loose threads) as a small dyed mark with its word, the only place a dye states health.
- Button
The one way the site asks the reader to act: book a conversation, start the health check, play a showcase.
- Caption
Says what a figure shows and where its data comes from, so every number and screen on the site can be checked.
- Code block
Shows a real record, command or code excerpt exactly as it is, so the reader sees what Loom writes into a repository.
- Control
A small on-page control inside a showcase: pick a preset, switch a mode, toggle a view.
Show all 17 atoms
- Step line
The one small line allowed above a heading: a step in a task ('Step 2 of 8'), an article's read time, or the job number in the four-jobs sequence.
- Heading
Names a page or a section in Archivo, expanded, at one of four sizes, so the reader can scan the argument by its headings alone.
- Icon
A single icon from the Loom Site set, drawn inline so it takes the text colour and needs no request.
- V4 identity artwork
The selected V4 language: geometric LOOM lettering, woven crossings and sticker silhouettes, redrawn as sharp, token-painted vectors.
- Identity sticker
The selected sticker family as seven distinct, reusable silhouettes, refined from extension 06.
- Logo
Identifies Loom through a still woven mark and outlined Archivo name, with optical cuts for supported sizes.
- Operational state badge
The selected healthy, attention, broken and action badges, distinguishable by geometry and words.
- Tag
Marks a figure's provenance in its head, next to its title, so the reader sees what kind of data it is before reading it.
- Text link
A link that is part of a sentence, so the reader can follow a source or a related page without leaving the line.
- Text
Running text: a paragraph of the argument, the lede under a title, a small print line or the closing line of a page.
- Woven edge
The brand's signature: a selvedge, the woven edge that stops cloth fraying, drawn wherever a field of colour meets cotton.
Molecules
- Breadcrumbs
Shows where a deep page sits and links back up the path, so a reader who arrived from search can find the section.
- Byline
Says who wrote an article, when, and how long it takes to read, because the owner's voice is part of the argument.
- Callout
Draws attention to one thing the reader must know before going on: a plan that is not built, an error in a form, a note on data.
- CTA pair
Offers the main action and its one alternative side by side: book a conversation, or start with the free health check.
- Figure with caption
Frames a static figure (a diagram, a record read at build time, a screenshot) with its title, its provenance and its caption.
- Finding
Shows one finding from Loom's checks: its severity in words, what is wrong and where.
Show all 12 molecules
- Form field
Collects one answer: a visible label, the input, an optional hint and an error that says how to fix it.
- Four-job thread map
Connects See, Shape, Govern and Run as one linked set of jobs using the selected thread-map direction.
- Language switch
Lets the reader move between English and Japanese, and keeps its place on every page so the header never shifts.
- Playback controls
Gives the reader control of a self-playing showcase: play or pause, and move to any step with a slider.
- Stat
Puts one number in front of the reader at h2 size, with what it counts underneath, so a claim rests on a figure.
- Table
Lays out comparable records in rows and columns: claims and their states, pricing, rules.
Organisms
- Try a lesson
Lets the reader try one Academy lesson: pick a fix and see whether Loom's audit passes it, with the reason.
- The agent's draft, checked
Shows what Loom's check finds in code an agent wrote, line by line, and what is left after the fix: the product's core loop in one view.
- Atomic layers field guide
Explains the actual seven Loom Site layers with concrete examples and links into their contracts.
- Autonomy modes (coming next)
Shows what changes when an area's owner gives agents more or less autonomy: who acts at each step, from Observe to Full.
- Before and after tokens
Compares the same button before and after conversion to tokens; the browser checks the computed styles match, so 'the look stays' is measured.
- A system, seen as cloth
Draws a design system as cloth: rows are component families, columns are products, and the weave loosens where health drops.
Show all 54 organisms
- One draft, checked twice
Shows one agent draft checked twice: before the fix with its findings, after the fix with none, from the recorded server output.
- Contact form
The contact form: name, email, organisation, role, a topic, the message and consent, with Turnstile; stores it through a Pages function in the D1 table contact_requests, where the owner reads it (nothing is emailed).
- On this page
Lists a long page's sections beside the text, so readers can see its shape and jump to a part.
- Record excerpt
Shows a real record from the repository, a contract, the governance file, the MCP tools or the GitHub App's permissions, as a table, so the reader sees what 'as data' means.
- The same week, with and without Loom
Plays the same moments of a team's week with and without an operating model, side by side, and counts what was answered from the records.
- Cost of drift calculator
Estimates what drift costs a team per year from five inputs, each default cited, and shows the formula; it runs in the browser and sends nothing.
- Loom Base coverage
Shows which Loom Base components are full, partial or missing on web and native, honestly, including the gaps.
- Decisions, as records
Lists Loom Base's decision records with their numbers and titles, read from the repository.
- One entry from a real DESIGN.md
Shows one entry of a real DESIGN.md, the file agents read, so the reader sees what Loom exports for agents.
- Hero panel (a change, governed)
Beside the hero promise, plays one change moving through Loom: a raw value found, a draft opened, checked and merged by a person.
- Drift palette
Lays out every raw colour the audit found in one real app, so the reader sees drift as a picture: decisions nobody made at the system level.
- Facts
A short numbered list of facts with bold leads: what the health check found, what a report says.
- Questions
Turns a page's Questions section into disclosures: each question a summary, its answer inside.
- First weeks
Plays an engagement from the first week to day 90, with what is delivered when and the three measures leadership sees.
- The agent loop
Draws the loop an agent follows with Loom: search, read the contract, build, check, fix, propose what is missing.
- Flows and layers tree
Draws how a system is transformed or created step by step, and how layers bend rules from a root, as numbered steps and a tree.
- Site footer
Closes every page: the logo and the promise, the full site map, the legal links, the two calls to action, this site's DESIGN.md and its system, and the type licences.
- Site header
The top of every page: the logo, the five sections with their mega-menus, the language switch and the one call to action; on phones, a drawer with the same links.
- Health check
The free three-minute health check: questions across the rubric's areas, scored in the browser, with the reader's band and gaps.
- Identity motion
Plays the owner's selected break-and-repair, assembly and website loops as explanatory brand illustrations, with every frame available to inspect.
- V4 identity playground
The selected oversized LOOM artwork with a sticker family, four operational state specimens and a separate health band reference, all painted by the website's real tokens.
- The four jobs (dye tiles)
See, Shape, Govern and Run as four dye tiles under the hero, each with a real artefact that plays once, so the four jobs read as one sequence.
- Layers (coming next)
Lets the reader stand in a layer (global brand, region, digital brand, product) and try a change: accepted, needs a reason, or a request to the rule's owner.
- Library grid
One layer of the Library as a grid of cards, each with a live thumbnail rendered by the element's own module, its name, lifecycle, matrix score and purpose.
- Library overview
Opens the Library with the system itself: the five fields with their tokens and roles, the six-size type ramp, the spacing scale and the woven edge in both threads, each drawn by the real tokens.
- UX Ops board (one quarter of a design system)
Plays thirteen weeks of a sample design system with an operating model and with tools only, so the reader sees who acts, what waits and what is decided in time.
- Panel
A raised surface for one task in the stand-alone apps: a question, a result, a form.
- Product screen
Shows a real screen of Loom's control area with sample records, cropped at component boundaries, so the reader sees the product, not a mock-up.
- Product tour
A fixed English link from Site content into the separately routed read-only product tour.
- Proof: before and after Loom
Plays the audit's eight areas moving from before to after, with the overall score, so the reader sees what the service changed, measured by the same rubric.
- Read your own stylesheet
Runs part of Loom's audit in the browser on the reader's own CSS or token file, and leads with what it found.
- Agent replay
Replays a recorded agent session: each call as the agent sent it and each result after its recorded latency, so the reader sees how agents use Loom.
- What arrives in your repository
Shows the pull request Loom opens: its files, checks and permissions, so the reader sees that every change is reviewable and Loom never merges.
- Records in your repository
Shows the loom/ folder in a repository: rules, owners, exceptions and decisions as files next to the code.
- Roles grid
Every role as a colour tile: the role, what changes for them, where they meet Loom, and an arrow to their page.
- What changes for each role
Lets the reader pick a role and see what Loom asks of them this week, what waits on them and what they get back, computed from the sample records.
- Rows
A list of links, one per row: a bold label, one line of description and an arrow.
- Score us
Publishes Loom's own scores, low ones included, with every check behind them and the command that reproduces each.
- Showcase frame
The one frame for everything that plays or reacts: a head with the claim, the showcase, its playback controls and its honesty caption at the foot.
- Stage finder
Asks two questions (people and products) and shows the organisation's stage, what it needs now and what breaks next.
- What runs today table
Every capability on the site with its real state, grouped into Runs today, Runs in part, Coming next and Our commitments, from the claims register.
- Team survey
The team survey: each member answers the same questions; results are encrypted in the browser and compared by role.
- System of systems
Shows layers (global brand, region, product) each with an owner and a version, and which ones a parent release would leave out of range.
- Audit card: an open-source app
Shows one real audit result as a report card: the score, the band, the areas and the top findings, for an app anyone can check.
- Task footer
The compact footer of the stand-alone apps: one note about the reader's data, and the ways back.
- Task header
The focused header of the stand-alone apps (contact, health check, survey): the logo, the task's name and one or two ways back, with no navigation that would pull the reader out of the task.
- Tiles
A set of colour tiles, each a link to one page or job: a verb or label, an optional head and text, and an optional real fragment beside the link.
- Token chain
Shows how a component's token resolves: component → semantic → primitive, with the value at the end, read from Loom Base.
Templates
- Call to action
The one action field that closes every page: an invitation to a conversation and the free health check, always on saffron.
- Dye field
A full-bleed block of one dye (indigo, madder, saffron, teal), ink or the quiet band.
- Four jobs in columns
The four jobs side by side on cotton (See, Shape, Govern, Run), each with its lede, its facts and a link, numbered in job order.
- Founder section
Who is behind Loom, on ink: the claim, a short statement and three facts, including what is not true yet.
- Hero
Opens the landing: the headline, the promise and the two actions on indigo, the live drift panel beside them, and the four jobs as one band of dye tiles.
- Job section
One section per job (See, Shape, Govern, Run): its number, the claim, the copy and a real artefact that proves it.
Show all 19 templates
- Lead section
The landing's lead message (front matter 'lead:' picks which one renders): the claim and its copy, short cells, and the governance simulator, on a teal field.
- Page head
Opens every page below the landing: one full-bleed field of the page's colour (its job's colour on the four job pages) holding the breadcrumbs, the oversized title, the lede and actions, closed by the woven edge.
- Role switcher
A quiet band under a role page's head that lists every role, so a reader can switch to theirs.
- Problem section
States the problem: the claim with the drift palette showcase, three sourced figures, the source line, three short cards and the link.
- Proof section
One claim proved by one showcase at full width: the claim and copy, then the showcase (the proof shift, the first weeks).
- Page body
The body of a deep page, demo or article: the prose column, with On this page beside it when the page is long.
- Keep going
Closes a page with up to three next pages as tiles, so no page is a dead end.
- Coming next
The one place on a page where plans appear: each plan a card, in the future tense, with a link to what runs today.
- Roles section
Lists what changes for each role, as the Roles grid under a heading.
- Task body
The one column a task page's work happens in: the app's mount, the contact form, or a privacy notice.
- Task page
The whole document of a stand-alone app (contact form, health check, team survey, their privacy pages): focused header, the task in one column, a compact footer with the data note.
- Hub grid
The body of a hub page: every page in the section as tiles (or rows for articles), with an optional closing paragraph.
- Titled section
A plain section on cotton with a heading, an optional lede and a body (rows, a list); used on hubs for the plans under Coming next.
Pages
- Task page
The health check, the team survey and the contact form, with their privacy notices: one task in one column, composed from the Task page template (generated by scripts/site/apps.ts).
- Article
An argument with its sources: the page head, the byline and body with On this page, more articles, the call to action.
- Articles hub
Every article as a row with its kind and reading time.
- Deep page
One topic in depth: the page head, the role switcher on role pages, a hub grid when the page is also a hub, the page body with On this page, related pages and the call to action.
- Demo page
One showcase at full width: the page head with the claim, the showcase in its frame with its honesty caption, more demos, the call to action.
- Hub
Sends the reader to the right page in a section: the page head, every page as tiles, plans under Coming next, the call to action.
Show all 10 pages
- Landing
The argument in order: what Loom does (hero), the problem, the lead, the four jobs and each job, the proof, value in the first weeks, the roles, the founder, what is coming, and the call to action.
- Not found
Says the page does not exist and lists every section.
- What runs today
Every capability with its real state, from the claims register; the one place states are shown.
- This site runs on Loom
Shows Loom Site, this site's own design system, with real data: the elements per layer, the matrix, the share from the system, the audit score history, the decisions, and the commands that produce each number.