News: Tokens, rules, and registry components stay on one path. Read the docs
An agentic design system.
With Aura, the soul is yours.
Aura is a shared source of truth for people and coding agents. You browse the components. An agent reads the tokens, the rules, and the real component source, then builds product UI from those files.
pnpm dlx @aura-design/cli@latest initPeople
Browse this site. Foundations record the decision behind a token. Component pages are the controls you install. The scales further down are the live accent and gray ramps.
Agents
Start from a file. In this repository, open AGENTS.md, then DESIGN.md. In an app, open DESIGN.md, .agents/rules, and the skill for the job. The CLI installs those files.
One kit
A registry button uses the same accent step, 13px spacing unit, and icon rule the docs describe. Guidance, tokens, and components stay on one path.
One kit, two readers
Aura is an agentic design system for product UI. The decisions are written once. A person can read them here. A coding agent can follow them in the repo: the narrative spec, short rules, a skill when the job has steps, and React components that already use the tokens.
What to open
Agent harness
Aura is a registry you install and own. The harness is public: files, skills, playbooks, and audits.
Start here
Three ways in. Install the registry, then let an agent read the same files you browse here.
Get started
Install Aura with the CLI, then see which file an agent should open before it writes UI.
Rules
Always-on process rules, plus the Aura skill for color, type, spacing, and composition.
Components
React you install and own. Radix behavior, Aura tokens, and variants instead of one-off restyles.
DESIGN.md flavors
Themes over Aura. Each flavor changes color, type, radius and voice while the grid, components and accessibility stay Aura. Copy a link, tell your agent Apply this design: <link>, and it restyles your app.
SharpmintIce-blue fields, square split-cell actions, an open ledger
StillfieldWarm paper, drifting tiles, one light headline
NarcGrainy blue bands, scalloped edges, candy windows
BauhausMuted primaries, ink rules, six geometric shapes
MerchantryNight stages, electric lime, huge tight type
SlipstreamA flowing gradient, navy ink, layered cards
BlocksmithHeavy type, dotted canvas, pages built from blocks- Make your ownPaste a DESIGN.md, a site or a brief. The generate-design-md skill adapts it to Aura.
Twelve by twelve
Accent and gray ramps, a 13px spacing unit, and a 17px control floor. The numbers are the system.
Create a custom palette
Twelve accent steps and twelve gray steps. Agents use these tokens. Pick seeds, then download the CSS.
Component preview
Aura components reinterpreting Radix UI, shown with your live palette.
Sign up
Susan Kare is an American graphic designer and artist, who contributed interface elements and typefaces for the first graphical desktop.
Susan Kare is an American graphic designer and artist, who contributed interface elements and typefaces for the first graphical desktop.
Frequently asked questions
Which file should an agent open first?
In this repository, AGENTS.md, then DESIGN.md. In an app, DESIGN.md, .agents/rules, and the skill for the job. The CLI installs those files.
Does Aura replace shadcn?
No. Aura is a shadcn-mode registry. You copy source into the app and pull updates with the CLI. Aura Keep still wins on icons, forms, spacing, and typography.
Where do the colors come from?
Twelve accent steps and twelve gray steps. Primary maps to accent-9. Body copy is gray-12. Muted metadata is gray-11. The palette playground above is the live ramp.
What does the 13px grid mean?
Tailwind spacing uses --spacing: 13px. p-4 is 52px. Controls stay at least 17px so iOS Safari does not zoom on focus.