1---
2name: "Solflare Bloom"
3description: "A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché."
4tags: [grainy, gradient, warm, modern, light]
5colors:
6  primary:   "#241813"
7  secondary: "#7a6c63"
8  tertiary:  "#d4451f"
9  neutral:   "#f7f1e8"
10  surface:   "#fffaf2"
11typography:
12  display: "Inter Tight"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5rem / 0.98 / 800 / -0.045em"
17    h1:   "3rem / 1.05 / 800 / -0.035em"
18    h2:   "1.75rem / 1.18 / 700 / -0.02em"
19    body: "1.0625rem / 1.58 / 400 / -0.005em"
20radius:
21  sm: 8px
22  md: 14px
23  lg: 20px
24  pill: 9999px
25shadows:
26  card:   "rgba(36,24,19,0.05) 0 1px 2px, rgba(36,24,19,0.07) 0 16px 40px -18px"
27  button: "rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px"
28borders:
29  card:    "1px solid rgba(36,24,19,0.07)"
30  divider: rgba(36,24,19,0.10)
31buttons:
32  primary:
33    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>"), radial-gradient(ellipse 80% 65% at 18% 82%, #d4451f 0%, transparent 55%), radial-gradient(ellipse 65% 75% at 85% 18%, #ffd24a 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 62% 55%, #ff8a3d 0%, transparent 55%), linear-gradient(125deg, #b53412 0%, #ff7a2e 50%, #ffc14a 100%)
34    color: #fffaf2
35    border: none
36    shape: rounded
37    padding: 13px 24px
38    font: display / 800 / 0.9375rem / -0.01em
39    shadow: rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px
40  secondary:
41    background: #241813
42    color: #fffaf2
43    border: none
44    shape: rounded
45    padding: 13px 24px
46    font: display / 700 / 0.9375rem
47  outline:
48    background: transparent
49    color: #241813
50    border: 1px solid rgba(36,24,19,0.18)
51    shape: rounded
52    padding: 13px 24px
53    font: display / 700 / 0.9375rem
54  ghost:
55    background: transparent
56    color: #7a6c63
57    border: none
58    shape: rounded
59    padding: 13px 18px
60    font: display / 700 / 0.9375rem
61charts:
62  variant: bars
63  stroke_width: 2
64  fill_opacity: 0.14
65  gridlines: false
66  bar_radius: 4px
67  bar_gap: 8px
68  dot_marker: true
69  palette: [rgba(36,24,19,0.10), rgba(36,24,19,0.10), rgba(36,24,19,0.10), rgba(36,24,19,0.10), "#ff7a2e", rgba(36,24,19,0.10), rgba(36,24,19,0.10)]
70fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
71dependencies: ["lucide-react"]
72---
73 
74# Solflare Bloom
75 
76## AI Build Instructions
77 
78> **Read this section before writing any code.** The rules below
79> are non-negotiable. Every value used in the UI must come from this
80> file's frontmatter — never substitute, approximate, or invent new
81> colors, fonts, radii, or shadows. If a value is missing, ask the
82> user before adding one.
83 
84### 1 · Your role
85 
86You are building UI for a project that has adopted **Solflare Bloom** as its
87design system. Treat `DESIGN.md` as the single source of truth.
88Your job is to translate the user's product requirements into
89components and pages that look like they were designed by the same
90person who authored this file.
91 
92### 2 · Token compliance
93 
94- Pull every color, font family, radius, shadow, and spacing value
95  from the frontmatter at the top of this file.
96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
97  hard-code hex values that bypass the system.
98- When a token can be expressed as a CSS variable, declare it once
99  in your global stylesheet and reference it everywhere downstream.
100- The Google Fonts `<link>` is provided in the Typography section.
101  Add it to `<head>` before any component renders.
102 
103### 3 · Component recipes
104 
105Use these recipes verbatim when building the corresponding component.
106 
107#### Buttons
108 
109Four variants are defined. Pick one — never blend variants or invent a fifth.
110 
111- **Primary** — rounded shape, bg `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>"), radial-gradient(ellipse 80% 65% at 18% 82%, #d4451f 0%, transparent 55%), radial-gradient(ellipse 65% 75% at 85% 18%, #ffd24a 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 62% 55%, #ff8a3d 0%, transparent 55%), linear-gradient(125deg, #b53412 0%, #ff7a2e 50%, #ffc14a 100%)`, text `#fffaf2`, padding `13px 24px`, weight `800`, shadow `rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px`.
112- **Secondary** — rounded shape, bg `#241813`, text `#fffaf2`, padding `13px 24px`, weight `700`.
113- **Outline** — rounded shape, text `#241813`, border `1px solid rgba(36,24,19,0.18)`, padding `13px 24px`, weight `700`.
114- **Ghost** — rounded shape, text `#7a6c63`, padding `13px 18px`, weight `700`.
115 
116Reach for **primary** as the single dominant CTA per screen.
117**Secondary** for the supporting action. **Outline** for tertiary
118actions in toolbars. **Ghost** for inline links and table actions.
119 
120#### Cards
121 
122- Background: `#fffaf2`
123- Border: `1px solid rgba(36,24,19,0.07)`
124- Shadow: `rgba(36,24,19,0.05) 0 1px 2px, rgba(36,24,19,0.07) 0 16px 40px -18px`
125- Radius: `radius.lg` (`20px`)
126- Internal padding: `20px` for compact cards, `24–28px` for content cards.
127 
128#### Tabs
129 
130Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
131 
132#### Charts
133 
134- Bar/line variant: `bars`
135- Bar radius: `4px`
136- No gridlines — let the bars/lines carry the data.
137- Use the declared palette in order: `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `#ff7a2e`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`.
138 
139#### Typography pairings
140 
141- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.
142- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
143- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
144 
145### 4 · Hard constraints
146 
147Never do any of the following without explicit instruction from the user:
148 
149- Introduce a new color, font, radius, or shadow that isn't declared above.
150- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
151- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
152- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
153- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
154 
155### 5 · Before you finish — verify
156 
157Run through this checklist for every screen you produce:
158 
159- [ ] Every color used appears in the Colors table above.
160- [ ] Headlines use the display font; body copy uses the body font.
161- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
162- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
163- [ ] Cards and dividers use the declared border + shadow tokens.
164- [ ] No values were invented; if you needed something missing, you stopped and asked.
165 
166---
167 
168## 1. Atmosphere
169 
170Solflare Bloom is a low-sun grainy gradient — deep ember bleeds into pumpkin and lifts into marigold, with real SVG fractal-noise grain on top. The surface is warm cream, ink is near-black brown, and the gradient lives in exactly three places: the primary CTA, the featured hero tile, and the active bar of the chart. Inter Tight at 800 carries every display moment; Inter 400 carries body. Numbers shift to JetBrains Mono.
171 
172The discipline is **warm restraint**. The gradient is never repeated on a fourth surface. Cards stay cream-on-cream with hairlines at 7% ink. The CTA is a solid rectangular box with heavy display type — no pill, no icon glow, just the gradient burning through.
173 
174**Signature moves**
175- Three-stop warm grainy gradient (ember → pumpkin → marigold) with **real fractal-noise grain** via inline SVG `feTurbulence`
176- Inter Tight 800 at -0.045em tracking — heavy display sitting on the gradient
177- Cream surface (`#fffaf2`) so the gradient's warmth never fights the page
178- Active chart bar in pumpkin `#ff7a2e` — picked directly from the gradient's mid stop
179- 14px button radius — square enough to read as a deliberate "block," soft enough to feel modern
180 
181## 2. The grainy gradient (copy this exactly)
182 
183Grain via inline SVG `feTurbulence` at baseFrequency `0.85`, three octaves, stitched. Layered over three radial blooms anchored to the corners and a 125° linear base. The `feColorMatrix` collapses the noise to alpha-only (0.6), so the grain darkens the gradient instead of tinting it.
184 
185```css
186background:
187  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>"),
188  radial-gradient(ellipse 80% 65% at 18% 82%, #d4451f 0%, transparent 55%),
189  radial-gradient(ellipse 65% 75% at 85% 18%, #ffd24a 0%, transparent 55%),
190  radial-gradient(ellipse 55% 60% at 62% 55%, #ff8a3d 0%, transparent 55%),
191  linear-gradient(125deg, #b53412 0%, #ff7a2e 50%, #ffc14a 100%);
192```
193 
194### Stop palette
195- **Ember** `#d4451f` / linear stop 0 `#b53412` — bottom-left anchor
196- **Marigold** `#ffd24a` / linear stop end `#ffc14a` — top-right
197- **Pumpkin** `#ff8a3d` / linear mid `#ff7a2e` — center bloom, also the active-bar color
198 
199## 3. Palette
200 
201### Surface
202- **Cream** `#fffaf2` — page background, cards
203- **Sand** `#f7f1e8` — subtle tonal lift for inputs
204 
205### Ink
206- **Cocoa** `#241813` — text, headings, secondary CTA fill
207- **Cocoa 50** `#7a6c63` — secondary text
208- **Hairline** `rgba(36,24,19,0.07)` — dividers
209 
210### Accent
211- **Pumpkin** `#ff7a2e` — picked from the gradient mid, used only on active chart bar + active tab underline
212 
213## 4. Typography
214 
215| Role | Font | Size | Weight | Leading | Tracking |
216|------|------|------|--------|---------|----------|
217| Hero | Inter Tight | 80px | 800 | 0.98 | -0.045em |
218| H1 | Inter Tight | 48px | 800 | 1.05 | -0.035em |
219| H2 | Inter Tight | 28px | 700 | 1.18 | -0.02em |
220| Body | Inter | 17px | 400 | 1.58 | -0.005em |
221| UI / Button | Inter Tight | 15px | 800 | 1.4 | -0.01em |
222| Number | JetBrains Mono | 13px | 500 | 1.0 | 0 |
223 
224Inter Tight is the heavy modern grotesk that sits on the gradient without getting eaten by it. The 800 weight is non-negotiable for the CTA label.
225 
226## 5. Buttons
227 
228### Primary (Grainy Gradient Block)
229```css
230background: /* full grainy gradient from §2 */;
231color: #fffaf2;
232padding: 13px 24px;
233border-radius: 14px;
234box-shadow:
235  rgba(212,69,31,0.32) 0 12px 28px -10px,
236  rgba(255,138,61,0.22) 0 6px 18px -8px;
237font: 800 15px/1.4 'Inter Tight';
238letter-spacing: -0.01em;
239```
240 
241### Secondary (Cocoa Block)
242Solid `#241813` with cream label, same 14px radius. Display weight 700.
243 
244### Outline & Ghost
245Outline = 1px hairline at 18% cocoa. Ghost = cocoa-50, no border.
246 
247## 6. The Featured tile
248 
249The featured hero tile uses the **identical** gradient stack. Inside: cream display headline at 28px in Inter Tight 800. Mono label "Featured" at 11px uppercase 0.12em.
250 
251## 7. Charts
252 
253Square bars (4px corner), 8px gap. Six bars at 10% cocoa. **One bar in pumpkin** `#ff7a2e` — the gradient's mid stop. The visual rhyme with the CTA is the entire chart legend.
254 
255## 8. Tabs
256 
257Underline 2px in ember `#d4451f`. Inactive tabs in Inter Tight 700 cocoa-50.
258 
259## 9. Spacing
260 
261- Base 4px
262- Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128`
263- Section padding: 96px desktop, 48px mobile
264 
265## 10. Do's & don'ts
266 
267✅ **Do**
268- Copy the gradient stack from §2 verbatim — the noise layer + alpha-only matrix is what makes it look painted, not generated
269- Use the gradient exactly three times: CTA, featured tile, active chart bar
270- Pair the gradient with cream cards and cocoa text — never white cards
271- Use Inter Tight 800 for the CTA label — display weight on display surface
272 
273❌ **Don't**
274- Use a 2-stop "sunset" gradient — this is multi-stop with grain, not the cliché
275- Apply the gradient to cards, headers, or borders — block-level only
276- Skip the SVG noise — flat gradient = generic
277- Use a serif or rounded display font on the CTA — Inter Tight is the voice
278 
279---
280 
281## Tokens
282 
283> Generated from the same source the live preview renders from.
284> Treat the values below as the contract — never substitute approximations.
285 
286### Colors
287 
288| Role      | Value |
289|-----------|-------|
290| primary   | `#241813` |
291| secondary | `#7a6c63` |
292| tertiary  | `#d4451f` |
293| neutral   | `#f7f1e8` |
294| surface   | `#fffaf2` |
295 
296### Typography
297 
298- **Display:** Inter Tight
299- **Body:** Inter
300- **Mono:** JetBrains Mono
301 
302| Role | size / leading / weight / tracking |
303|------|------------------------------------|
304| Hero | 5rem / 0.98 / 800 / -0.045em |
305| H1   | 3rem / 1.05 / 800 / -0.035em |
306| H2   | 1.75rem / 1.18 / 700 / -0.02em |
307| Body | 1.0625rem / 1.58 / 400 / -0.005em |
308 
309### Radius
310 
311- sm: `8px`
312- md: `14px`
313- lg: `20px`
314- pill: `9999px`
315 
316### Shadows
317 
318- **card:** `rgba(36,24,19,0.05) 0 1px 2px, rgba(36,24,19,0.07) 0 16px 40px -18px`
319- **button:** `rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px`
320 
321### Borders
322 
323- **card:** `1px solid rgba(36,24,19,0.07)`
324- **divider:** `rgba(36,24,19,0.10)`
325 
326### Buttons
327 
328Four variants, each fully tokenized. The preview renders from these exact values.
329 
330#### Primary
331 
332| Property | Value |
333|----------|-------|
334| shape | `rounded` |
335| background | `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>"), radial-gradient(ellipse 80% 65% at 18% 82%, #d4451f 0%, transparent 55%), radial-gradient(ellipse 65% 75% at 85% 18%, #ffd24a 0%, transparent 55%), radial-gradient(ellipse 55% 60% at 62% 55%, #ff8a3d 0%, transparent 55%), linear-gradient(125deg, #b53412 0%, #ff7a2e 50%, #ffc14a 100%)` |
336| color | `#fffaf2` |
337| border | `none` |
338| padding | `13px 24px` |
339| fontFamily | `display` |
340| fontWeight | `800` |
341| fontSize | `0.9375rem` |
342| tracking | `-0.01em` |
343| shadow | `rgba(212,69,31,0.32) 0 12px 28px -10px, rgba(255,138,61,0.22) 0 6px 18px -8px` |
344 
345#### Secondary
346 
347| Property | Value |
348|----------|-------|
349| shape | `rounded` |
350| background | `#241813` |
351| color | `#fffaf2` |
352| border | `none` |
353| padding | `13px 24px` |
354| fontFamily | `display` |
355| fontWeight | `700` |
356| fontSize | `0.9375rem` |
357 
358#### Outline
359 
360| Property | Value |
361|----------|-------|
362| shape | `rounded` |
363| background | `transparent` |
364| color | `#241813` |
365| border | `1px solid rgba(36,24,19,0.18)` |
366| padding | `13px 24px` |
367| fontFamily | `display` |
368| fontWeight | `700` |
369| fontSize | `0.9375rem` |
370 
371#### Ghost
372 
373| Property | Value |
374|----------|-------|
375| shape | `rounded` |
376| background | `transparent` |
377| color | `#7a6c63` |
378| border | `none` |
379| padding | `13px 18px` |
380| fontFamily | `display` |
381| fontWeight | `700` |
382| fontSize | `0.9375rem` |
383 
384### Charts
385 
386| Property | Value |
387|----------|-------|
388| variant | `bars` |
389| strokeWidth | `2` |
390| fillOpacity | `0.14` |
391| gridlines | `false` |
392| barRadius | `4px` |
393| barGap | `8px` |
394| dotMarker | `true` |
395| palette | `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)`, `#ff7a2e`, `rgba(36,24,19,0.10)`, `rgba(36,24,19,0.10)` |
396