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.

Get startedGRulesR
Install
pnpm dlx @aura-design/cli@latest init
Accessible Radix components
Tokens and rules agents follow

People

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, .cursor/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.

Watch componentsC
auramain
agent
Reviewer
Before you write UI, open DESIGN.md. Map the fill to accent-9 and keep body copy on gray-12.

Read DESIGN.md

Read .agents/skills/aura

Aura
Primary is accent-9. Spacing is 13px. Controls stay at 17px. The button already owns icon gap.

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

Job
Install or retheme
Open
CLI
Job
Choose a color, size, or type step
Open
DESIGN.md and Foundations
Job
Stay inside the guardrails
Open
Rules
Job
Pick a playbook, skill, or audit
Open
The agent harness
Job
Use a control
Open
The registry component

Agent harness

Aura is a registry you install and own. The harness is public: files, skills, playbooks, and audits.

Aura skills

Forms, visual lint, porting, the feature map, and Gemini brand images.

Aura Just Ships

Powerful out of the box. Install the registry, then let an agent read the same files you browse here.

View docs

Get started

Install Aura with the CLI, then see which file an agent should open before it writes UI.

View

Rules

Always-on process rules, plus the Aura skill for color, type, spacing, and composition.

View

Components

React you install and own. Radix behavior, Aura tokens, and variants instead of one-off restyles.

View

Twelve by twelve

Accent and gray ramps, a 13px spacing unit, and a 17px control floor. The numbers are the system.

Accent
12
Steps from canvas to text
Gray
12
The same roles, neutral
Spacing
13px
One unit. p-4 is 52px
Controls
17px
Floor on every input

Create a custom palette

Twelve accent steps and twelve gray steps. Agents use these tokens. Pick seeds, then download the CSS.

Accent Gray

Component preview

Aura components reinterpreting Radix UI, shown with your live palette.

Box
Grid
Image
Image
Text
Fully-featured
Built with Aura
Open source
EA

Emily Adams

emily.adams@example.com

EA

Emily Adams

emily.adams@example.com

Sign up

Create account

OR

VVVBG
VVVBG
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.

Start with great taste, finish with your own flavor. The steps above are the tokens. Build with them.

Get started

Frequently asked questions

Which file should an agent open first?

In this repository, AGENTS.md, then DESIGN.md. In an app, DESIGN.md, .cursor/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 playground below 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.

Daily UI with Aura

Build at the speed of reading.

Get startedGRulesR

Registry-first. You own the source.