1---
2name: "Aurora Glass"
3description: "Extreme glassmorphism. Translucent panes float on a vivid aurora mesh — ultramarine, magenta, and mint cyan, blurred to 40px with 200% saturation. Every surface — cards, CTAs, even the primary button — is frosted glass. Nothing is opaque."
4tags: [dark, glass, premium, saas]
5colors:
6  primary:   "#F4F7FB"
7  secondary: "#A6B0C2"
8  tertiary:  "#7DF9D6"
9  neutral:   "#04050B"
10  surface:   "#0A0D18"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.25rem / 1.04 / 600 / -0.035em"
17    h1:   "2.75rem / 1.08 / 600 / -0.03em"
18    h2:   "1.625rem / 1.2 / 500 / -0.02em"
19    body: "1rem / 1.55 / 400 / -0.005em"
20radius:
21  sm: 12px
22  md: 18px
23  lg: 26px
24  pill: 9999px
25shadows:
26  card:   "0 30px 80px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18)"
27  button: "0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22)"
28borders:
29  card:    "1px solid rgba(255, 255, 255, 0.10)"
30  divider: "rgba(255, 255, 255, 0.08)"
31glass:
32  surface: "rgba(255, 255, 255, 0.06)"
33  blur:    40px
34  saturate: 200%
35  border:  "1px solid rgba(255, 255, 255, 0.18)"
36  shadow:  "0 30px 80px -20px rgba(0, 0, 0, 0.65)"
37  inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04)"
38  backdrop: "radial-gradient(at 12% 18%, rgba(125, 249, 214, 0.55) 0%, transparent 42%), radial-gradient(at 88% 22%, rgba(167, 139, 250, 0.60) 0%, transparent 48%), radial-gradient(at 78% 82%, rgba(244, 114, 182, 0.50) 0%, transparent 46%), radial-gradient(at 22% 88%, rgba(96, 165, 250, 0.50) 0%, transparent 48%), radial-gradient(at 50% 50%, rgba(192, 132, 252, 0.25) 0%, transparent 60%), #04050B"
39buttons:
40  primary:
41    background: rgba(125, 249, 214, 0.22)
42    color: #F4F7FB
43    border: 1px solid rgba(125, 249, 214, 0.45)
44    shape: pill
45    padding: 12px 24px
46    font: 600 / 0.9375rem / -0.01em
47    shadow: 0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28)
48    backdrop_blur: 32px
49    backdrop_saturate: 200%
50  secondary:
51    background: rgba(255, 255, 255, 0.10)
52    color: #F4F7FB
53    border: 1px solid rgba(255, 255, 255, 0.22)
54    shape: pill
55    padding: 12px 24px
56    font: 600 / 0.9375rem / -0.01em
57    shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18)
58    backdrop_blur: 32px
59    backdrop_saturate: 180%
60  outline:
61    background: rgba(255, 255, 255, 0.04)
62    color: #F4F7FB
63    border: 1px solid rgba(255, 255, 255, 0.18)
64    shape: pill
65    padding: 11px 22px
66    font: 500 / 0.9375rem / -0.01em
67    backdrop_blur: 24px
68    backdrop_saturate: 160%
69  ghost:
70    background: transparent
71    color: rgba(244, 247, 251, 0.72)
72    border: none
73    shape: pill
74    padding: 11px 16px
75    font: 500 / 0.9375rem
76    hover: glow
77charts:
78  variant: line
79  stroke_width: 2
80  gridlines: false
81  highlight: last
82  dot_marker: true
83  axis_color: "#5C6478"
84  palette: ["#7DF9D6", "#A78BFA", "#F472B6"]
85fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
86dependencies: ["lucide-react"]
87---
88 
89# Aurora Glass
90 
91## AI Build Instructions
92 
93> **Read this section before writing any code.** The rules below
94> are non-negotiable. Every value used in the UI must come from this
95> file's frontmatter — never substitute, approximate, or invent new
96> colors, fonts, radii, or shadows. If a value is missing, ask the
97> user before adding one.
98 
99### 1 · Your role
100 
101You are building UI for a project that has adopted **Aurora Glass** as its
102design system. Treat `DESIGN.md` as the single source of truth.
103Your job is to translate the user's product requirements into
104components and pages that look like they were designed by the same
105person who authored this file.
106 
107### 2 · Token compliance
108 
109- Pull every color, font family, radius, shadow, and spacing value
110  from the frontmatter at the top of this file.
111- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
112  hard-code hex values that bypass the system.
113- When a token can be expressed as a CSS variable, declare it once
114  in your global stylesheet and reference it everywhere downstream.
115- The Google Fonts `<link>` is provided in the Typography section.
116  Add it to `<head>` before any component renders.
117 
118### 3 · Component recipes
119 
120Use these recipes verbatim when building the corresponding component.
121 
122#### Buttons
123 
124Four variants are defined. Pick one — never blend variants or invent a fifth.
125 
126- **Primary** — pill shape, bg `rgba(125, 249, 214, 0.22)`, text `#F4F7FB`, border `1px solid rgba(125, 249, 214, 0.45)`, padding `12px 24px`, weight `600`, shadow `0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28)`.
127- **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.10)`, text `#F4F7FB`, border `1px solid rgba(255, 255, 255, 0.22)`, padding `12px 24px`, weight `600`, shadow `0 8px 24px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18)`.
128- **Outline** — pill shape, bg `rgba(255, 255, 255, 0.04)`, text `#F4F7FB`, border `1px solid rgba(255, 255, 255, 0.18)`, padding `11px 22px`, weight `500`.
129- **Ghost** — pill shape, text `rgba(244, 247, 251, 0.72)`, padding `11px 16px`, weight `500`.
130 
131Reach for **primary** as the single dominant CTA per screen.
132**Secondary** for the supporting action. **Outline** for tertiary
133actions in toolbars. **Ghost** for inline links and table actions.
134 
135#### Cards
136 
137- Background: `#0A0D18`
138- Border: `1px solid rgba(255, 255, 255, 0.10)`
139- Shadow: `0 30px 80px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18)`
140- Radius: `radius.lg` (`26px`)
141- Internal padding: `20px` for compact cards, `24–28px` for content cards.
142 
143> This system ships a **glass treatment** — see the Glass token table.
144> Apply `backdrop-filter: blur(40px)` to translucent panes.
145> The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract.
146 
147#### Charts
148 
149- Bar/line variant: `line`
150- No gridlines — let the bars/lines carry the data.
151- Highlight strategy: `last` — emphasize a single bar/point per chart.
152- Use the declared palette in order: `#7DF9D6`, `#A78BFA`, `#F472B6`.
153 
154#### Typography pairings
155 
156- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
157- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
158- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
159 
160### 4 · Hard constraints
161 
162Never do any of the following without explicit instruction from the user:
163 
164- Introduce a new color, font, radius, or shadow that isn't declared above.
165- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
166- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
167- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
168- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
169 
170### 5 · Before you finish — verify
171 
172Run through this checklist for every screen you produce:
173 
174- [ ] Every color used appears in the Colors table above.
175- [ ] Headlines use the display font; body copy uses the body font.
176- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
177- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
178- [ ] Cards and dividers use the declared border + shadow tokens.
179- [ ] No values were invented; if you needed something missing, you stopped and asked.
180 
181---
182 
183## Overview
184Aurora Glass is the extreme end of glassmorphism. **Every surface that matters is translucent** — cards at 6% opacity, buttons at 10–22%, all sitting on a 40px backdrop blur with 200% saturation. Underneath, a five-orb aurora mesh in mint, violet, rose, and ultramarine. There are no opaque surfaces in this system. Even the primary CTA is frosted mint glass.
185 
186This is the iOS 17 / visionOS material language at full intensity: real backdrop-filter, layered transparency, hairline gloss on every top edge, vivid colored light passing through every pane.
187 
188## Atmosphere
189- The page background is a **vivid aurora mesh** — five radial orbs (mint, violet, rose, blue, purple) layered over near-black `#04050B`. It is loud on purpose; the glass tames it.
190- Cards are **panes**, not boxes. They float at 6% opacity. They refract every color behind them. They never have a solid fill.
191- Buttons are **frosted pills** — even the primary, which is mint-tinted glass at 22% with a 32px backdrop blur. Solid CTAs are forbidden.
192- Borders are **bright hairlines** — 18% white on cards, 22% white on secondary buttons, 45% mint on the primary. They catch the light from the gloss above.
193- Shadows are **deep and far** (80px blur, -20px y) and always paired with a 1px inner top highlight. That combination is what creates the floating-pane illusion.
194 
195## Typography
196**Inter** at every level — chosen because it holds up at -3.5% tracking on display sizes without losing legibility on translucent surfaces. The hero compresses; the body breathes.
197 
198| Role | Size      | Weight | Tracking  |
199|------|-----------|--------|-----------|
200| Hero | 4.25rem   | 600    | -0.035em  |
201| H1   | 2.75rem   | 600    | -0.03em   |
202| H2   | 1.625rem  | 500    | -0.02em   |
203| Body | 1rem      | 400    | -0.005em  |
204 
205Display weight is **600** — never 700. Glass surfaces eat contrast; over-bold text shouts.
206 
207## Color
208- **Aurora Mint #7DF9D6** — used as a glass tint on the primary CTA and as the chart accent. Never as a solid fill.
209- **Violet #A78BFA**, **Rose #F472B6**, **Blue #60A5FA**, **Purple #C084FC** — these only exist inside the backdrop mesh. They are light, not ink.
210- **Ink #F4F7FB** — primary text, slightly cool. Reads cleanly through every level of frost.
211- **Mid #A6B0C2** — captions, tested to remain legible through 6% glass at 40px blur.
212 
213## Buttons
214All four variants are frosted glass. **There are no solid buttons in this system.**
215 
216- **Primary** — mint-tinted glass pill, 22% mint background, 32px backdrop blur, 200% saturation, 45% mint hairline border, mint-glow shadow. The most visible CTA — but still glass.
217- **Secondary** — neutral frosted pill, 10% white, 32px blur, bright hairline.
218- **Outline** — whisper-glass, 4% white, hairline border, 24px blur. Almost invisible until you hover.
219- **Ghost** — bare label, no surface. For chrome only.
220 
221All four are **pills** (9999px). Sharp corners are forbidden anywhere in this system.
222 
223## Charts & Data
224Single mint stepped-line over the aurora with a dot marker at the latest value. **No gridlines** — the aurora provides depth, the line provides signal. Axis labels in cool grey `#5C6478`.
225 
226## Do's and Don'ts
227- ✅ Always render the aurora backdrop. Without it, glass is just a grey tint.
228- ✅ Every surface — cards, CTAs, inputs — must use `backdrop-filter: blur(...)`. No exceptions.
229- ✅ Pair every glass surface with a bright top-edge highlight (1px white at 18–22%). That is the difference between glass and plexiglass.
230- ✅ Keep card opacity ≤ 8%, button opacity ≤ 22%. More opaque = plastic.
231- ❌ No solid CTAs. The primary button is mint-tinted glass, not solid mint.
232- ❌ No sharp corners. 26px on cards, pill on buttons, period.
233- ❌ No drop-shadow without an inner highlight. Half of it is half wrong.
234- ❌ No magenta/rose/violet ink. Those colors live in the backdrop only.
235 
236---
237 
238## Tokens
239 
240> Generated from the same source the live preview renders from.
241> Treat the values below as the contract — never substitute approximations.
242 
243### Colors
244 
245| Role      | Value |
246|-----------|-------|
247| primary   | `#F4F7FB` |
248| secondary | `#A6B0C2` |
249| tertiary  | `#7DF9D6` |
250| neutral   | `#04050B` |
251| surface   | `#0A0D18` |
252 
253### Typography
254 
255- **Display:** Inter
256- **Body:** Inter
257- **Mono:** JetBrains Mono
258 
259| Role | size / leading / weight / tracking |
260|------|------------------------------------|
261| Hero | 4.25rem / 1.04 / 600 / -0.035em |
262| H1   | 2.75rem / 1.08 / 600 / -0.03em |
263| H2   | 1.625rem / 1.2 / 500 / -0.02em |
264| Body | 1rem / 1.55 / 400 / -0.005em |
265 
266### Radius
267 
268- sm: `12px`
269- md: `18px`
270- lg: `26px`
271- pill: `9999px`
272 
273### Shadows
274 
275- **card:** `0 30px 80px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18)`
276- **button:** `0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22)`
277 
278### Borders
279 
280- **card:** `1px solid rgba(255, 255, 255, 0.10)`
281- **divider:** `rgba(255, 255, 255, 0.08)`
282 
283### Glass
284 
285Translucent panes with backdrop-filter — the preview renders cards from these exact values.
286 
287| Property | Value |
288|----------|-------|
289| surface | `rgba(255, 255, 255, 0.06)` |
290| blur | `40px` |
291| saturate | `200%` |
292| border | `1px solid rgba(255, 255, 255, 0.18)` |
293| shadow | `0 30px 80px -20px rgba(0, 0, 0, 0.65)` |
294| innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04)` |
295| backdrop | `radial-gradient(at 12% 18%, rgba(125, 249, 214, 0.55) 0%, transparent 42%), radial-gradient(at 88% 22%, rgba(167, 139, 250, 0.60) 0%, transparent 48%), radial-gradient(at 78% 82%, rgba(244, 114, 182, 0.50) 0%, transparent 46%), radial-gradient(at 22% 88%, rgba(96, 165, 250, 0.50) 0%, transparent 48%), radial-gradient(at 50% 50%, rgba(192, 132, 252, 0.25) 0%, transparent 60%), #04050B` |
296 
297### Buttons
298 
299Four variants, each fully tokenized. The preview renders from these exact values.
300 
301#### Primary
302 
303| Property | Value |
304|----------|-------|
305| shape | `pill` |
306| background | `rgba(125, 249, 214, 0.22)` |
307| color | `#F4F7FB` |
308| border | `1px solid rgba(125, 249, 214, 0.45)` |
309| padding | `12px 24px` |
310| fontWeight | `600` |
311| fontSize | `0.9375rem` |
312| tracking | `-0.01em` |
313| shadow | `0 12px 32px -8px rgba(125, 249, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28)` |
314| backdropBlur | `32px` |
315| backdropSaturate | `200%` |
316 
317#### Secondary
318 
319| Property | Value |
320|----------|-------|
321| shape | `pill` |
322| background | `rgba(255, 255, 255, 0.10)` |
323| color | `#F4F7FB` |
324| border | `1px solid rgba(255, 255, 255, 0.22)` |
325| padding | `12px 24px` |
326| fontWeight | `600` |
327| fontSize | `0.9375rem` |
328| tracking | `-0.01em` |
329| shadow | `0 8px 24px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18)` |
330| backdropBlur | `32px` |
331| backdropSaturate | `180%` |
332 
333#### Outline
334 
335| Property | Value |
336|----------|-------|
337| shape | `pill` |
338| background | `rgba(255, 255, 255, 0.04)` |
339| color | `#F4F7FB` |
340| border | `1px solid rgba(255, 255, 255, 0.18)` |
341| padding | `11px 22px` |
342| fontWeight | `500` |
343| fontSize | `0.9375rem` |
344| tracking | `-0.01em` |
345| backdropBlur | `24px` |
346| backdropSaturate | `160%` |
347 
348#### Ghost
349 
350| Property | Value |
351|----------|-------|
352| shape | `pill` |
353| background | `transparent` |
354| color | `rgba(244, 247, 251, 0.72)` |
355| border | `none` |
356| padding | `11px 16px` |
357| fontWeight | `500` |
358| fontSize | `0.9375rem` |
359| hoverHint | `glow` |
360 
361### Charts
362 
363| Property | Value |
364|----------|-------|
365| variant | `line` |
366| strokeWidth | `2` |
367| gridlines | `false` |
368| highlight | `last` |
369| dotMarker | `true` |
370| axisColor | `#5C6478` |
371| palette | `#7DF9D6`, `#A78BFA`, `#F472B6` |
372 
373---
374 
375## Pro tokens
376 
377> Production-fidelity tokens. States, density, motion, elevation,
378> content rules and a measured WCAG contract — derived from the
379> resting tokens unless explicitly authored.
380 
381### States
382 
383#### Button
384 
385- **hover** — shadow: `0 8px 24px -8px rgba(125, 249, 214, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)`
386- **focus** — outline: `2px solid rgba(125, 249, 214, 0.5)`, outline-offset: `3px`
387- **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)`
388- **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)`
389- **loading** — opacity: `0.7`
390- **selected** — bg: `rgba(125, 249, 214, 0.18)`, color: `#7DF9D6`
391 
392#### Input
393 
394- **hover** — border: `1px solid rgba(125, 249, 214, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)`
395- **focus** — border: `1px solid rgba(125, 249, 214, 0.65)`, shadow: `0 0 0 4px rgba(125, 249, 214, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)`
396- **disabled** — opacity: `0.4`
397- **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)`
398 
399#### Card
400 
401- **hover** — shadow: `0 16px 48px -16px rgba(125, 249, 214, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)`
402- **selected** — border: `1px solid rgba(125, 249, 214, 0.5)`
403- **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85`
404 
405#### Tab
406 
407- **hover** — bg: `rgba(125, 249, 214, 0.08)`
408- **focus** — outline: `2px solid rgba(125, 249, 214, 0.5)`, outline-offset: `2px`
409- **selected** — bg: `rgba(125, 249, 214, 0.18)`, color: `#7DF9D6`
410 
411### Density
412 
413| Mode | padding × | row × | body | radius × | Use for |
414|------|-----------|-------|------|----------|---------|
415| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
416| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
417| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
418 
419### Motion
420 
421**Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface.
422 
423```css
424transition: opacity 350ms cubic-bezier(0.32, 0.72, 0, 1), backdrop-filter 350ms cubic-bezier(0.32, 0.72, 0, 1), transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
425```
426 
427| Token | Value |
428|-------|-------|
429| duration.instant | `100ms` |
430| duration.fast | `200ms` |
431| duration.base | `350ms` |
432| duration.slow | `550ms` |
433| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
434| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
435| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
436| easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` |
437 
438### Elevation
439 
440Five-level scale, system-specific recipe.
441 
442| Level | Shadow | Recipe |
443|-------|--------|--------|
444| level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. |
445| level1 | `0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. |
446| level2 | `0 12px 32px -8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. |
447| level3 | `0 24px 64px -16px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(125, 249, 214, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. |
448| level4 | `0 40px 96px -24px rgba(0, 0, 0, 0.5), 0 0 48px -12px rgba(125, 249, 214, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. |
449 
450### Content
451 
452- **measure:** `66ch` (max line length for body prose)
453- **paragraph spacing:** `1.25em`
454- **list indent:** `1.5em`
455- **list gap:** `0.5em`
456- **link:** color `#7DF9D6`, underline `hover`
457- **blockquote:** border `1px solid rgba(125, 249, 214, 0.4)`, padding `0.9em 1.2em`
458- **code:** background `rgba(125, 249, 214, 0.1)`, color `#7DF9D6`
459 
460### Accessibility (WCAG 2.1)
461 
462**Overall:** AAA
463 
464| Pair | Ratio | Required | Grade | Suggested fix |
465|------|-------|----------|-------|---------------|
466| Body text on surface | 18.04:1 | AA | AAA | — |
467| Body text on canvas | 18.94:1 | AA | AAA | — |
468| Muted text on surface | 8.87:1 | AA | AAA | — |
469| Accent on surface | 15.13:1 | AA-Large | AAA | — |
470| Accent on canvas | 15.89:1 | AA-Large | AAA | — |
471