EN日本語
Book a conversation
Menu

This site runs on Loom

Its own design system, governed the way we govern yours.

This site is built from Loom Site, its own design system, governed by Loom. What we do for your system, we do for our own site first.

Loom Site defines reusable elements with typed render functions and contracts. The build checks page composition, rules, copy and localisation. The figures below are computed on each build. Class ownership measures where registered styles are used; it does not prove that every caller uses a registered render function.

The numbers

MeasureValueCommand
Elements134, of which Loom's audit reads 83 components (the atoms, molecules, organisms and templates) and 2114 tokensnpm run site:system
Contract completeness (20 points per element)94.7% (no element is mapped to Figma yet)tsx scripts/site/system/check.ts
Rendered class uses owned by the system99.2% (30.2% before Loom Site)tsx scripts/site/system/check.ts
Pages that follow their declaration74 / 74tsx scripts/site/system/check-pages.ts
Loom's audit of Loom Site75/100, Holding together, 30 Oct 2026npm run site:audit
Decisions and exceptions on record24apps/showcase/site/loom/decisions
Content rules enforced21 (17 blocking, 4 reporting)npm run site:copy -- --strict

Rules every page follows

How the parts form a page

Inspect the actual foundations, tokens, components and templates below. Each layer links to its contract; the rendered specimens use those same elements.

  1. Foundations

    The decisions that give the system its character and limits.

    Colour ↗

    From the actual implementation / contract

    cotton
    Page ground
    ink
    Text, rules, primary button
    teal
    See · the UX Ops lead · the Academy · articles · holding together
  2. Tokens

    Named roles for colour, type, space and motion. Change the source once.

    Component tokens ↗

    From the actual implementation / contract

    1. color.palette.greige.900Base primitive
    2. color.text.default → --inkSemantic role · light mode
    3. --identity-sticker-inkComponent alias
  3. Atoms

    Small reusable elements with their own states, rules and accessibility.

    Button ↗

    From the actual implementation / contract

    Inspect Button
  4. Molecules

    Elements working together for one focused task.

    Call to action pair ↗

    From the actual implementation / contract

    Primary action Alternative
  5. Organisms

    A complete section of interface, composed from smaller elements.

    Header ↗

    From the actual implementation / contract

    View the rendered specimen

    Static specimen. Inspect the contract for its interaction requirements.

  6. Templates

    Layout and content slots that establish a repeatable page structure.

    Hero ↗

    From the actual implementation / contract

    View the rendered specimen

    Static specimen. Inspect the contract for its interaction requirements.

    The next level of your design system.

    Loom turns the system you have, or the one you are missing, into clear, governed decisions that your teams and your AI tools follow. Your product keeps its look. Your people stay in control, with expert help and agents doing the routine work.

    Book a conversation Start with a free health check
    jobsTitle
    The owner-approved line above the jobs band (See it. Shape it. Govern it. Run it.).
    title · required
    The headline (owner-approved).
    lede · required
    The promise.
    actions · required
    The CtaPair.
    live
    The Drift hero panel.
    jobs · required
    The four jobs band.
  7. Pages

    Templates composed with real content and a checked sequence.

    Landing page ↗

    From the actual implementation / contract

    1. herorequired
    2. problem-sectionoptional
    3. lead-sectionoptional
    4. flow-sectionoptional
    5. job-sectionoptional · repeatable
    6. proof-sectionoptional · repeatable
    7. roles-sectionoptional
    8. founder-sectionoptional
    9. roadmap-stripoptional
    10. cta-sectionrequired

Smaller elements compose into larger structures. Dependencies can skip levels: a template can use a button directly. These are composition levels, separate from organisation and brand inheritance.

Actual composition dependencies

A separate model: the operating sequence

The source field guide also describes five stages of work. These describe how a decision becomes action; they are separate from component composition and brand inheritance.

  1. SignalObserve a specific need or discrepancy.
  2. PatternIdentify what recurs across those observations.
  3. DecisionRecord the chosen response and its reason.
  4. RuleDefine the constraint that future work follows.
  5. ActionApply the decision and check the outcome.

What Loom's audit says about Loom Site

Loom's audit of Loom Site: 75/100, Holding together, 30 Oct 2026. The same run feeds the governance view. Every recorded run, oldest first, with what changed:

  1. 46/100 (Loose threads), 26 Oct 2026, 10:50 UTC
    First audit, on the day Loom Site was registered. Its tokens held raw values, and no element had a story or a test yet.
  2. 49/100 (Loose threads), 26 Oct 2026, 12:25 UTC
    The tokens now point to Loom Base's palette instead of holding raw values, and the audit read how the site builder uses the system.
  3. 72/100 (Taking shape), 26 Oct 2026, 13:46 UTC
    Most of this jump came from the audit, not the site: Loom's audit learnt to read a system's governance records (owners, decisions, changelog) and its per-element stories, which the site already had. The site itself added a high-contrast mode and written instructions for agents.
  4. 73/100 (Taking shape), 26 Oct 2026, 15:05 UTC
    The audit now counts an element placed by its render function as a use of the system, so adoption is measured properly. This run was recorded in a working copy; a clean copy of the repository could not reproduce it at the time (see the next run).
  5. 73/100 (Taking shape), 26 Oct 2026, 19:01 UTC
    The same score, recorded from a clean copy of the repository, so anyone can reproduce it.
  6. 73/100 (Taking shape), 27 Oct 2026, 10:12 UTC
  7. 72/100 (Taking shape), 27 Oct 2026, 12:45 UTC
  8. 74/100 (Taking shape), 27 Oct 2026, 12:53 UTC
  9. 74/100 (Taking shape), 27 Oct 2026, 12:58 UTC
  10. 74/100 (Taking shape), 27 Oct 2026, 13:13 UTC
  11. 74/100 (Taking shape), 27 Oct 2026, 13:16 UTC
  12. 74/100 (Taking shape), 27 Oct 2026, 13:24 UTC
  13. 73/100 (Taking shape), 29 Oct 2026, 05:15 UTC
  14. 74/100 (Taking shape), 29 Oct 2026, 05:48 UTC
  15. 75/100 (Holding together), 29 Oct 2026, 08:20 UTC
  16. 75/100 (Holding together), 30 Oct 2026, 11:30 UTC
  17. 75/100 (Holding together), 30 Oct 2026, 11:52 UTC
  18. 75/100 (Holding together), 30 Oct 2026, 12:24 UTC
  19. 75/100 (Holding together), 30 Oct 2026, 12:30 UTC
  20. 75/100 (Holding together), 30 Oct 2026, 12:40 UTC
  21. 75/100 (Holding together), 30 Oct 2026, 13:05 UTC

What the latest run found:

  • Loom Site: 75/100 for structure, governance and use: Holding together.
  • 9 of 9 components identified as interactive have no matching keyboard/focus test in the supplied inputs
  • 11.0 system bypasses per 1,000 lines of consumer code
  • Layer model (system of systems): absent
  • 30 colour values defined more than once under different names
  • 7 of 1816 semantic/component tokens hold literals instead of aliasing a lower tier

See it for yourself

Start with a conversation about your system.

We read your system, show you what we found, and agree with your team what to fix first.

Book a conversation Start with a free health check