Aero
An airy sky-blue theme: soft glass surfaces, pastel accents, and rounded controls for calm, friendly product UIs.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Manrope carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Lean on whitespace and high radii for an airy feel.
- •Keep the sky-blue primary as the one clear call to action.
Don't
- •Don't crowd the layout — air is the point.
- •Don't use heavy, dark shadows.
- •Float elements in with soft, buoyant easing.
Hover to feel this theme's base transition.
Lucide · 1.5px stroke · 1rem. Outline icons with a consistent stroke width; size icons to match adjacent text and align them optically.
- Never use color as the only signal — pair it with text, an icon, or a shape.
- Every interactive element must be keyboard reachable and show a visible focus ring.
- Honor prefers-reduced-motion: reduce by disabling non-essential animation.
- Keep a logical heading order and give every form control a label.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.875rem |
| Padding | 0 1.15rem |
| Height | 2.6rem |
| Weight | 600 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 9999px |
| Padding | 0.15rem 0.55rem |
| Font size | 0.75rem |
| Weight | 600 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 1.313rem |
| Padding | 1rem 1.25rem |
| Border | 1px solid var(--border) |
Always pair the color with an icon and a text label — never rely on color alone.
Form field
| Background | var(--background) |
| Border | 1px solid var(--input) |
| Radius | 0.875rem |
| Height | 2.6rem |
| Padding | 0.5rem 0.75rem |
Label sits above the field; helper or error text sits below.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 1.25rem |
| Padding | 1.5rem |
| Shadow | 0 12px 32px -10px rgba(3,105,161,0.18) |
The design brief
Aero is an airy, sky-blue design system with soft glass surfaces and pastel accents. It feels calm and friendly — good for consumer SaaS, onboarding, and wellness or fintech apps that want approachability.
Principles
- Light and weightless — high radii, gentle shadows, lots of whitespace.
- A clear sky-blue primary keeps actions obvious inside the softness.
- Pastel accents stay quiet so the UI never feels noisy.
When to use
Use Aero for consumer apps, onboarding flows, and friendly fintech or health products. Avoid it for dense, expert-facing dashboards that need compact density.
Signature details
- Sky
#0369a1primary; pale#e0f2feaccent. - Manrope, 0.875rem radius, glassy elevation.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0.875rem;
--background: #fbfdff;
--foreground: #0c2435;
--card: #ffffff;
--card-foreground: #0c2435;
--popover: #ffffff;
--popover-foreground: #0c2435;
--primary: #0369a1;
--primary-foreground: #ffffff;
--secondary: #eff8ff;
--secondary-foreground: #0c2435;
--muted: #eef5fb;
--muted-foreground: #4b6a80;
--accent: #e0f2fe;
--accent-foreground: #075985;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--border: #dfeaf2;
--input: #dfeaf2;
--ring: #0369a1;
--shadow-sm: 0 1px 3px rgba(12,36,53,0.06);
--shadow-md: 0 12px 32px -10px rgba(3,105,161,0.18);
--shadow-lg: 0 28px 60px -16px rgba(3,105,161,0.24);
--font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: cubic-bezier(0.4,0,0.2,1);
--ease-emphasized: cubic-bezier(0.16,1,0.3,1);
--duration-base: 260ms;
}
.dark {
--background: #07121c;
--foreground: #e3f0fb;
--card: #0f1f2e;
--card-foreground: #e3f0fb;
--popover: #0f1f2e;
--popover-foreground: #e3f0fb;
--primary: #38bdf8;
--primary-foreground: #082f49;
--secondary: #152a3c;
--secondary-foreground: #e3f0fb;
--muted: #152a3c;
--muted-foreground: #8fb2cc;
--accent: #0c4a6e;
--accent-foreground: #e0f2fe;
--destructive: #f87171;
--destructive-foreground: #450a0a;
--border: #1d3950;
--input: #1d3950;
--ring: #38bdf8;
}More designs
Nocturne
Calm, dark-first SaaS theme with a single indigo accent.
Slate Pro
A neutral slate workhorse theme: balanced greys, restrained accent, built for dense SaaS interfaces that should disappear.
Mint Console
A fresh emerald analytics theme: clean whites, a green primary, and crisp type for metrics, monitoring, and growth dashboards.