Design Principles
Airo UI doesn't compete on feature breadth — it focuses on refining the "feel." These five principles run through the entire library.
1. Fluid Spring Animations
All state transitions use spring easing curves, rejecting rigid linear transitions.
- Checkbox:
scale(1.12)bounce on check - Switch thumb: follows
cubic-bezier(0.34, 1.56, 0.64, 1) - Input focus: border expands with subtle spring
2. Restraint Is Power
Neutral colors form the skeleton with a single accent color throughout. Transparency creates hierarchy without visual noise.
3. Whitespace Is Design
Spacing strictly follows a 4px grid (--space-1 through --space-12). Generous whitespace isn't emptiness — it's rhythm.
4. Every Detail Exposed
Minimalism doesn't tolerate roughness. Radii, borders, and font sizes are all meticulously tuned — four radius tiers, systematic type scale.
5. Overridable by Default
All design tokens are exposed as CSS variables. Users can rebrand with a single line — no forking required.