Fashion editorial that doesn't shout. Off-bone surfaces, Playfair Display 400 for product names at oversized scale, Inter for body and UI, generous negative space, and a single muted oxblood accent reserved for the Add-to-Bag CTA. Built for fashion houses, jewellery brands, and high-end retail that wants the catalogue feel of a glossy quarterly.
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.
Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.
1---2name: "Vestige Folio"3description: "Fashion editorial that doesn't shout. Off-bone surfaces, Playfair Display 400 for product names at oversized scale, Inter for body and UI, generous negative space, and a single muted oxblood accent reserved for the Add-to-Bag CTA. Built for fashion houses, jewellery brands, and high-end retail that wants the catalogue feel of a glossy quarterly."4tags: [editorial, fashion, ecommerce, premium, minimal]5colors:6 primary: "#1a1612"7 secondary: "#797268"8 tertiary: "#1a1612"9 neutral: "#ece6d8"10 surface: "#f4eee0"11typography:12 display: "Playfair Display"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "7rem / 0.94 / 400 / -0.04em"17 h1: "4rem / 1 / 400 / -0.03em"18 h2: "1.875rem / 1.2 / 400 / -0.018em"19 body: "1rem / 1.7 / 400 / -0.005em"20radius:21 sm: 0px22 md: 0px23 lg: 0px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(26,22,18,0.10)"30 divider: rgba(26,22,18,0.14)31buttons:32 primary:33 background: #5a1a2234 color: #f4eee035 border: none36 shape: sharp37 padding: 14px 28px38 font: 500 / 0.8125rem / 0.14em39 uppercase: true40 secondary:41 background: transparent42 color: #1a161243 border: 1px solid #1a161244 shape: sharp45 padding: 14px 28px46 font: 500 / 0.8125rem / 0.14em47 uppercase: true48 outline:49 background: transparent50 color: #1a161251 border: 1px solid rgba(26,22,18,0.18)52 shape: sharp53 padding: 14px 28px54 font: 500 / 0.8125rem / 0.14em55 uppercase: true56 ghost:57 background: transparent58 color: #79726859 border: none60 shape: sharp61 padding: 14px 18px62 font: 500 / 0.8125rem / 0.14em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 167 fill_opacity: 068 gridlines: false69 bar_gap: 18px70 highlight: single71 dot_marker: false72fonts_url: "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"73dependencies: ["lucide-react"]74---75 76# Vestige Folio77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Vestige Folio** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 in your global stylesheet and reference it everywhere downstream.102- The Google Fonts `<link>` is provided in the Typography section.103 Add it to `<head>` before any component renders.104 105### 3 · Component recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 111Four variants are defined. Pick one — never blend variants or invent a fifth.112 113- **Primary** — sharp shape, bg `#5a1a22`, text `#f4eee0`, padding `14px 28px`, weight `500`, uppercased.114- **Secondary** — sharp shape, text `#1a1612`, border `1px solid #1a1612`, padding `14px 28px`, weight `500`, uppercased.115- **Outline** — sharp shape, text `#1a1612`, border `1px solid rgba(26,22,18,0.18)`, padding `14px 28px`, weight `500`, uppercased.116- **Ghost** — sharp shape, text `#797268`, padding `14px 18px`, weight `500`, uppercased.117 118Reach for **primary** as the single dominant CTA per screen.119**Secondary** for the supporting action. **Outline** for tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 124- Background: `#f4eee0`125- Border: `1px solid rgba(26,22,18,0.10)`126- Shadow: `none`127- Radius: `radius.lg` (`0px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Tabs131 132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.133 134#### Charts135 136- Bar/line variant: `thin-bars`137- No gridlines — let the bars/lines carry the data.138- Highlight strategy: `single` — emphasize a single bar/point per chart.139 140#### Typography pairings141 142- **Display (`Playfair Display`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.145 146### 4 · Hard constraints147 148Never do any of the following without explicit instruction from the user:149 150- Introduce a new color, font, radius, or shadow that isn't declared above.151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.155 156### 5 · Before you finish — verify157 158Run through this checklist for every screen you produce:159 160- [ ] Every color used appears in the Colors table above.161- [ ] Headlines use the display font; body copy uses the body font.162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.164- [ ] Cards and dividers use the declared border + shadow tokens.165- [ ] No values were invented; if you needed something missing, you stopped and asked.166 167---168 169## 1. Atmosphere170 171Vestige Folio is the visual language of a glossy fashion quarterly. The page surface is off-bone `#f4eee0` — closer to coated catalogue stock than to white. Product names run in Playfair Display at 112px, weight 400 — the high-contrast didone strokes earning their drama from sheer scale, never weight. Body sits in Inter at 16px on a 1.7 leading. UI labels run in Inter 500 with extreme 0.14em uppercase tracking — the catalogue-caption voice carried into every button. The single accent is muted oxblood `#5a1a22` that appears only on the Add-to-Bag CTA — the singular conversion moment in the entire system gets the singular color.172 173The discipline is in the proportion: massive Playfair on bone, generous negative space, and one oxblood button per page that doesn't apologize for being a button.174 175**Signature moves**176- Playfair Display 400 at 112px for product names — drama through scale, never weight177- Off-bone catalogue surface `#f4eee0` — never white, never beige178- Oxblood `#5a1a22` exclusively on the Add-to-Bag CTA — one conversion, one color179- All UI labels uppercase 0.14em tracking — the catalogue caption voice180- Sharp 0px radius — print rules181- Generous negative space (160px section padding) — the air IS the luxury182 183## 2. Palette184 185### Surfaces186- **Bone** `#f4eee0` — page background (warm catalogue stock)187- **Bone Lift** `#ece6d8` — secondary surfaces, lookbook panels188- **Hairline** `rgba(26,22,18,0.10)` — every divider189 190### Ink191- **Ink** `#1a1612` — text, headings, secondary CTA fill192- **Ink 50** `#797268` — secondary text, mono captions193 194### Accent195- **Oxblood** `#5a1a22` — Add-to-Bag CTA only196- That is the only color in the system.197 198## 3. Typography199 200| Role | Font | Size | Weight | Leading | Tracking |201|------|------|------|--------|---------|----------|202| Product Name (Hero) | Playfair Display | 112px | 400 | 0.94 | -0.04em |203| H1 | Playfair Display | 64px | 400 | 1.0 | -0.03em |204| H2 | Playfair Display | 30px | 400 | 1.2 | -0.018em |205| Pull Quote | Playfair Display (italic) | 28px | 400 | 1.3 | -0.012em |206| Body | Inter | 16px | 400 | 1.7 | -0.005em |207| UI / Button | Inter | 13px | 500 | 1.4 | 0.14em uppercase |208| Caption / Price | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase tabular-nums |209| Price Display | JetBrains Mono | 16px | 500 | 1.0 | 0 tabular-nums |210 211Playfair only at 400 — the high-contrast didone breaks at any heavier weight. Italic reserved for pull quotes from the season's editor letter.212 213## 4. Buttons214 215### Primary (Oxblood — Add to Bag only)216```css217background: #5a1a22;218color: #f4eee0;219padding: 14px 28px;220border-radius: 0;221text-transform: uppercase;222letter-spacing: 0.14em;223font-weight: 500;224```225 226The 0.14em tracking is wider than typical UI — that is the catalogue caption voice carried into the button.227 228### Secondary (Ink Outline — every other action)229- Transparent, 1px solid ink, ink text — same sharp shape, same wide tracking230 231### Outline & Ghost232- Outline: transparent, 1px hairline at 18% ink233- Ghost: no border, ink-50 uppercase, hover underlines234 235## 5. Cards236 237```css238background: #f4eee0;239border: 1px solid rgba(26,22,18,0.10);240border-radius: 0;241box-shadow: none;242```243 244NO shadows, NO radii, NO inset highlights. Lookbook cards lift to bone-lift surface and add a 1px ink top border (3px wide) — that is the only chrome.245 246## 6. Charts247 248Thin precise bars (3px wide, 18px gap). One bar in oxblood, others in 18% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for sales-by-collection breakdowns — they read as exhibit panels, not infographics.249 250## 7. Tabs251 252Underline 1px in ink for the active state. Inactive tabs are ink-50 in uppercase 0.14em. Hover = ink text, no underline. The active label is set in Playfair Display italic at the same size — that's the rhythm change.253 254## 8. Spacing255 256- Base 8px257- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 160, 200`258- Section padding: 160px desktop, 80px mobile — the air IS the luxury259 260## 9. Do's & don'ts261 262✅ **Do**263- Use Playfair Display at 400 only — anything heavier breaks the high-contrast didone264- Hold the oxblood for Add-to-Bag exclusively — one CTA, one color265- Use 0.14em uppercase tracking on every UI label — that's the catalogue voice266- Keep generous negative space — section padding 160px desktop is non-negotiable267 268❌ **Don't**269- Use Playfair at 600+ — bold breaks the didone proportion270- Use sharp coloured fills on secondary buttons — only oxblood, only Add-to-Bag271- Use any radius — sharp 0px is the print rule272- Use a second accent — oxblood alone, on the conversion CTA only273 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 | `#1a1612` |286| secondary | `#797268` |287| tertiary | `#1a1612` |288| neutral | `#ece6d8` |289| surface | `#f4eee0` |290 291### Typography292 293- **Display:** Playfair Display294- **Body:** Inter295- **Mono:** JetBrains Mono296 297| Role | size / leading / weight / tracking |298|------|------------------------------------|299| Hero | 7rem / 0.94 / 400 / -0.04em |300| H1 | 4rem / 1 / 400 / -0.03em |301| H2 | 1.875rem / 1.2 / 400 / -0.018em |302| Body | 1rem / 1.7 / 400 / -0.005em |303 304### Radius305 306- sm: `0px`307- md: `0px`308- lg: `0px`309- pill: `9999px`310 311### Shadows312 313- **card:** `none`314- **button:** `none`315 316### Borders317 318- **card:** `1px solid rgba(26,22,18,0.10)`319- **divider:** `rgba(26,22,18,0.14)`320 321### Buttons322 323Four variants, each fully tokenized. The preview renders from these exact values.324 325#### Primary326 327| Property | Value |328|----------|-------|329| shape | `sharp` |330| background | `#5a1a22` |331| color | `#f4eee0` |332| border | `none` |333| padding | `14px 28px` |334| fontWeight | `500` |335| fontSize | `0.8125rem` |336| tracking | `0.14em` |337| uppercase | `true` |338 339#### Secondary340 341| Property | Value |342|----------|-------|343| shape | `sharp` |344| background | `transparent` |345| color | `#1a1612` |346| border | `1px solid #1a1612` |347| padding | `14px 28px` |348| fontWeight | `500` |349| fontSize | `0.8125rem` |350| tracking | `0.14em` |351| uppercase | `true` |352 353#### Outline354 355| Property | Value |356|----------|-------|357| shape | `sharp` |358| background | `transparent` |359| color | `#1a1612` |360| border | `1px solid rgba(26,22,18,0.18)` |361| padding | `14px 28px` |362| fontWeight | `500` |363| fontSize | `0.8125rem` |364| tracking | `0.14em` |365| uppercase | `true` |366 367#### Ghost368 369| Property | Value |370|----------|-------|371| shape | `sharp` |372| background | `transparent` |373| color | `#797268` |374| border | `none` |375| padding | `14px 18px` |376| fontWeight | `500` |377| fontSize | `0.8125rem` |378| tracking | `0.14em` |379| uppercase | `true` |380 381### Charts382 383| Property | Value |384|----------|-------|385| variant | `thin-bars` |386| strokeWidth | `1` |387| fillOpacity | `0` |388| gridlines | `false` |389| barGap | `18px` |390| highlight | `single` |391| dotMarker | `false` |392 393---394 395## Pro tokens396 397> Production-fidelity tokens. States, density, motion, elevation,398> content rules and a measured WCAG contract — derived from the399> resting tokens unless explicitly authored.400 401### States402 403#### Button404 405- **hover** — bg: `rgba(26, 22, 18, 0.92)`, shadow: `0 4px 20px -8px rgba(26, 22, 18, 0.4)`406- **focus** — outline: `1.5px solid #1a1612`, outline-offset: `4px`407- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`408- **disabled** — opacity: `0.45`409- **loading** — opacity: `0.7`410- **selected** — bg: `#1a1612`, color: `#f4eee0`411 412#### Input413 414- **hover** — border: `1px solid #1a1612`415- **focus** — border: `1px solid #1a1612`, shadow: `0 1px 0 0 #1a1612`416- **disabled** — opacity: `0.45`417- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`418 419#### Card420 421- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`422- **selected** — border: `1px solid #1a1612`423 424#### Tab425 426- **hover** — color: `#1a1612`427- **focus** — outline: `1.5px solid #1a1612`, outline-offset: `3px`428- **selected** — color: `#1a1612`, border: `0 0 2px 0 solid #1a1612`429 430### Density431 432| Mode | padding × | row × | body | radius × | Use for |433|------|-----------|-------|------|----------|---------|434| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |435| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |436| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |437 438### Motion439 440**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.441 442```css443transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);444```445 446| Token | Value |447|-------|-------|448| duration.instant | `80ms` |449| duration.fast | `180ms` |450| duration.base | `320ms` |451| duration.slow | `500ms` |452| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |453| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |454| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |455| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |456 457### Elevation458 459Five-level scale, system-specific recipe.460 461| Level | Shadow | Recipe |462|-------|--------|--------|463| level0 | `none` | Hairline only — typical editorial resting state. |464| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |465| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |466| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |467| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |468 469### Content470 471- **measure:** `60ch` (max line length for body prose)472- **paragraph spacing:** `1.5em`473- **list indent:** `1.75em`474- **list gap:** `0.55em`475- **link:** color `#1a1612`, underline `always`476- **blockquote:** border `4px solid #1a1612`, padding `0.4em 0 0.4em 1.5em`477- **code:** background `rgba(26, 22, 18, 0.06)`, color `#1a1612`478 479### Accessibility (WCAG 2.1)480 481**Overall:** AA-Large482 483| Pair | Ratio | Required | Grade | Suggested fix |484|------|-------|----------|-------|---------------|485| Body text on surface | 15.55:1 | AA | AAA | — |486| Body text on canvas | 14.46:1 | AA | AAA | — |487| Muted text on surface | 4.11:1 | AA | AA-Large | `#6e685f` → 4.77:1 (AA) |488| Accent on surface | 15.55:1 | AA-Large | AAA | — |489| Accent on canvas | 14.46:1 | AA-Large | AAA | — |490 # 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=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Playfair Display"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1a1612', secondary: '#797268', accent: '#1a1612', neutral: '#ece6d8', surface: '#f4eee0', }, borderRadius: { sm: '0px', md: '0px', lg: '0px', }, }, },};Modern AI product surface without the clichés. Geist sans across the board, Geist Mono for prompts and metrics, very fine off-white surfaces with a 1px white inset highlight, a single muted electric-indigo accent reserved for the assistant's response state. Built for AI-first products that want to feel premium without leaning on rainbow gradients.
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.