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.
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: "Atelier Glass"3description: "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."4tags: [glass, modern, premium, minimal, saas]5colors:6 primary: "#1a1830"7 secondary: "#6b6987"8 tertiary: "#1a1830"9 neutral: "#e6e3f0"10 surface: "#eeeaf5"11typography:12 display: Spectral13 body: "Plus Jakarta Sans"14 mono: "JetBrains Mono"15 scale:16 hero: "5rem / 1.02 / 500 / -0.035em"17 h1: "3rem / 1.1 / 600 / -0.025em"18 h2: "1.625rem / 1.25 / 600 / -0.012em"19 body: "1.0625rem / 1.62 / 400 / -0.005em"20radius:21 sm: 10px22 md: 16px23 lg: 22px24 pill: 9999px25shadows:26 card: "rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px"27 button: none28borders:29 card: "1px solid rgba(255,255,255,0.55)"30 divider: rgba(26,24,48,0.10)31buttons:32 primary:33 background: #3d3a8a34 color: #f4f2fb35 border: none36 shape: rounded37 padding: 11px 22px38 font: 600 / 0.875rem39 secondary:40 background: rgba(255,255,255,0.55)41 color: #1a183042 border: 1px solid rgba(26,24,48,0.10)43 shape: rounded44 padding: 11px 22px45 font: 500 / 0.875rem46 outline:47 background: transparent48 color: #1a183049 border: 1px solid rgba(26,24,48,0.18)50 shape: rounded51 padding: 11px 22px52 font: 500 / 0.875rem53 ghost:54 background: transparent55 color: #6b698756 border: none57 shape: rounded58 padding: 11px 16px59 font: 500 / 0.875rem60charts:61 variant: "thin-bars"62 stroke_width: 1.563 fill_opacity: 0.164 gridlines: false65 bar_gap: 5px66 highlight: single67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap"69dependencies: ["lucide-react"]70---71 72# Atelier Glass73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Atelier Glass** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — rounded shape, bg `#3d3a8a`, text `#f4f2fb`, padding `11px 22px`, weight `600`.110- **Secondary** — rounded shape, bg `rgba(255,255,255,0.55)`, text `#1a1830`, border `1px solid rgba(26,24,48,0.10)`, padding `11px 22px`, weight `500`.111- **Outline** — rounded shape, text `#1a1830`, border `1px solid rgba(26,24,48,0.18)`, padding `11px 22px`, weight `500`.112- **Ghost** — rounded shape, text `#6b6987`, padding `11px 16px`, weight `500`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#eeeaf5`121- Border: `1px solid rgba(255,255,255,0.55)`122- Shadow: `rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px`123- Radius: `radius.lg` (`22px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- No gridlines — let the bars/lines carry the data.134- Highlight strategy: `single` — emphasize a single bar/point per chart.135 136#### Typography pairings137 138- **Display (`Spectral`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Plus Jakarta Sans`)** — paragraphs, labels, button text, form inputs.140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.141 142### 4 · Hard constraints143 144Never do any of the following without explicit instruction from the user:145 146- Introduce a new color, font, radius, or shadow that isn't declared above.147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.151 152### 5 · Before you finish — verify153 154Run through this checklist for every screen you produce:155 156- [ ] Every color used appears in the Colors table above.157- [ ] Headlines use the display font; body copy uses the body font.158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.160- [ ] Cards and dividers use the declared border + shadow tokens.161- [ ] No values were invented; if you needed something missing, you stopped and asked.162 163---164 165## 1. Atmosphere166 167Atelier Glass is a studio interface built around real glassmorphism. The page surface is a soft tonal lavender-bone `#eeeaf5` — never white, never grey. Cards are frosted glass: `background: rgba(255,255,255,0.55)`, `backdrop-filter: blur(20px)`, with a 1px white inner border at 55% opacity that picks up the page tint and reads as light bouncing through the pane. Display headlines run in Spectral 500 at 80px with one italic word per headline — the calligraphic accent through frosted glass. Body sits in Plus Jakarta Sans at 17px on a 1.62 leading. The single accent is deep indigo `#3d3a8a` reserved for the primary CTA, the active panel ring, and the focus state — never as a background, never as a fill.168 169The discipline is in the glass behaviour: every elevated surface uses `backdrop-filter: blur(20px) saturate(1.4)` with a 55% white tint — the saturation lift is what makes the lavender bleed through and reads as actual frosted glass, not as a grey overlay.170 171**Signature moves**172- Real `backdrop-filter: blur(20px) saturate(1.4)` on every elevated card173- Lavender-bone surface `#eeeaf5` — the tint that bleeds through the glass IS the system174- Spectral 500 italic accent on one word per headline — the calligraphic moment175- Indigo `#3d3a8a` exclusively on primary CTA + active panel ring + focus state176- 1px inner border at 55% white on every glass card — the bouncing-light edge177 178## 2. Palette179 180### Surfaces181- **Lavender Bone** `#eeeaf5` — page background (the tint that bleeds through glass)182- **Lavender Lift** `#e6e3f0` — secondary tonal surface, tab rail183- **Glass** `rgba(255,255,255,0.55)` — frosted card fill (always with backdrop-blur 20px + saturate 1.4)184- **Glass Edge** `rgba(255,255,255,0.55)` — 1px inner border on every glass card185 186### Ink187- **Ink** `#1a1830` — text, headings (deep indigo-black, slight purple undertone)188- **Ink 50** `#6b6987` — secondary text, mono labels189 190### Accent191- **Indigo** `#3d3a8a` — primary CTA, active panel ring, focus state192- **Indigo Soft** `rgba(61,58,138,0.12)` — focus ring background, hovered state193 194## 3. Typography195 196| Role | Font | Size | Weight | Leading | Tracking |197|------|------|------|--------|---------|----------|198| Hero | Spectral | 80px | 500 | 1.02 | -0.035em |199| Hero Italic Word | Spectral (italic) | 80px | 500 | 1.02 | -0.035em |200| H1 | Plus Jakarta Sans | 48px | 600 | 1.1 | -0.025em |201| H2 | Plus Jakarta Sans | 26px | 600 | 1.25 | -0.012em |202| Body | Plus Jakarta Sans | 17px | 400 | 1.62 | -0.005em |203| UI / Button | Plus Jakarta Sans | 14px | 600 | 1.4 | 0 |204| Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.08em uppercase |205| Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums |206 207Spectral italic is the signature moment — exactly one word per headline gets the italic. Anything more and the page reads as a wedding invitation.208 209## 4. Buttons210 211### Primary (Indigo Rounded)212```css213background: #3d3a8a;214color: #f4f2fb;215padding: 11px 22px;216border-radius: 16px;217font-weight: 600;218```219 220The 16px radius matches the glass cards — the button reads as a solid indigo glass tile sitting alongside the frosted ones.221 222### Secondary (Glass)223```css224background: rgba(255,255,255,0.55);225backdrop-filter: blur(20px) saturate(1.4);226border: 1px solid rgba(26,24,48,0.10);227```228 229The secondary IS a glass tile — same blur, same border, smaller scale.230 231### Outline & Ghost232- Outline: transparent, 1px hairline at 18% ink233- Ghost: no border, ink-50, hover lifts to glass234 235## 5. Cards236 237```css238background: rgba(255,255,255,0.55);239backdrop-filter: blur(20px) saturate(1.4);240border: 1px solid rgba(255,255,255,0.55);241border-radius: 22px;242box-shadow: rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px;243```244 245The `saturate(1.4)` is what separates this from generic 2018 glassmorphism — it pulls the lavender tint forward through the glass instead of greying it out. The 1px inner border at 55% white catches the page tint and reads as light bouncing off the front face of the pane.246 247## 6. Charts248 249Thin precise bars (4px wide, 5px gap). One bar in indigo, others in 22% ink. Line charts at 1.5px ink with a 10% indigo fill, ending in an indigo dot marker. NO gridlines — the glass card itself frames the chart.250 251## 7. Tabs252 253Pill tabs (9999px radius). Active = indigo-soft background fill, ink text, no border. Inactive = transparent, ink-50. Sits inside a glass rail.254 255## 8. Spacing256 257- Base 4px258- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`259- Section padding: 96px desktop, 48px mobile260 261## 9. Do's & don'ts262 263✅ **Do**264- Use real `backdrop-filter: blur(20px) saturate(1.4)` — the saturation lift is non-negotiable265- Hold the lavender-bone page surface — the tint that bleeds through the glass IS the system266- Reserve indigo for primary CTA + active panel ring + focus state — never as a background267- Use Spectral italic on exactly one word per headline — the calligraphic moment268 269❌ **Don't**270- Use white or grey backgrounds — the tint is what makes the glass read as glass271- Use `opacity: 0.5` instead of `backdrop-filter` — that is fake glass and reads as fog272- Use indigo as a fill or background — three surfaces only273- Use Spectral for body — Plus Jakarta Sans handles all prose; Spectral is accent only274 275---276 277## Tokens278 279> Generated from the same source the live preview renders from.280> Treat the values below as the contract — never substitute approximations.281 282### Colors283 284| Role | Value |285|-----------|-------|286| primary | `#1a1830` |287| secondary | `#6b6987` |288| tertiary | `#1a1830` |289| neutral | `#e6e3f0` |290| surface | `#eeeaf5` |291 292### Typography293 294- **Display:** Spectral295- **Body:** Plus Jakarta Sans296- **Mono:** JetBrains Mono297 298| Role | size / leading / weight / tracking |299|------|------------------------------------|300| Hero | 5rem / 1.02 / 500 / -0.035em |301| H1 | 3rem / 1.1 / 600 / -0.025em |302| H2 | 1.625rem / 1.25 / 600 / -0.012em |303| Body | 1.0625rem / 1.62 / 400 / -0.005em |304 305### Radius306 307- sm: `10px`308- md: `16px`309- lg: `22px`310- pill: `9999px`311 312### Shadows313 314- **card:** `rgba(26,24,48,0.05) 0 1px 2px, rgba(26,24,48,0.04) 0 8px 24px -8px`315- **button:** `none`316 317### Borders318 319- **card:** `1px solid rgba(255,255,255,0.55)`320- **divider:** `rgba(26,24,48,0.10)`321 322### Buttons323 324Four variants, each fully tokenized. The preview renders from these exact values.325 326#### Primary327 328| Property | Value |329|----------|-------|330| shape | `rounded` |331| background | `#3d3a8a` |332| color | `#f4f2fb` |333| border | `none` |334| padding | `11px 22px` |335| fontWeight | `600` |336| fontSize | `0.875rem` |337 338#### Secondary339 340| Property | Value |341|----------|-------|342| shape | `rounded` |343| background | `rgba(255,255,255,0.55)` |344| color | `#1a1830` |345| border | `1px solid rgba(26,24,48,0.10)` |346| padding | `11px 22px` |347| fontWeight | `500` |348| fontSize | `0.875rem` |349 350#### Outline351 352| Property | Value |353|----------|-------|354| shape | `rounded` |355| background | `transparent` |356| color | `#1a1830` |357| border | `1px solid rgba(26,24,48,0.18)` |358| padding | `11px 22px` |359| fontWeight | `500` |360| fontSize | `0.875rem` |361 362#### Ghost363 364| Property | Value |365|----------|-------|366| shape | `rounded` |367| background | `transparent` |368| color | `#6b6987` |369| border | `none` |370| padding | `11px 16px` |371| fontWeight | `500` |372| fontSize | `0.875rem` |373 374### Charts375 376| Property | Value |377|----------|-------|378| variant | `thin-bars` |379| strokeWidth | `1.5` |380| fillOpacity | `0.1` |381| gridlines | `false` |382| barGap | `5px` |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=Plus+Jakarta+Sans:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Spectral"', 'serif'], sans: ['"Plus Jakarta Sans"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1a1830', secondary: '#6b6987', accent: '#1a1830', neutral: '#e6e3f0', surface: '#eeeaf5', }, borderRadius: { sm: '10px', md: '16px', lg: '22px', }, }, },};An architecture studio's monograph rendered in HTML. Cormorant Garamond at oversized scale for project titles, Inter for body, concrete-grey surfaces with one warm terracotta accent reserved for the project number. Built for architecture firms, design studios, and portfolio sites where each project deserves its own page.
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.
Warm cream parchment canvas, humanist variable sans, opacity-driven gray scale, and the signature inset-shadow dark pill — quiet craft over cold tech.
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.