Loom Base: our own design system, built with our own engine

Status: version 1, beta. Every component is marked beta and does not count as stable until a person reviews it against the definition of ready. Loom Base is MIT-licensed and builds as an npm package and a shadcn-compatible registry; it is not yet published.

Loom Base covers the components most products need

• 69 component contracts, with behaviour written as data: the 31 near-universal components found in our benchmark of product design systems, layout primitives, six AI interface patterns, and components for human approval of AI proposals.
• React and React Native from the same contracts. On the web, components build on React Aria Components for accessibility. On native, they use React Native's own accessibility features.
• Tokens in three tiers (primitive, semantic, component) in DTCG format, with colour in OKLCH and a hex fallback, and modes for light, dark and high contrast, density, reduced motion and Japanese typography.
• Page templates, such as a list and detail view, a settings page, a wizard, sign-in, empty and error pages.
• Docs for people and agents: one page per component, a typed component catalogue and an llms.txt file.

Every component is checked in every mode

These numbers are read from the coverage report (packages/base/COVERAGE.md) each time this page is built.

• 453 of 453 parity tests pass, on web and native. Native forms: 65 full, 3 partial, 1 without one.
• 1,113 accessibility runs with axe, 0 failing: all 371 Storybook stories, in every colour mode.
• 2,436 of 2,436 declared colour pairs pass WCAG 2.2 AA contrast, in light, dark and high contrast. A brand layer that drops a pair below AA fails the build.
• 26 of 26 keyboard scripts pass in a real browser.

Every decision about it is a record

Loom Base is governed the way we govern client systems. Its decisions are files in the repository, each with its reason:

Fully themeable, with limits that protect people

A brand layer can change the look within lock levels. Some things are locked for every brand: the focus ring, the minimum target size and the colours that mark AI content. Status colours can be extended but not changed. Most colour, type and radius roles can be replaced, with a recorded reason. Spacing defaults can be tuned freely.

No system yet? Start from Loom Base

For a team without a design system, Loom forks Loom Base, themes it from your app's own colours and type in light and dark, prunes it to the components your app uses, and writes a migration plan. It also seeds a loom/ folder with governance sized to your team. You own the result from day one. Partial

What does not work yet: the starter has run on one pilot app so far.

Some of it is not finished, and we say which parts

We say this plainly. Some native forms are partial (3 components) and 1 component has no native form. There is no message catalogue yet, no visual regression baselines, no Figma library and no release tooling. On our own audit, Loom Base scores 73 out of 100, "Taking shape". The audit measures structure, governance and tooling; the gaps are mostly content tooling, release tooling, a docs site and Figma.

We audit ourselves with the same rubric

Loom's own control area was built before our standard existed, and it scores 26 out of 100 on our own audit, "Loose threads". We are rebuilding it on Loom Base. We publish both numbers because a strict standard has to apply to us as well. Working

We ask clients to trust our engine. Loom Base is how we earn that trust first.

Questions

Can we use Loom Base if we already have a design system? You keep your own system and your own look. Loom Base is for teams without a system, and for Loom's own screens.

Who owns a system started from Loom Base? You do, from day one. It lives in your repository.

Does every system started from Loom Base look the same? No. Loom Base has a default look, and a brand layer replaces it with yours, within the lock levels.