1---
2name: "Dune Glass"
3description: "Mid-tone soft glass. Warm dusty-sand canvas with a peach-and-rose aurora behind; cards float as cream-tinted frosted panes with 26px backdrop-blur and a faint inset top highlight. The mid-tone is the system."
4tags: [glass, warm, premium, minimal, modern]
5colors:
6  primary:   "#1F1A18"
7  secondary: "#7A6E66"
8  tertiary:  "#C46B6B"
9  neutral:   "#D8C9B8"
10  surface:   "#EFE4D5"
11typography:
12  display: "Inter Tight"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 1.05 / 600 / -0.035em"
17    h1:   "2.625rem / 1.1 / 600 / -0.028em"
18    h2:   "1.5rem / 1.3 / 600 / -0.015em"
19    body: "1rem / 1.65 / 400 / -0.005em"
20radius:
21  sm: 14px
22  md: 20px
23  lg: 26px
24  pill: 9999px
25shadows:
26  card:   "0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)"
27  button: "0 10px 28px -14px rgba(196, 107, 107, 0.50), inset 0 1px 0 rgba(255, 230, 220, 0.40)"
28borders:
29  card:    "1px solid rgba(255, 248, 238, 0.65)"
30  divider: "rgba(31, 26, 24, 0.10)"
31glass:
32  surface: "rgba(255, 248, 238, 0.55)"
33  blur:    26px
34  saturate: 150%
35  border:  "1px solid rgba(255, 248, 238, 0.65)"
36  shadow:  "0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)"
37  inner_highlight: "inset 0 1px 0 rgba(255, 248, 238, 0.85)"
38  backdrop: "radial-gradient(at 14% 16%, rgba(255, 200, 180, 0.55) 0px, transparent 45%), radial-gradient(at 84% 18%, rgba(255, 175, 175, 0.45) 0px, transparent 50%), radial-gradient(at 78% 88%, rgba(245, 220, 195, 0.50) 0px, transparent 55%)"
39buttons:
40  primary:
41    background: linear-gradient(180deg, #D88585 0%, #B85858 100%)
42    color: #FFF8EE
43    border: 1px solid rgba(255, 248, 238, 0.22)
44    shape: pill
45    padding: 12px 24px
46    font: 600 / 0.9375rem / -0.005em
47    shadow: 0 10px 28px -14px rgba(196, 107, 107, 0.55), inset 0 1px 0 rgba(255, 248, 238, 0.40)
48  secondary:
49    background: rgba(255, 248, 238, 0.55)
50    color: #1F1A18
51    border: 1px solid rgba(255, 248, 238, 0.70)
52    shape: pill
53    padding: 12px 24px
54    font: 500 / 0.9375rem / -0.005em
55    backdrop_blur: 20px
56    backdrop_saturate: 150%
57  outline:
58    background: transparent
59    color: #1F1A18
60    border: 1px solid rgba(31, 26, 24, 0.22)
61    shape: pill
62    padding: 11px 22px
63    font: 500 / 0.9375rem / -0.005em
64  ghost:
65    background: transparent
66    color: #7A6E66
67    border: none
68    shape: pill
69    padding: 11px 6px
70    font: 500 / 0.9375rem / -0.005em
71    hover: underline
72charts:
73  variant: area
74  stroke_width: 2
75  fill_opacity: 0.2
76  gridlines: false
77  highlight: last
78  dot_marker: true
79  axis_color: "#7A6E66"
80  palette: ["#C46B6B", "#D89090", "#E8B8B8"]
81fonts_url: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
82dependencies: ["lucide-react"]
83---
84 
85# Dune Glass
86 
87## AI Build Instructions
88 
89> **Read this section before writing any code.** The rules below
90> are non-negotiable. Every value used in the UI must come from this
91> file's frontmatter — never substitute, approximate, or invent new
92> colors, fonts, radii, or shadows. If a value is missing, ask the
93> user before adding one.
94 
95### 1 · Your role
96 
97You are building UI for a project that has adopted **Dune Glass** as its
98design system. Treat `DESIGN.md` as the single source of truth.
99Your job is to translate the user's product requirements into
100components and pages that look like they were designed by the same
101person who authored this file.
102 
103### 2 · Token compliance
104 
105- Pull every color, font family, radius, shadow, and spacing value
106  from the frontmatter at the top of this file.
107- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
108  hard-code hex values that bypass the system.
109- When a token can be expressed as a CSS variable, declare it once
110  in your global stylesheet and reference it everywhere downstream.
111- The Google Fonts `<link>` is provided in the Typography section.
112  Add it to `<head>` before any component renders.
113 
114### 3 · Component recipes
115 
116Use these recipes verbatim when building the corresponding component.
117 
118#### Buttons
119 
120Four variants are defined. Pick one — never blend variants or invent a fifth.
121 
122- **Primary** — pill shape, bg `linear-gradient(180deg, #D88585 0%, #B85858 100%)`, text `#FFF8EE`, border `1px solid rgba(255, 248, 238, 0.22)`, padding `12px 24px`, weight `600`, shadow `0 10px 28px -14px rgba(196, 107, 107, 0.55), inset 0 1px 0 rgba(255, 248, 238, 0.40)`.
123- **Secondary** — pill shape, bg `rgba(255, 248, 238, 0.55)`, text `#1F1A18`, border `1px solid rgba(255, 248, 238, 0.70)`, padding `12px 24px`, weight `500`.
124- **Outline** — pill shape, text `#1F1A18`, border `1px solid rgba(31, 26, 24, 0.22)`, padding `11px 22px`, weight `500`.
125- **Ghost** — pill shape, text `#7A6E66`, padding `11px 6px`, weight `500`.
126 
127Reach for **primary** as the single dominant CTA per screen.
128**Secondary** for the supporting action. **Outline** for tertiary
129actions in toolbars. **Ghost** for inline links and table actions.
130 
131#### Cards
132 
133- Background: `#EFE4D5`
134- Border: `1px solid rgba(255, 248, 238, 0.65)`
135- Shadow: `0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)`
136- Radius: `radius.lg` (`26px`)
137- Internal padding: `20px` for compact cards, `24–28px` for content cards.
138 
139> This system ships a **glass treatment** — see the Glass token table.
140> Apply `backdrop-filter: blur(26px)` to translucent panes.
141> The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract.
142 
143#### Charts
144 
145- Bar/line variant: `area`
146- No gridlines — let the bars/lines carry the data.
147- Highlight strategy: `last` — emphasize a single bar/point per chart.
148- Use the declared palette in order: `#C46B6B`, `#D89090`, `#E8B8B8`.
149 
150#### Typography pairings
151 
152- **Display (`Inter Tight`)** — h1, h2, hero headlines, brand wordmarks.
153- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
154- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
155 
156### 4 · Hard constraints
157 
158Never do any of the following without explicit instruction from the user:
159 
160- Introduce a new color, font, radius, or shadow that isn't declared above.
161- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
162- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
163- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
164- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
165 
166### 5 · Before you finish — verify
167 
168Run through this checklist for every screen you produce:
169 
170- [ ] Every color used appears in the Colors table above.
171- [ ] Headlines use the display font; body copy uses the body font.
172- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
173- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
174- [ ] Cards and dividers use the declared border + shadow tokens.
175- [ ] No values were invented; if you needed something missing, you stopped and asked.
176 
177---
178 
179## Overview
180Dune Glass is the third register of glass — neither cool light nor dark indigo, but a warm dusty-sand mid-tone. The page sits on dusty sand with a soft aurora behind it: peach, rose, cream — three warm radial blobs. Cards float above as cream-tinted frosted panes: 26px backdrop-blur, 55% cream surface, 1px cream-alpha hairline, faint inset top highlight.
181 
182The mid-tone canvas is the system's differentiator. For wellness brands, hospitality, lifestyle apps, anything that wants the depth of glass without going to either extreme of light or dark.
183 
184## The Glass Recipe
185Cards are warm cream glass over a dusty-warm canvas:
186 
187```css
188.dune-pane {
189  background: rgba(255, 248, 238, 0.55);
190  backdrop-filter: blur(26px) saturate(150%);
191  -webkit-backdrop-filter: blur(26px) saturate(150%);
192  border: 1px solid rgba(255, 248, 238, 0.65);
193  box-shadow:
194    inset 0 1px 0 rgba(255, 248, 238, 0.85),
195    0 28px 64px -28px rgba(74, 50, 38, 0.22),
196    0 2px 8px -4px rgba(74, 50, 38, 0.08);
197  border-radius: 26px;
198}
199```
200 
201The page MUST have the warm aurora for the glass to mean anything:
202 
203```css
204body {
205  background:
206    radial-gradient(at 14% 16%, rgba(255,200,180,0.55) 0, transparent 45%),
207    radial-gradient(at 84% 18%, rgba(255,175,175,0.45) 0, transparent 50%),
208    radial-gradient(at 78% 88%, rgba(245,220,195,0.50) 0, transparent 55%),
209    #D8C9B8;
210}
211```
212 
213The dusty-sand base is non-negotiable — it is what makes this system distinct from cool light glass.
214 
215## Color
216- **Ink #1F1A18** — primary text. Warm bias to sit on the dusty canvas.
217- **Warm graphite #7A6E66** — secondary text, axis labels.
218- **Soft rose #C46B6B** — the only chromatic accent. Sits inside the aurora family.
219- **Dusty sand #D8C9B8** — page canvas. Mid-tone warm.
220- **Cream #FFF8EE @ 55%** — card surface (translucent over the aurora).
221 
222The aurora uses three soft warm tints — peach, rose, cream. Never anything cool.
223 
224## Typography
225- **Display: Inter Tight 600** at 4.5rem with -3.5% tracking.
226- **Body: Inter 400** at 1rem with 1.65 leading.
227 
228| Role | Font | Size | Weight | Tracking |
229|------|------|------|--------|----------|
230| Hero | Inter Tight | 4.5rem | 600 | -0.035em |
231| H1 | Inter Tight | 2.625rem | 600 | -0.028em |
232| H2 | Inter Tight | 1.5rem | 600 | -0.015em |
233| Body | Inter | 1rem | 400 | -0.005em / 1.65 |
234 
235## Geometry
236- **Radii: 14 / 20 / 26.** Generous corners — glass at sharp corners reads as plastic.
237- **Pill buttons** for primary + secondary.
238- **Section gap: 120px** desktop, 72px mobile. The aurora needs room.
239 
240## Buttons
241- **Primary** — vertical soft-rose gradient with inner top-edge gloss. Pill shape. Warm CTA on warm canvas.
242- **Secondary** — cream-tinted frosted glass pill (the same recipe as cards, scaled down).
243- **Outline** — bare ink hairline pill at 22%.
244- **Ghost** — bare warm-graphite label, hover underline.
245 
246## Cards
247Cream-tinted frosted glass panes — see the recipe above. Radius 26px. Padding 32px minimum. Cards never sit flush; always 24-32px gap so the aurora reads between them.
248 
249## Charts & Data
250Soft-rose area chart at 2px stroke and 20% fill opacity, no gridlines, end-of-line dot marker. The chart sits inside a glass card so the page aurora stays in the background.
251 
252## Do's and Don'ts
253- ✅ The dusty-sand canvas + warm aurora is mandatory. Without it the glass dies.
254- ✅ Cream-tinted glass surface (#FFF8EE @ 55%), never neutral white-translucent.
255- ✅ Cards always include the inner top-edge highlight — that's what reads as a polished pane.
256- ✅ One chromatic accent — soft rose. Sits inside the aurora's color family.
257- ❌ No cool tints. The system is strictly warm.
258- ❌ No solid cards. If a card isn't cream-glass, it's not in the system.
259- ❌ No light or dark canvas — the mid-tone dusty sand is the entire differentiator.
260- ❌ No second chromatic accent.
261 
262---
263 
264## Tokens
265 
266> Generated from the same source the live preview renders from.
267> Treat the values below as the contract — never substitute approximations.
268 
269### Colors
270 
271| Role      | Value |
272|-----------|-------|
273| primary   | `#1F1A18` |
274| secondary | `#7A6E66` |
275| tertiary  | `#C46B6B` |
276| neutral   | `#D8C9B8` |
277| surface   | `#EFE4D5` |
278 
279### Typography
280 
281- **Display:** Inter Tight
282- **Body:** Inter
283- **Mono:** JetBrains Mono
284 
285| Role | size / leading / weight / tracking |
286|------|------------------------------------|
287| Hero | 4.5rem / 1.05 / 600 / -0.035em |
288| H1   | 2.625rem / 1.1 / 600 / -0.028em |
289| H2   | 1.5rem / 1.3 / 600 / -0.015em |
290| Body | 1rem / 1.65 / 400 / -0.005em |
291 
292### Radius
293 
294- sm: `14px`
295- md: `20px`
296- lg: `26px`
297- pill: `9999px`
298 
299### Shadows
300 
301- **card:** `0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)`
302- **button:** `0 10px 28px -14px rgba(196, 107, 107, 0.50), inset 0 1px 0 rgba(255, 230, 220, 0.40)`
303 
304### Borders
305 
306- **card:** `1px solid rgba(255, 248, 238, 0.65)`
307- **divider:** `rgba(31, 26, 24, 0.10)`
308 
309### Glass
310 
311Translucent panes with backdrop-filter — the preview renders cards from these exact values.
312 
313| Property | Value |
314|----------|-------|
315| surface | `rgba(255, 248, 238, 0.55)` |
316| blur | `26px` |
317| saturate | `150%` |
318| border | `1px solid rgba(255, 248, 238, 0.65)` |
319| shadow | `0 28px 64px -28px rgba(74, 50, 38, 0.22), 0 2px 8px -4px rgba(74, 50, 38, 0.08)` |
320| innerHighlight | `inset 0 1px 0 rgba(255, 248, 238, 0.85)` |
321| backdrop | `radial-gradient(at 14% 16%, rgba(255, 200, 180, 0.55) 0px, transparent 45%), radial-gradient(at 84% 18%, rgba(255, 175, 175, 0.45) 0px, transparent 50%), radial-gradient(at 78% 88%, rgba(245, 220, 195, 0.50) 0px, transparent 55%)` |
322 
323### Buttons
324 
325Four variants, each fully tokenized. The preview renders from these exact values.
326 
327#### Primary
328 
329| Property | Value |
330|----------|-------|
331| shape | `pill` |
332| background | `linear-gradient(180deg, #D88585 0%, #B85858 100%)` |
333| color | `#FFF8EE` |
334| border | `1px solid rgba(255, 248, 238, 0.22)` |
335| padding | `12px 24px` |
336| fontWeight | `600` |
337| fontSize | `0.9375rem` |
338| tracking | `-0.005em` |
339| shadow | `0 10px 28px -14px rgba(196, 107, 107, 0.55), inset 0 1px 0 rgba(255, 248, 238, 0.40)` |
340 
341#### Secondary
342 
343| Property | Value |
344|----------|-------|
345| shape | `pill` |
346| background | `rgba(255, 248, 238, 0.55)` |
347| color | `#1F1A18` |
348| border | `1px solid rgba(255, 248, 238, 0.70)` |
349| padding | `12px 24px` |
350| fontWeight | `500` |
351| fontSize | `0.9375rem` |
352| tracking | `-0.005em` |
353| backdropBlur | `20px` |
354| backdropSaturate | `150%` |
355 
356#### Outline
357 
358| Property | Value |
359|----------|-------|
360| shape | `pill` |
361| background | `transparent` |
362| color | `#1F1A18` |
363| border | `1px solid rgba(31, 26, 24, 0.22)` |
364| padding | `11px 22px` |
365| fontWeight | `500` |
366| fontSize | `0.9375rem` |
367| tracking | `-0.005em` |
368 
369#### Ghost
370 
371| Property | Value |
372|----------|-------|
373| shape | `pill` |
374| background | `transparent` |
375| color | `#7A6E66` |
376| border | `none` |
377| padding | `11px 6px` |
378| fontWeight | `500` |
379| fontSize | `0.9375rem` |
380| tracking | `-0.005em` |
381| hoverHint | `underline` |
382 
383### Charts
384 
385| Property | Value |
386|----------|-------|
387| variant | `area` |
388| strokeWidth | `2` |
389| fillOpacity | `0.2` |
390| gridlines | `false` |
391| highlight | `last` |
392| dotMarker | `true` |
393| axisColor | `#7A6E66` |
394| palette | `#C46B6B`, `#D89090`, `#E8B8B8` |
395 
396---
397 
398## Pro tokens
399 
400> Production-fidelity tokens. States, density, motion, elevation,
401> content rules and a measured WCAG contract — derived from the
402> resting tokens unless explicitly authored.
403 
404### States
405 
406#### Button
407 
408- **hover** — shadow: `0 8px 24px -8px rgba(196, 107, 107, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)`
409- **focus** — outline: `2px solid rgba(196, 107, 107, 0.5)`, outline-offset: `3px`
410- **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)`
411- **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)`
412- **loading** — opacity: `0.7`
413- **selected** — bg: `rgba(196, 107, 107, 0.18)`, color: `#C46B6B`
414 
415#### Input
416 
417- **hover** — border: `1px solid rgba(196, 107, 107, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)`
418- **focus** — border: `1px solid rgba(196, 107, 107, 0.65)`, shadow: `0 0 0 4px rgba(196, 107, 107, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)`
419- **disabled** — opacity: `0.4`
420- **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)`
421 
422#### Card
423 
424- **hover** — shadow: `0 16px 48px -16px rgba(196, 107, 107, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)`
425- **selected** — border: `1px solid rgba(196, 107, 107, 0.5)`
426- **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85`
427 
428#### Tab
429 
430- **hover** — bg: `rgba(196, 107, 107, 0.08)`
431- **focus** — outline: `2px solid rgba(196, 107, 107, 0.5)`, outline-offset: `2px`
432- **selected** — bg: `rgba(196, 107, 107, 0.18)`, color: `#C46B6B`
433 
434### Density
435 
436| Mode | padding × | row × | body | radius × | Use for |
437|------|-----------|-------|------|----------|---------|
438| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
439| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
440| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
441 
442### Motion
443 
444**Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface.
445 
446```css
447transition: 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);
448```
449 
450| Token | Value |
451|-------|-------|
452| duration.instant | `100ms` |
453| duration.fast | `200ms` |
454| duration.base | `350ms` |
455| duration.slow | `550ms` |
456| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
457| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
458| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
459| easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` |
460 
461### Elevation
462 
463Five-level scale, system-specific recipe.
464 
465| Level | Shadow | Recipe |
466|-------|--------|--------|
467| level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. |
468| level1 | `0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. |
469| level2 | `0 12px 32px -8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. |
470| level3 | `0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(196, 107, 107, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. |
471| level4 | `0 40px 96px -24px rgba(15, 23, 42, 0.5), 0 0 48px -12px rgba(196, 107, 107, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. |
472 
473### Content
474 
475- **measure:** `66ch` (max line length for body prose)
476- **paragraph spacing:** `1.25em`
477- **list indent:** `1.5em`
478- **list gap:** `0.5em`
479- **link:** color `#C46B6B`, underline `hover`
480- **blockquote:** border `1px solid rgba(196, 107, 107, 0.4)`, padding `0.9em 1.2em`
481- **code:** background `rgba(196, 107, 107, 0.1)`, color `#C46B6B`
482 
483### Accessibility (WCAG 2.1)
484 
485**Overall:** FAIL
486 
487| Pair | Ratio | Required | Grade | Suggested fix |
488|------|-------|----------|-------|---------------|
489| Body text on surface | 13.72:1 | AA | AAA | — |
490| Body text on canvas | 10.64:1 | AA | AAA | — |
491| Muted text on surface | 3.94:1 | AA | AA-Large | `#6f645d` → 4.57:1 (AA) |
492| Accent on surface | 2.95:1 | AA-Large | FAIL | `#ad4545` → 4.5:1 (AA) |
493| Accent on canvas | 2.29:1 | AA-Large | FAIL | `#903939` → 4.58:1 (AA) |
494