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