Real glassmorphism without the cliché. A soft tonal backdrop in cool lavender, surfaces that actually blur the layers behind them, hairline edges in 8% ink, and a single periwinkle accent. The depth is restraint, not decoration.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Prism Glass"3description: "Real glassmorphism without the cliché. A soft tonal backdrop in cool lavender, surfaces that actually blur the layers behind them, hairline edges in 8% ink, and a single periwinkle accent. The depth is restraint, not decoration."4tags: [glass, minimal, premium, modern, soft]5colors:6 primary: "#1a1d2c"7 secondary: "#5a5f73"8 tertiary: "#1a1d2c"9 neutral: "#eef0f7"10 surface: rgba(255,255,255,0.62)11typography:12 display: Manrope13 body: Manrope14 mono: "JetBrains Mono"15 scale:16 hero: "3.75rem / 1.04 / 700 / -0.035em"17 h1: "2.5rem / 1.12 / 700 / -0.025em"18 h2: "1.625rem / 1.25 / 600 / -0.02em"19 body: "1rem / 1.6 / 400 / -0.005em"20radius:21 sm: 10px22 md: 16px23 lg: 22px24 pill: 9999px25shadows:26 card: "rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px"27 button: "rgba(108,124,255,0.22) 0 6px 18px -6px"28borders:29 card: "1px solid rgba(26,29,44,0.06)"30 divider: rgba(26,29,44,0.06)31buttons:32 primary:33 background: #6c7cff34 color: #ffffff35 border: none36 shape: pill37 padding: 10px 20px38 font: 600 / 0.875rem39 shadow: rgba(108,124,255,0.22) 0 6px 18px -6px40 secondary:41 background: rgba(255,255,255,0.65)42 color: #1a1d2c43 border: 1px solid rgba(26,29,44,0.08)44 shape: pill45 padding: 10px 20px46 font: 600 / 0.875rem47 outline:48 background: transparent49 color: #1a1d2c50 border: 1px solid rgba(26,29,44,0.14)51 shape: pill52 padding: 10px 20px53 font: 600 / 0.875rem54 ghost:55 background: transparent56 color: #5a5f7357 border: none58 shape: pill59 padding: 10px 16px60 font: 600 / 0.875rem61charts:62 variant: "rounded-bars"63 stroke_width: 1.564 fill_opacity: 0.165 gridlines: false66 bar_gap: 12px67 highlight: single68 dot_marker: true69fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"70dependencies: ["lucide-react"]71---72 73# Prism Glass74 75## AI Build Instructions76 77> **Read this section before writing any code.** The rules below78> are non-negotiable. Every value used in the UI must come from this79> file's frontmatter — never substitute, approximate, or invent new80> colors, fonts, radii, or shadows. If a value is missing, ask the81> user before adding one.82 83### 1 · Your role84 85You are building UI for a project that has adopted **Prism Glass** as its86design system. Treat `DESIGN.md` as the single source of truth.87Your job is to translate the user's product requirements into88components and pages that look like they were designed by the same89person who authored this file.90 91### 2 · Token compliance92 93- Pull every color, font family, radius, shadow, and spacing value94 from the frontmatter at the top of this file.95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never96 hard-code hex values that bypass the system.97- When a token can be expressed as a CSS variable, declare it once98 in your global stylesheet and reference it everywhere downstream.99- The Google Fonts `<link>` is provided in the Typography section.100 Add it to `<head>` before any component renders.101 102### 3 · Component recipes103 104Use these recipes verbatim when building the corresponding component.105 106#### Buttons107 108Four variants are defined. Pick one — never blend variants or invent a fifth.109 110- **Primary** — pill shape, bg `#6c7cff`, text `#ffffff`, padding `10px 20px`, weight `600`, shadow `rgba(108,124,255,0.22) 0 6px 18px -6px`.111- **Secondary** — pill shape, bg `rgba(255,255,255,0.65)`, text `#1a1d2c`, border `1px solid rgba(26,29,44,0.08)`, padding `10px 20px`, weight `600`.112- **Outline** — pill shape, text `#1a1d2c`, border `1px solid rgba(26,29,44,0.14)`, padding `10px 20px`, weight `600`.113- **Ghost** — pill shape, text `#5a5f73`, padding `10px 16px`, weight `600`.114 115Reach for **primary** as the single dominant CTA per screen.116**Secondary** for the supporting action. **Outline** for tertiary117actions in toolbars. **Ghost** for inline links and table actions.118 119#### Cards120 121- Background: `rgba(255,255,255,0.62)`122- Border: `1px solid rgba(26,29,44,0.06)`123- Shadow: `rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px`124- Radius: `radius.lg` (`22px`)125- Internal padding: `20px` for compact cards, `24–28px` for content cards.126 127#### Tabs128 129Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color.130 131#### Charts132 133- Bar/line variant: `rounded-bars`134- No gridlines — let the bars/lines carry the data.135- Highlight strategy: `single` — emphasize a single bar/point per chart.136 137#### Typography pairings138 139- **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks.140- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.141- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.142 143### 4 · Hard constraints144 145Never do any of the following without explicit instruction from the user:146 147- Introduce a new color, font, radius, or shadow that isn't declared above.148- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).149- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.150- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.151- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.152 153### 5 · Before you finish — verify154 155Run through this checklist for every screen you produce:156 157- [ ] Every color used appears in the Colors table above.158- [ ] Headlines use the display font; body copy uses the body font.159- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).160- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.161- [ ] Cards and dividers use the declared border + shadow tokens.162- [ ] No values were invented; if you needed something missing, you stopped and asked.163 164---165 166## 1. Atmosphere167 168Prism Glass is glassmorphism done with restraint. The backdrop is a soft tonal mesh — cool lavender shading into pale rose, never harsh, never neon — and surfaces sit on top as translucent panes that genuinely blur the layers behind them. Edges are 1px hairlines at 6% ink, never thick borders. The hero CTA is the single periwinkle moment in the entire system.169 170The discipline is in what's omitted: no second accent, no decorative gradients on the surfaces themselves, no glow halos. Glass earns its drama from the backdrop bleeding through, not from chrome.171 172**Signature moves**173- Real `backdrop-filter: blur(28px) saturate(180%)` on every surface — not faked with white at 80%174- Soft tonal mesh backdrop (lavender → pale rose), never a 2-color gradient175- One periwinkle accent (`#6c7cff`), used only on the primary CTA and active pill tab176- Pill shape on every interactive surface — buttons, tabs, badges177- Hairline borders at 6% ink — the glass needs an edge to read178 179## 2. Palette180 181### Surfaces182- **Glass** `rgba(255,255,255,0.62)` over a blurred backdrop — the standard pane183- **Glass Strong** `rgba(255,255,255,0.78)` — for modals and the nav184- **Glass Subtle** `rgba(255,255,255,0.42)` — for inline chips and inputs185 186### Backdrop (apply at body level)187- `radial-gradient(ellipse 80% 50% at 15% 0%, oklch(0.92 0.08 280 / 0.45), transparent 60%)`188- `radial-gradient(ellipse 70% 50% at 85% 10%, oklch(0.92 0.08 340 / 0.32), transparent 60%)`189- Base `#eef0f7`190 191### Ink192- **Ink** `#1a1d2c` — text, headings193- **Ink 60** `#5a5f73` — secondary text194- **Hairline** `rgba(26,29,44,0.06)` — every divider, every glass edge195 196### Accent197- **Periwinkle** `#6c7cff` — primary CTA, active tab198- **Periwinkle Soft** `rgba(108,124,255,0.12)` — focus ring199 200## 3. Typography201 202| Role | Font | Size | Weight | Leading | Tracking |203|------|------|------|--------|---------|----------|204| Hero | Manrope | 60px | 700 | 1.04 | -0.035em |205| H1 | Manrope | 40px | 700 | 1.12 | -0.025em |206| H2 | Manrope | 26px | 600 | 1.25 | -0.02em |207| Body | Manrope | 16px | 400 | 1.6 | -0.005em |208| UI | Manrope | 13px | 600 | 1.4 | 0 |209| Mono / Metric | JetBrains Mono | 12px | 500 | 1.0 | 0.04em uppercase |210 211Manrope across the board — geometric, soft-cornered, calm. Three weights: 400 / 600 / 700.212 213## 4. Buttons214 215### Primary (Periwinkle Pill)216```css217background: #6c7cff;218color: #ffffff;219padding: 10px 20px;220border-radius: 9999px;221box-shadow: rgba(108,124,255,0.22) 0 6px 18px -6px;222```223 224### Secondary (Glass Pill)225- Glass surface (`rgba(255,255,255,0.65)`), backdrop-blur, 1px hairline at 8% ink226- Same pill shape, ink text227 228### Outline & Ghost229- Same pill shape — outline is 1px hairline at 14% ink, ghost has no border at all230 231## 5. Cards232 233Every card is a glass pane:234```css235background: rgba(255,255,255,0.62);236backdrop-filter: blur(28px) saturate(180%);237border: 1px solid rgba(26,29,44,0.06);238box-shadow:239 rgba(26,29,44,0.06) 0 1px 0 inset,240 rgba(26,29,44,0.04) 0 2px 12px -4px;241border-radius: 22px;242```243 244The 1px inset highlight at the top is what sells the glass — without it, the pane reads as flat white-over-color.245 246## 6. Charts247 248Rounded bars (4px corner) with 12px gap. One bar in periwinkle, others in 14% ink. Line charts at 1.5px in periwinkle with a 10% fill underneath, ending in a small dot marker. No gridlines — the glass surface carries the rhythm.249 250## 7. Tabs251 252Pill tabs. Active = periwinkle background, white text. Inactive = no background, ink-secondary text. Hover = 12% periwinkle wash.253 254## 8. Spacing255 256- Base 4px257- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 80`258- Section padding: 80px desktop, 40px mobile — glass needs negative space to breathe259 260## 9. Do's & don'ts261 262✅ **Do**263- Use real `backdrop-filter` with both blur AND saturate — saturation is what makes it feel glass, not opacity264- Hold the backdrop to soft tonal mesh, never a hard 2-color gradient265- Use the periwinkle exactly once per screen — primary CTA OR active tab, not both266- Keep the 1px inset highlight on every card — that is the glass267 268❌ **Don't**269- Stack glass on glass — one pane per layer, never nested270- Use a second accent color — periwinkle alone271- Use sharp corners — every surface is 16-22px or pill272- Skip backdrop-filter and fake it with white opacity — the depth disappears273 274---275 276## Tokens277 278> Generated from the same source the live preview renders from.279> Treat the values below as the contract — never substitute approximations.280 281### Colors282 283| Role | Value |284|-----------|-------|285| primary | `#1a1d2c` |286| secondary | `#5a5f73` |287| tertiary | `#1a1d2c` |288| neutral | `#eef0f7` |289| surface | `rgba(255,255,255,0.62)` |290 291### Typography292 293- **Display:** Manrope294- **Body:** Manrope295- **Mono:** JetBrains Mono296 297| Role | size / leading / weight / tracking |298|------|------------------------------------|299| Hero | 3.75rem / 1.04 / 700 / -0.035em |300| H1 | 2.5rem / 1.12 / 700 / -0.025em |301| H2 | 1.625rem / 1.25 / 600 / -0.02em |302| Body | 1rem / 1.6 / 400 / -0.005em |303 304### Radius305 306- sm: `10px`307- md: `16px`308- lg: `22px`309- pill: `9999px`310 311### Shadows312 313- **card:** `rgba(26,29,44,0.06) 0 1px 0 inset, rgba(26,29,44,0.04) 0 2px 12px -4px, rgba(26,29,44,0.06) 0 0 0 1px`314- **button:** `rgba(108,124,255,0.22) 0 6px 18px -6px`315 316### Borders317 318- **card:** `1px solid rgba(26,29,44,0.06)`319- **divider:** `rgba(26,29,44,0.06)`320 321### Buttons322 323Four variants, each fully tokenized. The preview renders from these exact values.324 325#### Primary326 327| Property | Value |328|----------|-------|329| shape | `pill` |330| background | `#6c7cff` |331| color | `#ffffff` |332| border | `none` |333| padding | `10px 20px` |334| fontWeight | `600` |335| fontSize | `0.875rem` |336| shadow | `rgba(108,124,255,0.22) 0 6px 18px -6px` |337 338#### Secondary339 340| Property | Value |341|----------|-------|342| shape | `pill` |343| background | `rgba(255,255,255,0.65)` |344| color | `#1a1d2c` |345| border | `1px solid rgba(26,29,44,0.08)` |346| padding | `10px 20px` |347| fontWeight | `600` |348| fontSize | `0.875rem` |349 350#### Outline351 352| Property | Value |353|----------|-------|354| shape | `pill` |355| background | `transparent` |356| color | `#1a1d2c` |357| border | `1px solid rgba(26,29,44,0.14)` |358| padding | `10px 20px` |359| fontWeight | `600` |360| fontSize | `0.875rem` |361 362#### Ghost363 364| Property | Value |365|----------|-------|366| shape | `pill` |367| background | `transparent` |368| color | `#5a5f73` |369| border | `none` |370| padding | `10px 16px` |371| fontWeight | `600` |372| fontSize | `0.875rem` |373 374### Charts375 376| Property | Value |377|----------|-------|378| variant | `rounded-bars` |379| strokeWidth | `1.5` |380| fillOpacity | `0.1` |381| gridlines | `false` |382| barGap | `12px` |383| highlight | `single` |384| dotMarker | `true` |385 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Manrope"', 'serif'], sans: ['"Manrope"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1a1d2c', secondary: '#5a5f73', accent: '#1a1d2c', neutral: '#eef0f7', surface: 'rgba(255,255,255,0.62)', }, borderRadius: { sm: '10px', md: '16px', lg: '22px', }, }, },};Precise dark surface with a faint 32px hairline grid baked into the canvas. Geist-class sans, JetBrains Mono, one desaturated violet accent. The primary CTA carries a 1px violet underline as its only chromatic mark.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.