A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery.
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: "Studio Margaux"3description: "A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery."4tags: [editorial, agency, warm, premium, asymmetric]5colors:6 primary: "#0e0c0a"7 secondary: "#5e574d"8 tertiary: "#0e0c0a"9 neutral: "#ebe2ce"10 surface: "#f1e8d4"11typography:12 display: Fraunces13 body: "Inter Tight"14 mono: "JetBrains Mono"15 scale:16 hero: "11rem / 0.85 / 300 / -0.05em"17 h1: "5.5rem / 0.95 / 400 / -0.035em"18 h2: "2.25rem / 1.15 / 400 / -0.018em"19 body: "1.0625rem / 1.6 / 400 / -0.005em"20radius:21 sm: 0px22 md: 0px23 lg: 0px24 pill: 9999px25shadows:26 card: none27 button: none28borders:29 card: "1px solid rgba(14,12,10,0.14)"30 divider: rgba(14,12,10,0.18)31buttons:32 primary:33 background: #0e0c0a34 color: #f1e8d435 border: none36 shape: sharp37 padding: 16px 28px38 font: 600 / 0.8125rem / 0.14em39 uppercase: true40 secondary:41 background: transparent42 color: #0e0c0a43 border: 1px solid #0e0c0a44 shape: sharp45 padding: 16px 28px46 font: 600 / 0.8125rem / 0.14em47 uppercase: true48 outline:49 background: transparent50 color: #0e0c0a51 border: 1px solid rgba(14,12,10,0.20)52 shape: sharp53 padding: 16px 28px54 font: 600 / 0.8125rem / 0.14em55 uppercase: true56 ghost:57 background: transparent58 color: #5e574d59 border: none60 shape: sharp61 padding: 16px 18px62 font: 600 / 0.8125rem / 0.14em63 uppercase: true64charts:65 variant: "thin-bars"66 stroke_width: 167 fill_opacity: 068 gridlines: false69 bar_gap: 12px70 highlight: single71 dot_marker: false72fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"73dependencies: ["lucide-react"]74---75 76# Studio Margaux77 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 **Studio Margaux** 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 `#0e0c0a`, text `#f1e8d4`, padding `16px 28px`, weight `600`, uppercased.114- **Secondary** — sharp shape, text `#0e0c0a`, border `1px solid #0e0c0a`, padding `16px 28px`, weight `600`, uppercased.115- **Outline** — sharp shape, text `#0e0c0a`, border `1px solid rgba(14,12,10,0.20)`, padding `16px 28px`, weight `600`, uppercased.116- **Ghost** — sharp shape, text `#5e574d`, padding `16px 18px`, weight `600`, 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: `#f1e8d4`125- Border: `1px solid rgba(14,12,10,0.14)`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 (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Inter Tight`)** — 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 171Studio Margaux is a design studio that leads with typography instead of imagery. The page surface is warm cream `#f1e8d4` — a colored letterpress stock, never white. Display headlines run in Fraunces 300 at 176px with -0.05em tracking — the soft-modern serif at extreme thin weight stretched across the full bleed. Below every headline sits a single italic Fraunces line at 56px that intentionally breaks the alignment of the headline above — the asymmetric editorial moment that signals studio-craft. Body sits in Inter Tight at 17px on a 1.6 leading. UI labels in Inter Tight 600 with 0.14em uppercase tracking. The single accent is pure ink `#0e0c0a` — a true near-black inked block reserved for the studio mark, the primary CTA, and the section index numbers (01., 02., 03.).172 173The discipline is in the asymmetry: every section has one element that intentionally breaks the grid — a headline that overhangs the column, a metadata block that floats into the margin, an italic line that starts mid-page. The layout never resolves to symmetry. That is the studio voice.174 175**Signature moves**176- Fraunces 300 at 176px — extreme thin display weight stretched full-bleed177- Italic Fraunces second line at 56px breaking the headline alignment — asymmetric craft moment178- Cream surface `#f1e8d4` — colored letterpress stock, never white179- Pure ink `#0e0c0a` blocks reserved for studio mark + primary CTA + section index numbers180- Sharp 0px corners on every surface — letterpress precision181- Section index numbers (01., 02., 03.) in Fraunces 400 at 96px — the chapter mark voice182 183## 2. Palette184 185### Surfaces186- **Cream** `#f1e8d4` — page background (warm letterpress stock)187- **Cream Lift** `#ebe2ce` — secondary surfaces, footer188- **Hairline** `rgba(14,12,10,0.14)` — every divider189 190### Ink191- **Ink** `#0e0c0a` — text, headings, studio mark, primary CTA fill (pure near-black)192- **Ink 50** `#5e574d` — secondary text, mono captions193 194That is the entire palette. There is no accent — the contrast between cream and pure ink IS the system.195 196## 3. Typography197 198| Role | Font | Size | Weight | Leading | Tracking |199|------|------|------|--------|---------|----------|200| Hero | Fraunces | 176px | 300 | 0.85 | -0.05em |201| Hero Italic Line | Fraunces (italic) | 56px | 400 | 1.05 | -0.018em |202| Section Index (01.) | Fraunces | 96px | 400 | 1.0 | -0.04em |203| H1 | Fraunces | 88px | 400 | 0.95 | -0.035em |204| H2 | Fraunces | 36px | 400 | 1.15 | -0.018em |205| Pull Quote | Fraunces (italic) | 32px | 300 | 1.32 | -0.012em |206| Body | Inter Tight | 17px | 400 | 1.6 | -0.005em |207| UI / Button | Inter Tight | 13px | 600 | 1.4 | 0.14em uppercase |208| Caption / Date | JetBrains Mono | 11px | 500 | 1.0 | 0.10em uppercase |209| Project Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums |210 211Fraunces lives at 300 (display thin) and 400 (h1/section index). Italic 300 for pull quotes, italic 400 for the breaking second line. The mono is reserved for project numbers and dates — the metadata voice.212 213## 4. Buttons214 215### Primary (Ink Block)216```css217background: #0e0c0a;218color: #f1e8d4;219padding: 16px 28px;220border-radius: 0px;221text-transform: uppercase;222letter-spacing: 0.14em;223font-weight: 600;224```225 226The 16px vertical padding makes the ink block read as a stamped letterpress slab — heavier than a typical button, intentionally so.227 228### Secondary (Ink Outline)229- Transparent, 1px solid ink, ink text — same sharp 0px corners, same heavy padding230 231### Outline & Ghost232- Outline: transparent, 1px hairline at 20% ink233- Ghost: no border, ink-50 uppercase234 235## 5. Cards (rarely used)236 237```css238background: #f1e8d4;239border: 1px solid rgba(14,12,10,0.14);240border-radius: 0px;241box-shadow: none;242```243 244The system prefers hairline-divided sections over cards. When a card is needed (project tile, team member), it is sharp 0px corners with a 1px hairline — never lifted, never shadowed.245 246## 6. Charts247 248Thin precise bars (3px wide, 12px gap). One bar in ink, others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px. Charts are reserved for studio metrics and read as broadside exhibits.249 250## 7. Tabs251 252Underline 1.5px in ink for the active state. Inactive tabs are ink-50 in Inter Tight 600 uppercase. Active label often switches to Fraunces italic at the same size — that is the rhythm change.253 254## 8. Spacing255 256- Base 8px257- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280`258- Section padding: 200px desktop, 96px mobile — full editorial breathing room259 260## 9. Do's & don'ts261 262✅ **Do**263- Use Fraunces 300 at 176px for the hero — the extreme thin weight is the studio voice264- Pair every headline with a single Fraunces italic line that breaks the alignment — the asymmetric craft moment265- Hold the cream surface — white reads as web app, beige reads as old textbook266- Number every section in Fraunces 400 at 96px (01., 02., 03.) — the chapter-mark voice267 268❌ **Don't**269- Use Fraunces at 600+ for display — bold breaks the studio thin-weight signature270- Resolve the layout to symmetry — every section needs one intentional grid-break271- Add a third color or accent — cream + pure ink IS the entire palette272- Round any corner — 0px sharp letterpress precision throughout273 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 | `#0e0c0a` |286| secondary | `#5e574d` |287| tertiary | `#0e0c0a` |288| neutral | `#ebe2ce` |289| surface | `#f1e8d4` |290 291### Typography292 293- **Display:** Fraunces294- **Body:** Inter Tight295- **Mono:** JetBrains Mono296 297| Role | size / leading / weight / tracking |298|------|------------------------------------|299| Hero | 11rem / 0.85 / 300 / -0.05em |300| H1 | 5.5rem / 0.95 / 400 / -0.035em |301| H2 | 2.25rem / 1.15 / 400 / -0.018em |302| Body | 1.0625rem / 1.6 / 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(14,12,10,0.14)`319- **divider:** `rgba(14,12,10,0.18)`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 | `#0e0c0a` |331| color | `#f1e8d4` |332| border | `none` |333| padding | `16px 28px` |334| fontWeight | `600` |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 | `#0e0c0a` |346| border | `1px solid #0e0c0a` |347| padding | `16px 28px` |348| fontWeight | `600` |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 | `#0e0c0a` |360| border | `1px solid rgba(14,12,10,0.20)` |361| padding | `16px 28px` |362| fontWeight | `600` |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 | `#5e574d` |374| border | `none` |375| padding | `16px 18px` |376| fontWeight | `600` |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 | `12px` |390| highlight | `single` |391| dotMarker | `false` |392 # 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=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Fraunces"', 'serif'], sans: ['"Inter Tight"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#0e0c0a', secondary: '#5e574d', accent: '#0e0c0a', neutral: '#ebe2ce', surface: '#f1e8d4', }, borderRadius: { sm: '0px', md: '0px', lg: '0px', }, }, },};tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect.
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.
No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand.
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.