1---
2name: "Nebula Drift"
3description: "A near-black dark canvas where one cosmic grainy gradient does all the talking — deep indigo bleeds into magenta and ignites into warm amber, with real fractal-noise grain layered on top. Inter throughout, hairlines at 8% white, and the gradient burns through the primary CTA, the featured hero tile, and the active chart bar. Quiet space, hot bloom."
4tags: [grainy, gradient, dark, modern, premium]
5colors:
6  primary:   "#f5f3ff"
7  secondary: "#9690b8"
8  tertiary:  "#e2399a"
9  neutral:   "#0a0814"
10  surface:   "#13101f"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.75rem / 1 / 700 / -0.04em"
17    h1:   "2.875rem / 1.08 / 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(0,0,0,0.4) 0 1px 2px, rgba(0,0,0,0.5) 0 18px 44px -18px"
27  button: "rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px"
28borders:
29  card:    "1px solid rgba(245,243,255,0.06)"
30  divider: rgba(245,243,255,0.08)
31buttons:
32  primary:
33    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' 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.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"), radial-gradient(ellipse 75% 60% at 15% 85%, #ff8a3d 0%, transparent 55%), radial-gradient(ellipse 70% 75% at 85% 18%, #4a3cff 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 58% 50%, #e2399a 0%, transparent 60%), linear-gradient(140deg, #2a1a6c 0%, #c92e8c 50%, #ff8a3d 100%)
34    color: #ffffff
35    border: none
36    shape: rounded
37    padding: 13px 24px
38    font: 700 / 0.9375rem / -0.01em
39    shadow: rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px
40  secondary:
41    background: rgba(245,243,255,0.08)
42    color: #f5f3ff
43    border: 1px solid rgba(245,243,255,0.10)
44    shape: rounded
45    padding: 13px 24px
46    font: 600 / 0.9375rem
47  outline:
48    background: transparent
49    color: #f5f3ff
50    border: 1px solid rgba(245,243,255,0.18)
51    shape: rounded
52    padding: 13px 24px
53    font: 600 / 0.9375rem
54  ghost:
55    background: transparent
56    color: #9690b8
57    border: none
58    shape: rounded
59    padding: 13px 18px
60    font: 600 / 0.9375rem
61charts:
62  variant: "rounded-bars"
63  stroke_width: 1.5
64  fill_opacity: 0.16
65  gridlines: false
66  bar_gap: 10px
67  dot_marker: true
68  palette: [rgba(245,243,255,0.10), rgba(245,243,255,0.10), rgba(245,243,255,0.10), rgba(245,243,255,0.10), rgba(245,243,255,0.10), "#e2399a", rgba(245,243,255,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# Nebula Drift
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 **Nebula Drift** 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='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' 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.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"), radial-gradient(ellipse 75% 60% at 15% 85%, #ff8a3d 0%, transparent 55%), radial-gradient(ellipse 70% 75% at 85% 18%, #4a3cff 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 58% 50%, #e2399a 0%, transparent 60%), linear-gradient(140deg, #2a1a6c 0%, #c92e8c 50%, #ff8a3d 100%)`, text `#ffffff`, padding `13px 24px`, weight `700`, shadow `rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px`.
111- **Secondary** — rounded shape, bg `rgba(245,243,255,0.08)`, text `#f5f3ff`, border `1px solid rgba(245,243,255,0.10)`, padding `13px 24px`, weight `600`.
112- **Outline** — rounded shape, text `#f5f3ff`, border `1px solid rgba(245,243,255,0.18)`, padding `13px 24px`, weight `600`.
113- **Ghost** — rounded shape, text `#9690b8`, padding `13px 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: `#13101f`
122- Border: `1px solid rgba(245,243,255,0.06)`
123- Shadow: `rgba(0,0,0,0.4) 0 1px 2px, rgba(0,0,0,0.5) 0 18px 44px -18px`
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(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `#e2399a`, `rgba(245,243,255,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 
168Nebula Drift is a near-black canvas where one cosmic grainy gradient does the work — deep indigo bleeds into magenta and ignites into warm amber, with real SVG fractal-noise grain layered on top. The surface is `#0a0814` (near-black with a faint indigo cast), cards lift to `#13101f`, and the gradient lives in exactly three places: the primary CTA, the featured hero tile, and the active bar of the chart. Inter at 400/600/700 carries every word; numbers in JetBrains Mono.
169 
170The discipline is **negative space on the dark canvas**. Hairlines at 8% white only — no decorative borders, no glow halos, no second accent. The gradient is the entire color identity.
171 
172**Signature moves**
173- Cosmic three-stop grainy gradient (indigo → magenta → amber bloom) with **real fractal-noise grain** via inline SVG `feTurbulence`
174- Near-black canvas (`#0a0814`) with a faint indigo cast — true black would kill the gradient's depth
175- Magenta `#e2399a` picked from the gradient mid, used only on active chart bar + tab underline
176- Two-color drop shadow under the CTA: magenta + amber, low opacity, wide spread — the bloom escapes the box
177- Inter at 700 in 76px display, -0.04em tracking — calm modern grotesk against the bloom
178 
179## 2. The grainy gradient (copy this exactly)
180 
181Inline SVG `feTurbulence` at baseFrequency `0.95`, two octaves, stitched. The dark canvas needs a slightly higher noise frequency than the light systems so grain reads through the deeper hues. Three radial blooms over a 140° linear base — indigo anchor bottom-left is replaced by an amber anchor (warm against deep blue), magenta anchors top-right.
182 
183```css
184background:
185  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' 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.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>"),
186  radial-gradient(ellipse 75% 60% at 15% 85%, #ff8a3d 0%, transparent 55%),
187  radial-gradient(ellipse 70% 75% at 85% 18%, #4a3cff 0%, transparent 55%),
188  radial-gradient(ellipse 55% 65% at 58% 50%, #e2399a 0%, transparent 60%),
189  linear-gradient(140deg, #2a1a6c 0%, #c92e8c 50%, #ff8a3d 100%);
190```
191 
192The noise alpha is 0.5 (lower than the light systems) — dark backgrounds amplify grain visually, so less is more.
193 
194### Stop palette
195- **Indigo** `#2a1a6c` / radial `#4a3cff` — top-right counter-anchor
196- **Magenta** `#c92e8c` / radial `#e2399a` — center bloom + accent extraction
197- **Amber** `#ff8a3d` — bottom-left anchor (warm fights the cold indigo)
198 
199## 3. Palette
200 
201### Surface
202- **Void** `#0a0814` — page background (near-black with faint indigo cast — never `#000`)
203- **Lift** `#13101f` — cards, sheets
204- **Edge** `rgba(245,243,255,0.06)` — hairline borders
205- **Glass** `rgba(245,243,255,0.08)` — secondary button fill
206 
207### Ink
208- **Star** `#f5f3ff` — text, headings (warm white with violet cast)
209- **Star 60** `#9690b8` — secondary text, mono labels
210 
211### Accent (single)
212- **Magenta** `#e2399a` — extracted from the gradient's mid radial, used only on active chart bar + active tab underline
213 
214## 4. Typography
215 
216| Role | Font | Size | Weight | Leading | Tracking |
217|------|------|------|--------|---------|----------|
218| Hero | Inter | 76px | 700 | 1.0 | -0.04em |
219| H1 | Inter | 46px | 700 | 1.08 | -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.01em |
223| Number | JetBrains Mono | 13px | 500 | 1.0 | 0 |
224 
225Inter at three weights: 400 / 600 / 700. The 800 weight is reserved for the optional oversized KPI inside the featured tile.
226 
227## 5. Buttons
228 
229### Primary (Grainy Gradient Box)
230```css
231background: /* full gradient stack from §2 */;
232color: #ffffff;
233padding: 13px 24px;
234border-radius: 16px;
235box-shadow:
236  rgba(226,57,154,0.40) 0 14px 32px -12px,
237  rgba(255,138,61,0.28) 0 8px 22px -10px;
238font: 700 15px/1.4 Inter;
239letter-spacing: -0.01em;
240```
241 
242The two-color shadow (magenta + amber) is the bloom escaping the box — it picks up the gradient's hot stops and lets them hover under the button.
243 
244### Secondary (Glass)
245```css
246background: rgba(245,243,255,0.08);
247border: 1px solid rgba(245,243,255,0.10);
248color: #f5f3ff;
249```
250 
251### Outline & Ghost
252- Outline: transparent, 1px hairline at 18% star
253- Ghost: no border, star-60, hover lifts to star
254 
255## 6. The Featured tile
256 
257The featured hero tile uses the **same** gradient stack. Inside: white display headline at 30px in Inter 700. Mono label "Featured" at 11px uppercase 0.12em tracking, color `rgba(255,255,255,0.78)`.
258 
259## 7. Charts
260 
261Rounded bars (pill ends), 10px gap. Six bars at 10% star (warm white). **One bar in magenta** `#e2399a` — the gradient's mid radial. The eye reads the magenta bar as active because it visually rhymes with the CTA's bloom.
262 
263## 8. Tabs
264 
265Underline 1.5px in magenta `#e2399a`. Inactive tabs in Inter 600 star-60. Hover lifts to star.
266 
267## 9. Spacing
268 
269- Base 4px
270- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`
271- Section padding: 96px desktop, 48px mobile
272 
273## 10. Do's & don'ts
274 
275✅ **Do**
276- Use the full gradient stack from §2 verbatim — the noise frequency 0.95 is calibrated for the dark canvas
277- Apply the gradient exactly three times: CTA, featured tile, active chart bar
278- Use `#0a0814` (near-black with indigo cast), never pure `#000` — true black flattens the gradient
279- Layer two colored shadows under the CTA: magenta + amber, low opacity, wide spread
280 
281❌ **Don't**
282- Use a 2-stop dark gradient (e.g. purple → blue) — this is multi-stop with grain, never the cliché
283- Add a third accent hue — magenta carries every "look here" moment alone
284- Apply the gradient to cards, headers, or sidebar — block-level on three surfaces only
285- Skip the SVG noise — on a dark canvas the gradient flattens to gradient-stock without it
286 
287---
288 
289## Tokens
290 
291> Generated from the same source the live preview renders from.
292> Treat the values below as the contract — never substitute approximations.
293 
294### Colors
295 
296| Role      | Value |
297|-----------|-------|
298| primary   | `#f5f3ff` |
299| secondary | `#9690b8` |
300| tertiary  | `#e2399a` |
301| neutral   | `#0a0814` |
302| surface   | `#13101f` |
303 
304### Typography
305 
306- **Display:** Inter
307- **Body:** Inter
308- **Mono:** JetBrains Mono
309 
310| Role | size / leading / weight / tracking |
311|------|------------------------------------|
312| Hero | 4.75rem / 1 / 700 / -0.04em |
313| H1   | 2.875rem / 1.08 / 700 / -0.03em |
314| H2   | 1.625rem / 1.22 / 600 / -0.018em |
315| Body | 1.0625rem / 1.6 / 400 / -0.005em |
316 
317### Radius
318 
319- sm: `10px`
320- md: `16px`
321- lg: `22px`
322- pill: `9999px`
323 
324### Shadows
325 
326- **card:** `rgba(0,0,0,0.4) 0 1px 2px, rgba(0,0,0,0.5) 0 18px 44px -18px`
327- **button:** `rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px`
328 
329### Borders
330 
331- **card:** `1px solid rgba(245,243,255,0.06)`
332- **divider:** `rgba(245,243,255,0.08)`
333 
334### Buttons
335 
336Four variants, each fully tokenized. The preview renders from these exact values.
337 
338#### Primary
339 
340| Property | Value |
341|----------|-------|
342| shape | `rounded` |
343| background | `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' 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.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"), radial-gradient(ellipse 75% 60% at 15% 85%, #ff8a3d 0%, transparent 55%), radial-gradient(ellipse 70% 75% at 85% 18%, #4a3cff 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 58% 50%, #e2399a 0%, transparent 60%), linear-gradient(140deg, #2a1a6c 0%, #c92e8c 50%, #ff8a3d 100%)` |
344| color | `#ffffff` |
345| border | `none` |
346| padding | `13px 24px` |
347| fontWeight | `700` |
348| fontSize | `0.9375rem` |
349| tracking | `-0.01em` |
350| shadow | `rgba(226,57,154,0.40) 0 14px 32px -12px, rgba(255,138,61,0.28) 0 8px 22px -10px` |
351 
352#### Secondary
353 
354| Property | Value |
355|----------|-------|
356| shape | `rounded` |
357| background | `rgba(245,243,255,0.08)` |
358| color | `#f5f3ff` |
359| border | `1px solid rgba(245,243,255,0.10)` |
360| padding | `13px 24px` |
361| fontWeight | `600` |
362| fontSize | `0.9375rem` |
363 
364#### Outline
365 
366| Property | Value |
367|----------|-------|
368| shape | `rounded` |
369| background | `transparent` |
370| color | `#f5f3ff` |
371| border | `1px solid rgba(245,243,255,0.18)` |
372| padding | `13px 24px` |
373| fontWeight | `600` |
374| fontSize | `0.9375rem` |
375 
376#### Ghost
377 
378| Property | Value |
379|----------|-------|
380| shape | `rounded` |
381| background | `transparent` |
382| color | `#9690b8` |
383| border | `none` |
384| padding | `13px 18px` |
385| fontWeight | `600` |
386| fontSize | `0.9375rem` |
387 
388### Charts
389 
390| Property | Value |
391|----------|-------|
392| variant | `rounded-bars` |
393| strokeWidth | `1.5` |
394| fillOpacity | `0.16` |
395| gridlines | `false` |
396| barGap | `10px` |
397| dotMarker | `true` |
398| palette | `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `rgba(245,243,255,0.10)`, `#e2399a`, `rgba(245,243,255,0.10)` |
399