1---
2name: "Obsidian Glass"
3description: "Dark glass. Deep midnight canvas with a faint indigo-violet aurora behind; cards float as smoked glass panes with 32px backdrop-blur and a faint inset top highlight. Depth and theater without going gaudy."
4tags: [glass, dark, premium, minimal, modern]
5colors:
6  primary:   "#ECEDF2"
7  secondary: "#9298B0"
8  tertiary:  "#8B95FF"
9  neutral:   "#0B0C14"
10  surface:   "#13141E"
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.03em"
18    h2:   "1.5rem / 1.3 / 600 / -0.015em"
19    body: "1rem / 1.65 / 400 / -0.005em"
20radius:
21  sm: 12px
22  md: 18px
23  lg: 24px
24  pill: 9999px
25shadows:
26  card:   "0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)"
27  button: "0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18)"
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:    32px
34  saturate: 180%
35  border:  "1px solid rgba(255, 255, 255, 0.10)"
36  shadow:  "0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)"
37  inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.12)"
38  backdrop: "radial-gradient(at 14% 18%, rgba(99, 102, 241, 0.32) 0px, transparent 45%), radial-gradient(at 86% 14%, rgba(139, 92, 246, 0.26) 0px, transparent 50%), radial-gradient(at 78% 88%, rgba(59, 130, 246, 0.22) 0px, transparent 55%)"
39buttons:
40  primary:
41    background: linear-gradient(180deg, #9DA6FF 0%, #6E7BFF 100%)
42    color: #0B0C14
43    border: 1px solid rgba(255, 255, 255, 0.20)
44    shape: pill
45    padding: 12px 24px
46    font: 600 / 0.9375rem / -0.005em
47    shadow: 0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)
48  secondary:
49    background: rgba(255, 255, 255, 0.06)
50    color: #ECEDF2
51    border: 1px solid rgba(255, 255, 255, 0.12)
52    shape: pill
53    padding: 12px 24px
54    font: 500 / 0.9375rem / -0.005em
55    backdrop_blur: 20px
56    backdrop_saturate: 180%
57  outline:
58    background: transparent
59    color: #ECEDF2
60    border: 1px solid rgba(255, 255, 255, 0.18)
61    shape: pill
62    padding: 11px 22px
63    font: 500 / 0.9375rem / -0.005em
64  ghost:
65    background: transparent
66    color: #9298B0
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.22
76  gridlines: false
77  highlight: last
78  dot_marker: true
79  axis_color: "#9298B0"
80  palette: ["#8B95FF", "#A5ADFF", "#C9CEFF"]
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# Obsidian 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 **Obsidian 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, #9DA6FF 0%, #6E7BFF 100%)`, text `#0B0C14`, border `1px solid rgba(255, 255, 255, 0.20)`, padding `12px 24px`, weight `600`, shadow `0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)`.
123- **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.06)`, text `#ECEDF2`, border `1px solid rgba(255, 255, 255, 0.12)`, padding `12px 24px`, weight `500`.
124- **Outline** — pill shape, text `#ECEDF2`, border `1px solid rgba(255, 255, 255, 0.18)`, padding `11px 22px`, weight `500`.
125- **Ghost** — pill shape, text `#9298B0`, 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: `#13141E`
134- Border: `1px solid rgba(255, 255, 255, 0.10)`
135- Shadow: `0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)`
136- Radius: `radius.lg` (`24px`)
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(32px)` 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: `#8B95FF`, `#A5ADFF`, `#C9CEFF`.
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
180Obsidian Glass is dark glass. The page sits on a deep midnight canvas with a faint indigo-violet aurora — three soft radial blobs in indigo, violet, and blue — painted into the background. Cards float above the aurora as smoked glass panes: 32px backdrop-blur, 6% white surface, 1px white-alpha hairline, and a faint inset top highlight that reads as a top-edge gloss in the dark.
181 
182The glass is the entire system. Type, color, buttons — all calibrated to let the smoked panes do the work. Built for night-mode AI tools, premium dashboards, music and media platforms, anything that wants depth and theater without going gaudy.
183 
184## The Smoked Glass Recipe
185Cards are not "dark with a shadow." They are smoked glass over a chromatic backdrop:
186 
187```css
188.obsidian-pane {
189  background: rgba(255, 255, 255, 0.06);
190  backdrop-filter: blur(32px) saturate(180%);
191  -webkit-backdrop-filter: blur(32px) saturate(180%);
192  border: 1px solid rgba(255, 255, 255, 0.10);
193  box-shadow:
194    inset 0 1px 0 rgba(255, 255, 255, 0.12),
195    0 32px 80px -32px rgba(0, 0, 0, 0.55),
196    0 2px 8px -4px rgba(0, 0, 0, 0.30);
197  border-radius: 24px;
198}
199```
200 
201The page MUST have the indigo-violet aurora behind it for the glass to mean anything:
202 
203```css
204body {
205  background:
206    radial-gradient(at 14% 18%, rgba(99,102,241,0.32) 0, transparent 45%),
207    radial-gradient(at 86% 14%, rgba(139,92,246,0.26) 0, transparent 50%),
208    radial-gradient(at 78% 88%, rgba(59,130,246,0.22) 0, transparent 55%),
209    #0B0C14;
210}
211```
212 
213Without the aurora, the glass collapses to "dark grey with a border." The two are inseparable.
214 
215## Color
216- **Moonlight #ECEDF2** — primary text.
217- **Lavender-grey #9298B0** — secondary text, axis labels.
218- **Periwinkle #8B95FF** — the only chromatic accent. Primary CTA, link hover, chart line.
219- **Midnight #0B0C14** — page canvas.
220- **Smoked glass #FFFFFF @ 6%** — card surface (translucent over the aurora).
221 
222The aurora uses three soft tints of indigo / violet / blue — never anything warm.
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.03em |
232| H2 | Inter Tight | 1.5rem | 600 | -0.015em |
233| Body | Inter | 1rem | 400 | -0.005em / 1.65 |
234 
235## Geometry
236- **Radii: 12 / 18 / 24.** Glass needs generous corners to read as a pane.
237- **Pill buttons** for primary + secondary.
238- **Section gap: 120px** desktop, 72px mobile. The aurora needs room to breathe.
239 
240## Buttons
241- **Primary** — vertical periwinkle gradient with an inner top-edge gloss. Pill, midnight label at 600.
242- **Secondary** — smoked glass pill (the same recipe as cards, scaled down). Backdrop-blur 20px.
243- **Outline** — bare hairline pill at 18% white.
244- **Ghost** — bare lavender-grey label, hover underline.
245 
246## Cards
247Smoked glass panes — see the recipe above. Radius 24px. Padding 32px minimum. Cards never sit flush; always 24-32px gap so the aurora reads between them.
248 
249## Charts & Data
250Periwinkle area chart, 2px stroke, 22% fill opacity, no gridlines. End-of-line dot. The chart sits inside a glass card, never on the bare midnight.
251 
252## Do's and Don'ts
253- ✅ The indigo-violet aurora is mandatory. Without it the glass dies.
254- ✅ Cards always include the inner top-edge highlight at 12% — that's what reads as polished pane in the dark.
255- ✅ One chromatic accent only — periwinkle. Everything else is moonlight/lavender-grey.
256- ✅ Generous radii (18-24px). Glass at sharp corners reads as plastic.
257- ❌ No warm tints in the aurora. The system is strictly cool.
258- ❌ No solid dark cards. If a card isn't smoked glass, it's not in the system.
259- ❌ No hard drop shadows beyond the soft black ambient.
260- ❌ No second chromatic accent. Periwinkle is the only chroma allowed.
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   | `#ECEDF2` |
274| secondary | `#9298B0` |
275| tertiary  | `#8B95FF` |
276| neutral   | `#0B0C14` |
277| surface   | `#13141E` |
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.03em |
289| H2   | 1.5rem / 1.3 / 600 / -0.015em |
290| Body | 1rem / 1.65 / 400 / -0.005em |
291 
292### Radius
293 
294- sm: `12px`
295- md: `18px`
296- lg: `24px`
297- pill: `9999px`
298 
299### Shadows
300 
301- **card:** `0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)`
302- **button:** `0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18)`
303 
304### Borders
305 
306- **card:** `1px solid rgba(255, 255, 255, 0.10)`
307- **divider:** `rgba(255, 255, 255, 0.08)`
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, 255, 255, 0.06)` |
316| blur | `32px` |
317| saturate | `180%` |
318| border | `1px solid rgba(255, 255, 255, 0.10)` |
319| shadow | `0 32px 80px -32px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.30)` |
320| innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.12)` |
321| backdrop | `radial-gradient(at 14% 18%, rgba(99, 102, 241, 0.32) 0px, transparent 45%), radial-gradient(at 86% 14%, rgba(139, 92, 246, 0.26) 0px, transparent 50%), radial-gradient(at 78% 88%, rgba(59, 130, 246, 0.22) 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, #9DA6FF 0%, #6E7BFF 100%)` |
333| color | `#0B0C14` |
334| border | `1px solid rgba(255, 255, 255, 0.20)` |
335| padding | `12px 24px` |
336| fontWeight | `600` |
337| fontSize | `0.9375rem` |
338| tracking | `-0.005em` |
339| shadow | `0 12px 32px -16px rgba(139, 149, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)` |
340 
341#### Secondary
342 
343| Property | Value |
344|----------|-------|
345| shape | `pill` |
346| background | `rgba(255, 255, 255, 0.06)` |
347| color | `#ECEDF2` |
348| border | `1px solid rgba(255, 255, 255, 0.12)` |
349| padding | `12px 24px` |
350| fontWeight | `500` |
351| fontSize | `0.9375rem` |
352| tracking | `-0.005em` |
353| backdropBlur | `20px` |
354| backdropSaturate | `180%` |
355 
356#### Outline
357 
358| Property | Value |
359|----------|-------|
360| shape | `pill` |
361| background | `transparent` |
362| color | `#ECEDF2` |
363| border | `1px solid rgba(255, 255, 255, 0.18)` |
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 | `#9298B0` |
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.22` |
390| gridlines | `false` |
391| highlight | `last` |
392| dotMarker | `true` |
393| axisColor | `#9298B0` |
394| palette | `#8B95FF`, `#A5ADFF`, `#C9CEFF` |
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(139, 149, 255, 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(139, 149, 255, 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(139, 149, 255, 0.18)`, color: `#8B95FF`
414 
415#### Input
416 
417- **hover** — border: `1px solid rgba(139, 149, 255, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)`
418- **focus** — border: `1px solid rgba(139, 149, 255, 0.65)`, shadow: `0 0 0 4px rgba(139, 149, 255, 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(139, 149, 255, 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(139, 149, 255, 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(139, 149, 255, 0.08)`
431- **focus** — outline: `2px solid rgba(139, 149, 255, 0.5)`, outline-offset: `2px`
432- **selected** — bg: `rgba(139, 149, 255, 0.18)`, color: `#8B95FF`
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(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Soft lift + top-edge gloss. |
469| level2 | `0 12px 32px -8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. |
470| level3 | `0 24px 64px -16px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(139, 149, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. |
471| level4 | `0 40px 96px -24px rgba(0, 0, 0, 0.5), 0 0 48px -12px rgba(139, 149, 255, 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 `#8B95FF`, underline `hover`
480- **blockquote:** border `1px solid rgba(139, 149, 255, 0.4)`, padding `0.9em 1.2em`
481- **code:** background `rgba(139, 149, 255, 0.1)`, color `#8B95FF`
482 
483### Accessibility (WCAG 2.1)
484 
485**Overall:** AA
486 
487| Pair | Ratio | Required | Grade | Suggested fix |
488|------|-------|----------|-------|---------------|
489| Body text on surface | 15.67:1 | AA | AAA | — |
490| Body text on canvas | 16.68:1 | AA | AAA | — |
491| Muted text on surface | 6.4:1 | AA | AA | — |
492| Accent on surface | 6.84:1 | AA-Large | AA | — |
493| Accent on canvas | 7.28:1 | AA-Large | AAA | — |
494