1---
2name: Frostlite
3description: "Light glass. Pale daylight canvas with a soft mesh aurora behind it; cards float as frosted panes with a 28px backdrop-blur and faint inset highlight. Depth without the weight of dark mode."
4tags: [glass, light, minimal, premium, saas, modern]
5colors:
6  primary:   "#0E1320"
7  secondary: "#5A6478"
8  tertiary:  "#6E7BFF"
9  neutral:   "#EFF2F8"
10  surface:   "#FFFFFF"
11typography:
12  display: Geist
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 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)"
27  button: "0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)"
28borders:
29  card:    "1px solid rgba(255, 255, 255, 0.65)"
30  divider: "rgba(14, 19, 32, 0.06)"
31glass:
32  surface: "rgba(255, 255, 255, 0.55)"
33  blur:    28px
34  saturate: 150%
35  border:  "1px solid rgba(255, 255, 255, 0.65)"
36  shadow:  "0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)"
37  inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.85)"
38  backdrop: "radial-gradient(at 12% 18%, rgba(110, 123, 255, 0.20) 0px, transparent 45%), radial-gradient(at 88% 14%, rgba(170, 195, 255, 0.22) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(195, 210, 255, 0.18) 0px, transparent 55%)"
39buttons:
40  primary:
41    background: linear-gradient(180deg, #7C89FF 0%, #5563E8 100%)
42    color: #FFFFFF
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 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)
48  secondary:
49    background: rgba(255, 255, 255, 0.55)
50    color: #0E1320
51    border: 1px solid rgba(255, 255, 255, 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: #0E1320
60    border: 1px solid rgba(14, 19, 32, 0.18)
61    shape: pill
62    padding: 11px 22px
63    font: 500 / 0.9375rem / -0.005em
64  ghost:
65    background: transparent
66    color: #5A6478
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.18
76  gridlines: false
77  highlight: last
78  dot_marker: true
79  axis_color: "#5A6478"
80  palette: ["#6E7BFF", "#A4B0FF", "#D2D9FF"]
81fonts_url: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
82dependencies: ["lucide-react"]
83---
84 
85# Frostlite
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 **Frostlite** 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, #7C89FF 0%, #5563E8 100%)`, text `#FFFFFF`, border `1px solid rgba(255, 255, 255, 0.20)`, padding `12px 24px`, weight `600`, shadow `0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)`.
123- **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.55)`, text `#0E1320`, border `1px solid rgba(255, 255, 255, 0.70)`, padding `12px 24px`, weight `500`.
124- **Outline** — pill shape, text `#0E1320`, border `1px solid rgba(14, 19, 32, 0.18)`, padding `11px 22px`, weight `500`.
125- **Ghost** — pill shape, text `#5A6478`, 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: `#FFFFFF`
134- Border: `1px solid rgba(255, 255, 255, 0.65)`
135- Shadow: `0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)`
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(28px)` 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: `#6E7BFF`, `#A4B0FF`, `#D2D9FF`.
149 
150#### Typography pairings
151 
152- **Display (`Geist`)** — 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
180Frostlite is light glass. The page sits on a pale daylight canvas with a soft cool aurora — three faint radial blobs in periwinkle, sky, and ice — painted into the background. Cards float above the aurora as actual frosted glass panes: 28px backdrop-blur, 55% white surface, 1px white-alpha hairline, and a faint inset top highlight that reads as a top-edge gloss.
181 
182The glass is the entire system. Everything else — type, color, buttons — is calibrated to let the glass do the work.
183 
184For modern SaaS landings, premium product launches, AI tools that want depth without the weight of dark mode.
185 
186## The Glass Recipe
187Cards are not "white with a shadow." They are real glass:
188 
189```css
190.frostlite-pane {
191  background: rgba(255, 255, 255, 0.55);
192  backdrop-filter: blur(28px) saturate(150%);
193  -webkit-backdrop-filter: blur(28px) saturate(150%);
194  border: 1px solid rgba(255, 255, 255, 0.65);
195  box-shadow:
196    inset 0 1px 0 rgba(255, 255, 255, 0.85),
197    0 24px 60px -28px rgba(20, 24, 60, 0.18),
198    0 2px 8px -4px rgba(20, 24, 60, 0.06);
199  border-radius: 24px;
200}
201```
202 
203The page MUST have a chromatic backdrop for the glass to mean anything. Apply this aurora to the body or a fixed background layer:
204 
205```css
206body {
207  background:
208    radial-gradient(at 12% 18%, rgba(110,123,255,0.20) 0, transparent 45%),
209    radial-gradient(at 88% 14%, rgba(170,195,255,0.22) 0, transparent 50%),
210    radial-gradient(at 78% 92%, rgba(195,210,255,0.18) 0, transparent 55%),
211    #EFF2F8;
212}
213```
214 
215Without the aurora, the glass collapses to "translucent grey." The two are inseparable.
216 
217## Color
218- **Ink #0E1320** — primary text.
219- **Slate #5A6478** — secondary text, axis labels.
220- **Periwinkle #6E7BFF** — the only chromatic accent. Primary CTA, link hover, chart line.
221- **Daylight #EFF2F8** — page canvas.
222- **Glass #FFFFFF @ 55%** — card surface (translucent).
223 
224The aurora uses three soft tints of periwinkle / sky / ice — never anything warm.
225 
226## Typography
227- **Display: Geist 600** at 4.5rem with -3.5% tracking.
228- **Body: Inter 400** at 1rem with 1.65 leading.
229 
230| Role | Font | Size | Weight | Tracking |
231|------|------|------|--------|----------|
232| Hero | Geist | 4.5rem | 600 | -0.035em |
233| H1 | Geist | 2.625rem | 600 | -0.03em |
234| H2 | Geist | 1.5rem | 600 | -0.015em |
235| Body | Inter | 1rem | 400 | -0.005em / 1.65 |
236 
237## Geometry
238- **Radii: 12 / 18 / 24.** Glass needs generous corners to read as a pane.
239- **Pill buttons** for primary + secondary. Sharp buttons fight the soft glass.
240- **Section gap: 120px** desktop, 72px mobile. The aurora needs room to breathe.
241 
242## Buttons
243- **Primary** — vertical periwinkle gradient with an inner top-edge gloss. Pill shape, white label at 600.
244- **Secondary** — frosted glass pill (the same recipe as cards, scaled down). Backdrop-blur 20px.
245- **Outline** — bare hairline pill at 18% ink.
246- **Ghost** — bare slate label, hover underline.
247 
248## Cards
249Glass panes — see the recipe above. Radius 24px. Padding 32px minimum. Cards never sit flush against each other; always 24-32px gap so the aurora reads between them.
250 
251## Charts & Data
252Periwinkle area chart, 2px stroke, 18% fill opacity, no gridlines. End-of-line dot. The chart sits inside a glass card, never on bare canvas.
253 
254## Do's and Don'ts
255- ✅ The aurora backdrop is mandatory. Without it the glass dies.
256- ✅ Cards always include the inner top-edge highlight — that's what reads as "polished pane."
257- ✅ One chromatic accent only — periwinkle. Everything else is ink/slate.
258- ✅ Generous radii (18-24px). Glass at sharp corners reads as plastic.
259- ❌ No warm tints in the aurora. The system is cool-monochrome.
260- ❌ No solid white cards. If a card isn't glass, it's not in the system.
261- ❌ No drop shadows beyond the soft ink-tinted glass shadow.
262- ❌ No second chromatic accent. Periwinkle is the only chroma allowed.
263 
264---
265 
266## Tokens
267 
268> Generated from the same source the live preview renders from.
269> Treat the values below as the contract — never substitute approximations.
270 
271### Colors
272 
273| Role      | Value |
274|-----------|-------|
275| primary   | `#0E1320` |
276| secondary | `#5A6478` |
277| tertiary  | `#6E7BFF` |
278| neutral   | `#EFF2F8` |
279| surface   | `#FFFFFF` |
280 
281### Typography
282 
283- **Display:** Geist
284- **Body:** Inter
285- **Mono:** JetBrains Mono
286 
287| Role | size / leading / weight / tracking |
288|------|------------------------------------|
289| Hero | 4.5rem / 1.05 / 600 / -0.035em |
290| H1   | 2.625rem / 1.1 / 600 / -0.03em |
291| H2   | 1.5rem / 1.3 / 600 / -0.015em |
292| Body | 1rem / 1.65 / 400 / -0.005em |
293 
294### Radius
295 
296- sm: `12px`
297- md: `18px`
298- lg: `24px`
299- pill: `9999px`
300 
301### Shadows
302 
303- **card:** `0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)`
304- **button:** `0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)`
305 
306### Borders
307 
308- **card:** `1px solid rgba(255, 255, 255, 0.65)`
309- **divider:** `rgba(14, 19, 32, 0.06)`
310 
311### Glass
312 
313Translucent panes with backdrop-filter — the preview renders cards from these exact values.
314 
315| Property | Value |
316|----------|-------|
317| surface | `rgba(255, 255, 255, 0.55)` |
318| blur | `28px` |
319| saturate | `150%` |
320| border | `1px solid rgba(255, 255, 255, 0.65)` |
321| shadow | `0 24px 60px -28px rgba(20, 24, 60, 0.18), 0 2px 8px -4px rgba(20, 24, 60, 0.06)` |
322| innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.85)` |
323| backdrop | `radial-gradient(at 12% 18%, rgba(110, 123, 255, 0.20) 0px, transparent 45%), radial-gradient(at 88% 14%, rgba(170, 195, 255, 0.22) 0px, transparent 50%), radial-gradient(at 78% 92%, rgba(195, 210, 255, 0.18) 0px, transparent 55%)` |
324 
325### Buttons
326 
327Four variants, each fully tokenized. The preview renders from these exact values.
328 
329#### Primary
330 
331| Property | Value |
332|----------|-------|
333| shape | `pill` |
334| background | `linear-gradient(180deg, #7C89FF 0%, #5563E8 100%)` |
335| color | `#FFFFFF` |
336| border | `1px solid rgba(255, 255, 255, 0.20)` |
337| padding | `12px 24px` |
338| fontWeight | `600` |
339| fontSize | `0.9375rem` |
340| tracking | `-0.005em` |
341| shadow | `0 10px 28px -14px rgba(110, 123, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35)` |
342 
343#### Secondary
344 
345| Property | Value |
346|----------|-------|
347| shape | `pill` |
348| background | `rgba(255, 255, 255, 0.55)` |
349| color | `#0E1320` |
350| border | `1px solid rgba(255, 255, 255, 0.70)` |
351| padding | `12px 24px` |
352| fontWeight | `500` |
353| fontSize | `0.9375rem` |
354| tracking | `-0.005em` |
355| backdropBlur | `20px` |
356| backdropSaturate | `150%` |
357 
358#### Outline
359 
360| Property | Value |
361|----------|-------|
362| shape | `pill` |
363| background | `transparent` |
364| color | `#0E1320` |
365| border | `1px solid rgba(14, 19, 32, 0.18)` |
366| padding | `11px 22px` |
367| fontWeight | `500` |
368| fontSize | `0.9375rem` |
369| tracking | `-0.005em` |
370 
371#### Ghost
372 
373| Property | Value |
374|----------|-------|
375| shape | `pill` |
376| background | `transparent` |
377| color | `#5A6478` |
378| border | `none` |
379| padding | `11px 6px` |
380| fontWeight | `500` |
381| fontSize | `0.9375rem` |
382| tracking | `-0.005em` |
383| hoverHint | `underline` |
384 
385### Charts
386 
387| Property | Value |
388|----------|-------|
389| variant | `area` |
390| strokeWidth | `2` |
391| fillOpacity | `0.18` |
392| gridlines | `false` |
393| highlight | `last` |
394| dotMarker | `true` |
395| axisColor | `#5A6478` |
396| palette | `#6E7BFF`, `#A4B0FF`, `#D2D9FF` |
397 
398---
399 
400## Pro tokens
401 
402> Production-fidelity tokens. States, density, motion, elevation,
403> content rules and a measured WCAG contract — derived from the
404> resting tokens unless explicitly authored.
405 
406### States
407 
408#### Button
409 
410- **hover** — shadow: `0 8px 24px -8px rgba(110, 123, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-1px)`, filter: `saturate(1.15)`
411- **focus** — outline: `2px solid rgba(110, 123, 255, 0.5)`, outline-offset: `3px`
412- **active** — transform: `translateY(0) scale(0.98)`, filter: `brightness(0.96)`
413- **disabled** — opacity: `0.4`, filter: `saturate(0.4) blur(0.4px)`
414- **loading** — opacity: `0.7`
415- **selected** — bg: `rgba(110, 123, 255, 0.18)`, color: `#6E7BFF`
416 
417#### Input
418 
419- **hover** — border: `1px solid rgba(110, 123, 255, 0.4)`, shadow: `inset 0 1px 0 rgba(255,255,255,0.18)`
420- **focus** — border: `1px solid rgba(110, 123, 255, 0.65)`, shadow: `0 0 0 4px rgba(110, 123, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.18)`
421- **disabled** — opacity: `0.4`
422- **error** — border: `1px solid rgba(248,113,113,0.7)`, shadow: `0 0 0 4px rgba(248,113,113,0.15)`
423 
424#### Card
425 
426- **hover** — shadow: `0 16px 48px -16px rgba(110, 123, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)`, transform: `translateY(-2px)`, filter: `saturate(1.1)`
427- **selected** — border: `1px solid rgba(110, 123, 255, 0.5)`
428- **dragging** — shadow: `0 24px 64px -16px rgba(0,0,0,0.4)`, transform: `scale(1.02)`, opacity: `0.85`
429 
430#### Tab
431 
432- **hover** — bg: `rgba(110, 123, 255, 0.08)`
433- **focus** — outline: `2px solid rgba(110, 123, 255, 0.5)`, outline-offset: `2px`
434- **selected** — bg: `rgba(110, 123, 255, 0.18)`, color: `#6E7BFF`
435 
436### Density
437 
438| Mode | padding × | row × | body | radius × | Use for |
439|------|-----------|-------|------|----------|---------|
440| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
441| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
442| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
443 
444### Motion
445 
446**Signature — Refract.** Long opacity- and blur-driven transitions. Not a hard move, but a shift of light across the glass surface.
447 
448```css
449transition: 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);
450```
451 
452| Token | Value |
453|-------|-------|
454| duration.instant | `100ms` |
455| duration.fast | `200ms` |
456| duration.base | `350ms` |
457| duration.slow | `550ms` |
458| easing.standard | `cubic-bezier(0.32, 0.72, 0, 1)` |
459| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
460| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
461| easing.spring | `cubic-bezier(0.34, 1.2, 0.64, 1)` |
462 
463### Elevation
464 
465Five-level scale, system-specific recipe.
466 
467| Level | Shadow | Recipe |
468|-------|--------|--------|
469| level0 | `inset 0 1px 0 rgba(255,255,255,0.18)` | Flat glass surface — top-edge gloss only. |
470| 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. |
471| level2 | `0 12px 32px -8px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18)` | Floating pane — popover. |
472| level3 | `0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(110, 123, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.18)` | Sheet — accent rim for depth. |
473| level4 | `0 40px 96px -24px rgba(15, 23, 42, 0.5), 0 0 48px -12px rgba(110, 123, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.18)` | Modal — dramatic glow, scrim required. |
474 
475### Content
476 
477- **measure:** `66ch` (max line length for body prose)
478- **paragraph spacing:** `1.25em`
479- **list indent:** `1.5em`
480- **list gap:** `0.5em`
481- **link:** color `#6E7BFF`, underline `hover`
482- **blockquote:** border `1px solid rgba(110, 123, 255, 0.4)`, padding `0.9em 1.2em`
483- **code:** background `rgba(110, 123, 255, 0.1)`, color `#6E7BFF`
484 
485### Accessibility (WCAG 2.1)
486 
487**Overall:** AA-Large
488 
489| Pair | Ratio | Required | Grade | Suggested fix |
490|------|-------|----------|-------|---------------|
491| Body text on surface | 18.54:1 | AA | AAA | — |
492| Body text on canvas | 16.53:1 | AA | AAA | — |
493| Muted text on surface | 5.95:1 | AA | AA | — |
494| Accent on surface | 3.54:1 | AA-Large | AA-Large | — |
495| Accent on canvas | 3.15:1 | AA-Large | AA-Large | — |
496