Concepts

This section explains what the Interlace design system is, what it guarantees, and where each guarantee is enforced. It is written for someone deciding whether to adopt it — and for someone who will never adopt it but wants the technique.

Accessibilityaxe is necessary and never sufficient. It cannot press a key, and it cannot see a control's border against its surface.6 sections Color & themingEverything else on this page is a consequence, including the measured contrast contract at the bottom.5 sections LayoutLayout in this system is deliberately small: six spacing steps, four container widths, four primitives. Everything else is composition.4 sections Loading & motionThey are on the same page because they collide: the loading state is where most systems put their only animation, and it is the state a motion-sensitive user cannot avoid.6 sections ResponsivenessEach is enforced somewhere. This page says where, and shows the two failures that actually happen.7 sections Versioningnpx shadcn add @interlace/button does not add a dependency. It writes components/ui/button.tsx into your repository, and from that instant our git history and your file have nothing to do with each other.9 sections

Start here

The overview frames the other six: what the system is, what it guarantees, and — the section most docs sites leave out — what it does not enforce.

Read the overview

One source, two surfaces

These pages are authored once, as MDX in apps/storybook/src/stories/concepts, and derived into this site by scripts/build-concepts.mjs. Storybook renders the same file with live component demos embedded; the registry renders the prose where a reader evaluating the system will actually be. Neither is a copy — a build gate fails if this projection drifts from the MDX.