From layout.design

One component system. Every brand.

Layout UI components consume only semantic tokens. Swap a data-brand attribute, derived from a layout.md kit, and every component re-skins instantly, with no markup changes.

Read the docs Create your theme Browse components GitHub

Create account

Start building with Layout UI in under a minute.

Name

DefaultSecondarySuccessWarningOutline

Token contract

Every component references --layout-* intent tokens only. Change a token and every surface using it updates. No per-component overrides, no colour leaks.

Reskin with layout.md

Layout kits compile design tokens into a layout.md context file and a CSS brand block. One attribute swap reskins your entire app to match any product.

Rules for AI agents

Registry items carry meta.usage, meta.never, and meta.tokens rules. The Layout MCP server surfaces these to agents and validates generated code before it lands in your codebase.