Aurora
Soft glassmorphic theme with violet glow.
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. Plus Jakarta Sans 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 the violet accent and soft pastel surfaces.
- •Round generously and keep spacing airy.
- •Tint shadows with the accent for a glow.
Don't
- •Don't use hard or black shadows.
- •Don't go sharp-cornered.
- •Don't overcrowd — let it breathe.
- •Glide and gently overshoot — motion should feel alive.
- •Use the emphasized spring for entrances.
Hover to feel this theme's base transition.
Lucide · 1.75px stroke · 1rem. Rounded 1.75px icons; tint chips with the violet accent.
- Check pastel text stays above 4.5:1.
- Honor reduced motion — the springs are decorative.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 1rem |
| Padding | 0.5rem 1rem |
| Height | 2.75rem |
| 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 | 700 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 1.5rem |
| 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 | 1rem |
| Height | 2.5rem |
| 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.4rem |
| Padding | 1.4rem |
| Shadow | 0 8px 28px -6px rgba(124,58,237,0.18) |
The design brief
Aurora is soft and glassy — violet light, generous radius, and gentle glow shadows.
Principles
- Pastel depth. Violet accents over near-white and deep plum, with blur-friendly surfaces.
- Round and friendly. A large radius and airy spacing keep it approachable.
- Glow, not gloom. Shadows are tinted with the accent for a luminous feel.
When to use
Consumer apps, AI products, onboarding, and playful marketing.
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: 1rem;
--background: #f7f7fb;
--foreground: #1e1b2e;
--card: #ffffff;
--card-foreground: #1e1b2e;
--popover: #ffffff;
--popover-foreground: #1e1b2e;
--primary: #7c3aed;
--primary-foreground: #ffffff;
--secondary: #f1eefb;
--secondary-foreground: #4c1d95;
--muted: #f1eefb;
--muted-foreground: #6b7280;
--accent: #ede9fe;
--accent-foreground: #5b21b6;
--destructive: #ef4444;
--border: #e9e4f5;
--input: #e9e4f5;
--ring: #a78bfa;
--shadow-sm: 0 2px 8px rgba(124,58,237,0.08);
--shadow-md: 0 8px 28px -6px rgba(124,58,237,0.18);
--shadow-lg: 0 20px 48px -10px rgba(124,58,237,0.28);
--font-sans: 'Plus Jakarta Sans', 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.34,1.56,0.64,1);
--duration-base: 300ms;
}
.dark {
--background: #14111f;
--foreground: #ece9f5;
--card: #1d1830;
--card-foreground: #ece9f5;
--popover: #1d1830;
--popover-foreground: #ece9f5;
--primary: #a78bfa;
--primary-foreground: #14111f;
--secondary: #241d38;
--secondary-foreground: #ddd6fe;
--muted: #241d38;
--muted-foreground: #a99fce;
--accent: #2a2140;
--accent-foreground: #ddd6fe;
--destructive: #f87171;
--border: #332a4d;
--input: #3a3057;
--ring: #8b5cf6;
}More designs
Brutalist
Loud neo-brutalist theme — hard edges, offset shadows.
Monolith
Pure-monochrome, dark-first UI for frontier products — black, white, and a precise gray ramp.
Nocturne
Calm, dark-first SaaS theme with a single indigo accent.