Quiet structure
Paper-white surfaces and calibrated rules make dense product screens easier to scan.
Theme 01 · Product interface
AuroraLight with
a sharper edge.
A calm, high-contrast system for software that needs clarity before character. Neutral surfaces hold the structure. Cobalt tells people exactly where to act.
- Registry ready
- Four adapters
- AA contrast
Theme signal
AUR—01Clarityin motion.
DeploymentChanges published
4 core signals
System logic
Designed to disappear at the right moments.
Aurora gives product teams enough personality to feel owned, without asking the interface to compete with the work inside it.
Useful color
Cobalt appears only where a person can act, so focus and hierarchy stay obvious.
Shared behavior
Every interaction carries the same hover, press, focus, loading, and success language.
Live component lab
One button. Three primitive systems.
Switch the implementation, then interact with the component. The visual contract stays identical across every adapter.
Button / primary / medium
theme-auroraImplementation
InteractiveRadix
Hover, focus, or click to preview
- Default
- Hover
- Focus
- Active
- Loading
- Success
Foundation
A small palette with clear responsibilities.
Six core colors create the page hierarchy. Semantic aliases keep component decisions consistent as the product grows.
Light
Light
Light
Light
Dark
Blue
Display / TomorrowAa
Interface / Geist
Clear controls. Quiet surfaces. Visible state.
Utility / Geist Mono
--color-accent: #2667ff;Installation
Start with the system. Add only what you need.
Install the theme tokens once, then choose the button adapter that matches your existing component foundation.
Read component documentation01 · Theme foundationColor, type, space, radius, and motion tokens
npx shadcn add http://localhost:3000/r/aurora-theme.json02 · Button componentDefault button adapter and every interaction state
npx shadcn add http://localhost:3000/r/aurora-button.json