1---
2name: "Aurora Haze"
3description: "Warm grainy aurora applied with restraint — amber bleeds into coral and softens into violet, with real fractal-noise grain layered on top. Inter throughout, generous bone-white surfaces, and the gradient appears in exactly two places: the primary CTA and the featured hero tile. Everything else stays calm so the bloom carries."
4tags: [grainy, gradient, modern, premium, light]
5colors:
6  primary:   "#171419"
7  secondary: "#6b6470"
8  tertiary:  "#ef5a8a"
9  neutral:   "#fbf8f5"
10  surface:   "#ffffff"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 1.02 / 700 / -0.04em"
17    h1:   "2.75rem / 1.1 / 700 / -0.03em"
18    h2:   "1.625rem / 1.22 / 600 / -0.018em"
19    body: "1.0625rem / 1.6 / 400 / -0.005em"
20radius:
21  sm: 10px
22  md: 16px
23  lg: 22px
24  pill: 9999px
25shadows:
26  card:   "rgba(23,20,25,0.04) 0 1px 2px, rgba(23,20,25,0.06) 0 14px 36px -16px"
27  button: "rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px"
28borders:
29  card:    "1px solid rgba(23,20,25,0.06)"
30  divider: rgba(23,20,25,0.08)
31buttons:
32  primary:
33    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>"), radial-gradient(ellipse 90% 70% at 12% 88%, #ff8a4c 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 88% 12%, #c47bff 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 55% 50%, #ff6b9b 0%, transparent 60%), linear-gradient(135deg, #ffb27a 0%, #f06694 45%, #8c5cff 100%)
34    color: #ffffff
35    border: none
36    shape: rounded
37    padding: 12px 22px
38    font: 700 / 0.9375rem
39    shadow: rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px
40  secondary:
41    background: #171419
42    color: #fbf8f5
43    border: none
44    shape: rounded
45    padding: 12px 22px
46    font: 600 / 0.9375rem
47  outline:
48    background: transparent
49    color: #171419
50    border: 1px solid rgba(23,20,25,0.16)
51    shape: rounded
52    padding: 12px 22px
53    font: 600 / 0.9375rem
54  ghost:
55    background: transparent
56    color: #6b6470
57    border: none
58    shape: rounded
59    padding: 12px 18px
60    font: 600 / 0.9375rem
61charts:
62  variant: "rounded-bars"
63  stroke_width: 1.5
64  fill_opacity: 0.12
65  gridlines: false
66  bar_gap: 10px
67  dot_marker: true
68  palette: [rgba(23,20,25,0.10), rgba(23,20,25,0.10), rgba(23,20,25,0.10), "#f06694", rgba(23,20,25,0.10), rgba(23,20,25,0.10), rgba(23,20,25,0.10)]
69fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
70dependencies: ["lucide-react"]
71---
72 
73# Aurora Haze
74 
75## AI Build Instructions
76 
77> **Read this section before writing any code.** The rules below
78> are non-negotiable. Every value used in the UI must come from this
79> file's frontmatter — never substitute, approximate, or invent new
80> colors, fonts, radii, or shadows. If a value is missing, ask the
81> user before adding one.
82 
83### 1 · Your role
84 
85You are building UI for a project that has adopted **Aurora Haze** as its
86design system. Treat `DESIGN.md` as the single source of truth.
87Your job is to translate the user's product requirements into
88components and pages that look like they were designed by the same
89person who authored this file.
90 
91### 2 · Token compliance
92 
93- Pull every color, font family, radius, shadow, and spacing value
94  from the frontmatter at the top of this file.
95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
96  hard-code hex values that bypass the system.
97- When a token can be expressed as a CSS variable, declare it once
98  in your global stylesheet and reference it everywhere downstream.
99- The Google Fonts `<link>` is provided in the Typography section.
100  Add it to `<head>` before any component renders.
101 
102### 3 · Component recipes
103 
104Use these recipes verbatim when building the corresponding component.
105 
106#### Buttons
107 
108Four variants are defined. Pick one — never blend variants or invent a fifth.
109 
110- **Primary** — rounded shape, bg `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>"), radial-gradient(ellipse 90% 70% at 12% 88%, #ff8a4c 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 88% 12%, #c47bff 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 55% 50%, #ff6b9b 0%, transparent 60%), linear-gradient(135deg, #ffb27a 0%, #f06694 45%, #8c5cff 100%)`, text `#ffffff`, padding `12px 22px`, weight `700`, shadow `rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px`.
111- **Secondary** — rounded shape, bg `#171419`, text `#fbf8f5`, padding `12px 22px`, weight `600`.
112- **Outline** — rounded shape, text `#171419`, border `1px solid rgba(23,20,25,0.16)`, padding `12px 22px`, weight `600`.
113- **Ghost** — rounded shape, text `#6b6470`, padding `12px 18px`, weight `600`.
114 
115Reach for **primary** as the single dominant CTA per screen.
116**Secondary** for the supporting action. **Outline** for tertiary
117actions in toolbars. **Ghost** for inline links and table actions.
118 
119#### Cards
120 
121- Background: `#ffffff`
122- Border: `1px solid rgba(23,20,25,0.06)`
123- Shadow: `rgba(23,20,25,0.04) 0 1px 2px, rgba(23,20,25,0.06) 0 14px 36px -16px`
124- Radius: `radius.lg` (`22px`)
125- Internal padding: `20px` for compact cards, `24–28px` for content cards.
126 
127#### Tabs
128 
129Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
130 
131#### Charts
132 
133- Bar/line variant: `rounded-bars`
134- No gridlines — let the bars/lines carry the data.
135- Use the declared palette in order: `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `#f06694`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`.
136 
137#### Typography pairings
138 
139- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
140- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
141- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
142 
143### 4 · Hard constraints
144 
145Never do any of the following without explicit instruction from the user:
146 
147- Introduce a new color, font, radius, or shadow that isn't declared above.
148- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
149- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
150- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
151- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
152 
153### 5 · Before you finish — verify
154 
155Run through this checklist for every screen you produce:
156 
157- [ ] Every color used appears in the Colors table above.
158- [ ] Headlines use the display font; body copy uses the body font.
159- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
160- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
161- [ ] Cards and dividers use the declared border + shadow tokens.
162- [ ] No values were invented; if you needed something missing, you stopped and asked.
163 
164---
165 
166## 1. Atmosphere
167 
168Aurora Haze is a calm bone-white surface with one hot moment: a multi-stop grainy aurora gradient that runs amber → coral → soft violet, with real SVG fractal-noise grain layered on top. The gradient lives in exactly two places — the primary CTA and the featured hero tile — so it always reads as a deliberate bloom, never decoration. Inter carries every word at 400/600/700; numbers shift to JetBrains Mono. Surfaces are flat ivory, hairlines at 6% ink, generous white space.
169 
170The discipline is in placement: the gradient is never repeated on a third surface. Buttons that aren't the CTA fall back to graphite, outline, or ghost. The chart uses muted graphite bars except for one column rendered in coral — the visual rhyme tells you "this is the active value" without copy.
171 
172**Signature moves**
173- Multi-stop grainy gradient (amber → coral → violet) with **real fractal-noise grain** baked in via an inline SVG `feTurbulence` data URI
174- Gradient appears exactly twice per screen: primary CTA + featured hero tile
175- The **active bar** in the chart picks up the coral stop from the gradient — visual rhyme
176- Bone-white surface (`#fbf8f5`), hairlines at 6% ink, no decorative borders
177- Inter at every level — display 700, body 400, UI 600
178 
179## 2. The grainy gradient (copy this exactly)
180 
181The grain is not a Photoshop filter or a Tailwind class — it is an inline SVG with `feTurbulence` set to `fractalNoise`, baseFrequency `0.9`, two octaves, stitched. The noise layer sits **on top** of a stack of three radial-gradient blooms over a 135° linear base. Stop order matters.
182 
183```css
184background:
185  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>"),
186  radial-gradient(ellipse 90% 70% at 12% 88%, #ff8a4c 0%, transparent 55%),
187  radial-gradient(ellipse 70% 80% at 88% 12%, #c47bff 0%, transparent 55%),
188  radial-gradient(ellipse 50% 60% at 55% 50%, #ff6b9b 0%, transparent 60%),
189  linear-gradient(135deg, #ffb27a 0%, #f06694 45%, #8c5cff 100%);
190```
191 
192The `feColorMatrix` reduces the noise to alpha-only (no color shift), so the grain darkens the gradient instead of tinting it. The 0.55 opacity is the calibrated value — anything higher reads as "dirty," anything lower disappears on retina screens.
193 
194### Stop palette
195- **Amber bloom** `#ff8a4c` — bottom-left anchor
196- **Violet bloom** `#c47bff` — top-right counter-anchor
197- **Coral core** `#ff6b9b` — center bloom, 60% reach
198- **Linear base** `#ffb27a → #f06694 → #8c5cff` at 135°
199 
200## 3. Palette
201 
202### Surface
203- **Bone** `#fbf8f5` — page background
204- **Snow** `#ffffff` — cards, sheets
205 
206### Ink
207- **Ink** `#171419` — text, headings, secondary CTA fill
208- **Ink 55** `#6b6470` — secondary text, mono labels
209- **Hairline** `rgba(23,20,25,0.06)` — every divider
210 
211### Accent (single)
212- **Coral** `#ef5a8a` — picked from the gradient's mid stop, used for active tab underline + active chart bar
213 
214## 4. Typography
215 
216| Role | Font | Size | Weight | Leading | Tracking |
217|------|------|------|--------|---------|----------|
218| Hero | Inter | 72px | 700 | 1.02 | -0.04em |
219| H1 | Inter | 44px | 700 | 1.10 | -0.03em |
220| H2 | Inter | 26px | 600 | 1.22 | -0.018em |
221| Body | Inter | 17px | 400 | 1.6 | -0.005em |
222| UI / Button | Inter | 15px | 700 | 1.4 | 0 |
223| Number | JetBrains Mono | 13px | 500 | 1.0 | 0 |
224 
225Inter at three weights only — 400, 600, 700. The 800 weight is reserved for the optional oversized gradient KPI inside the featured tile.
226 
227## 5. Buttons
228 
229### Primary (Grainy Gradient Box)
230A solid box (not a pill) with the full grainy-gradient stack as background, white label, no border. The drop shadow uses two layered colored shadows that pick the coral and violet stops — they bloom under the button like a soft halo.
231 
232```css
233background: /* the full grainy gradient stack from §2 */;
234color: #ffffff;
235padding: 12px 22px;
236border-radius: 16px;
237box-shadow:
238  rgba(240,102,148,0.28) 0 10px 24px -10px,
239  rgba(140,92,255,0.22) 0 6px 18px -8px;
240font: 700 15px/1.4 Inter;
241```
242 
243### Secondary (Graphite Box)
244Solid ink `#171419`, bone label, same 16px radius, no shadow. The graphite-on-bone pairs cleanly with the gradient without competing.
245 
246### Outline & Ghost
247- Outline: transparent, 1px hairline at 16% ink
248- Ghost: no border, ink-55, hover lifts to ink
249 
250## 6. The Featured tile
251 
252The featured hero tile uses the **same exact gradient stack** as the primary CTA. White display headline at 32px in Inter 700, label "Featured" in mono at 11px uppercase 0.12em tracking. No badge, no icon — the gradient does the work.
253 
254## 7. Charts
255 
256Rounded bars (pill ends), 10px gap. Six bars in graphite at 10% opacity, **one bar in coral** `#f06694` (the gradient's mid stop). The eye reads the coral bar as the active value because it visually rhymes with the CTA — no separate legend needed.
257 
258## 8. Tabs
259 
260Underline 1.5px in coral. Inactive tabs in Inter 600 ink-55. Hover lifts to ink. Active = ink + coral underline.
261 
262## 9. Spacing
263 
264- Base 4px
265- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`
266- Section padding: 96px desktop, 48px mobile
267 
268## 10. Do's & don'ts
269 
270✅ **Do**
271- Use the full grainy-gradient stack from §2 verbatim — the noise layer is what makes it expensive
272- Apply the gradient exactly twice per screen: primary CTA + featured tile
273- Pick the active chart bar from the gradient's coral stop so it rhymes with the CTA
274- Layer two colored shadows under the gradient button — coral + violet, low opacity, wide spread
275 
276❌ **Don't**
277- Apply the gradient to a third surface (cards, secondary buttons, headers) — it loses its weight
278- Use a 2-stop gradient (e.g. peach → pink) — this system is multi-stop with grain, never the cliché
279- Skip the SVG noise layer — without grain the gradient reads as generic
280- Use coral anywhere except active states (chart bar, tab underline) — the gradient owns the bloom
281 
282---
283 
284## Tokens
285 
286> Generated from the same source the live preview renders from.
287> Treat the values below as the contract — never substitute approximations.
288 
289### Colors
290 
291| Role      | Value |
292|-----------|-------|
293| primary   | `#171419` |
294| secondary | `#6b6470` |
295| tertiary  | `#ef5a8a` |
296| neutral   | `#fbf8f5` |
297| surface   | `#ffffff` |
298 
299### Typography
300 
301- **Display:** Inter
302- **Body:** Inter
303- **Mono:** JetBrains Mono
304 
305| Role | size / leading / weight / tracking |
306|------|------------------------------------|
307| Hero | 4.5rem / 1.02 / 700 / -0.04em |
308| H1   | 2.75rem / 1.1 / 700 / -0.03em |
309| H2   | 1.625rem / 1.22 / 600 / -0.018em |
310| Body | 1.0625rem / 1.6 / 400 / -0.005em |
311 
312### Radius
313 
314- sm: `10px`
315- md: `16px`
316- lg: `22px`
317- pill: `9999px`
318 
319### Shadows
320 
321- **card:** `rgba(23,20,25,0.04) 0 1px 2px, rgba(23,20,25,0.06) 0 14px 36px -16px`
322- **button:** `rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px`
323 
324### Borders
325 
326- **card:** `1px solid rgba(23,20,25,0.06)`
327- **divider:** `rgba(23,20,25,0.08)`
328 
329### Buttons
330 
331Four variants, each fully tokenized. The preview renders from these exact values.
332 
333#### Primary
334 
335| Property | Value |
336|----------|-------|
337| shape | `rounded` |
338| background | `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>"), radial-gradient(ellipse 90% 70% at 12% 88%, #ff8a4c 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 88% 12%, #c47bff 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 55% 50%, #ff6b9b 0%, transparent 60%), linear-gradient(135deg, #ffb27a 0%, #f06694 45%, #8c5cff 100%)` |
339| color | `#ffffff` |
340| border | `none` |
341| padding | `12px 22px` |
342| fontWeight | `700` |
343| fontSize | `0.9375rem` |
344| shadow | `rgba(240,102,148,0.28) 0 10px 24px -10px, rgba(140,92,255,0.22) 0 6px 18px -8px` |
345 
346#### Secondary
347 
348| Property | Value |
349|----------|-------|
350| shape | `rounded` |
351| background | `#171419` |
352| color | `#fbf8f5` |
353| border | `none` |
354| padding | `12px 22px` |
355| fontWeight | `600` |
356| fontSize | `0.9375rem` |
357 
358#### Outline
359 
360| Property | Value |
361|----------|-------|
362| shape | `rounded` |
363| background | `transparent` |
364| color | `#171419` |
365| border | `1px solid rgba(23,20,25,0.16)` |
366| padding | `12px 22px` |
367| fontWeight | `600` |
368| fontSize | `0.9375rem` |
369 
370#### Ghost
371 
372| Property | Value |
373|----------|-------|
374| shape | `rounded` |
375| background | `transparent` |
376| color | `#6b6470` |
377| border | `none` |
378| padding | `12px 18px` |
379| fontWeight | `600` |
380| fontSize | `0.9375rem` |
381 
382### Charts
383 
384| Property | Value |
385|----------|-------|
386| variant | `rounded-bars` |
387| strokeWidth | `1.5` |
388| fillOpacity | `0.12` |
389| gridlines | `false` |
390| barGap | `10px` |
391| dotMarker | `true` |
392| palette | `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `#f06694`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)`, `rgba(23,20,25,0.10)` |
393