Core Principles
The Aurora Design Language balances personality with restraint. Spacing and type set rhythm, color supports—not shouts—and motion communicates intent. We aim for predictable patterns that scale from landing pages to dense product surfaces.
“Good design is as little design as possible—leave only what adds meaning, remove the rest.”
Design Tokens
Tokens are the single source of truth for spacing, color, and type. Start small and name by purpose, not presentation.
// tokens.ts
export const tokens = {
radius: { sm: 8, md: 16, lg: 24 },
space: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
shadow: {
soft: '0 1px 2px rgba(0,0,0,0.06)',
lift: '0 10px 30px rgba(99,102,241,0.12)',
},
color: {
brand: '#4f46e5',
ink: '#0a0a0a',
muted: '#6b7280',
canvas: '#ffffff',
},
};Components & States
Every component needs a clear default, hover, active, and disabled state. Keep focus styles visible and consistent across inputs and buttons.
Card
Use cards to group related content. Keep padding generous and vary type sizes to create hierarchy.
Interactive List Item
Increase hit area, maintain 44px min height, and show hover/focus affordances.
Accessibility
- Maintain 4.5:1 contrast for body text; 3:1 for large text.
- Use semantic HTML: headings in order, labeled inputs, real buttons/links.
- Focus rings must be visible on keyboard navigation.
- Never convey meaning by color alone.
Implementation Notes
Tailwind gives us a pragmatic baseline. Favor utility classes for layout, and elevate shared patterns into components. Keep CSS surface area small and token-driven.
