editorial · agency · warm · premium · asymmetric

Studio Margaux.

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.

01 · Preview

The kitchen sink.

Studio.app

ProductPricingDocsAbout

Sign inGet started

editorial · agency · warm

Build with Studio Margaux.

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.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#0E0C0A

secondary

#5E574D

tertiary

#0E0C0A

neutral

#EBE2CE

surface

#F1E8D4

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

0px

md

0px

lg

0px

pill

9999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · The file

DESIGN.md

markdown

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: Fraunces
13  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: 0px
22  md: 0px
23  lg: 0px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid rgba(14,12,10,0.14)"
30  divider: rgba(14,12,10,0.18)
31buttons:
32  primary:
33    background: #0e0c0a
34    color: #f1e8d4
35    border: none
36    shape: sharp
37    padding: 16px 28px
38    font: 600 / 0.8125rem / 0.14em
39    uppercase: true
40  secondary:
41    background: transparent
42    color: #0e0c0a
43    border: 1px solid #0e0c0a
44    shape: sharp
45    padding: 16px 28px
46    font: 600 / 0.8125rem / 0.14em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #0e0c0a
51    border: 1px solid rgba(14,12,10,0.20)
52    shape: sharp
53    padding: 16px 28px
54    font: 600 / 0.8125rem / 0.14em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #5e574d
59    border: none
60    shape: sharp
61    padding: 16px 18px
62    font: 600 / 0.8125rem / 0.14em
63    uppercase: true
64charts:
65  variant: "thin-bars"
66  stroke_width: 1
67  fill_opacity: 0
68  gridlines: false
69  bar_gap: 12px
70  highlight: single
71  dot_marker: false
72fonts_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 Margaux
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Studio Margaux** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  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 recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
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 tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
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#### Tabs
131 
132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
133 
134#### Charts
135 
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 pairings
141 
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 constraints
147 
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 — verify
157 
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. Atmosphere
170 
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-bleed
177- Italic Fraunces second line at 56px breaking the headline alignment — asymmetric craft moment
178- Cream surface `#f1e8d4` — colored letterpress stock, never white
179- Pure ink `#0e0c0a` blocks reserved for studio mark + primary CTA + section index numbers
180- Sharp 0px corners on every surface — letterpress precision
181- Section index numbers (01., 02., 03.) in Fraunces 400 at 96px — the chapter mark voice
182 
183## 2. Palette
184 
185### Surfaces
186- **Cream** `#f1e8d4` — page background (warm letterpress stock)
187- **Cream Lift** `#ebe2ce` — secondary surfaces, footer
188- **Hairline** `rgba(14,12,10,0.14)` — every divider
189 
190### Ink
191- **Ink** `#0e0c0a` — text, headings, studio mark, primary CTA fill (pure near-black)
192- **Ink 50** `#5e574d` — secondary text, mono captions
193 
194That is the entire palette. There is no accent — the contrast between cream and pure ink IS the system.
195 
196## 3. Typography
197 
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. Buttons
214 
215### Primary (Ink Block)
216```css
217background: #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 padding
230 
231### Outline & Ghost
232- Outline: transparent, 1px hairline at 20% ink
233- Ghost: no border, ink-50 uppercase
234 
235## 5. Cards (rarely used)
236 
237```css
238background: #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. Charts
247 
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. Tabs
251 
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. Spacing
255 
256- Base 8px
257- Scale: `8, 16, 24, 32, 48, 64, 96, 128, 200, 280`
258- Section padding: 200px desktop, 96px mobile — full editorial breathing room
259 
260## 9. Do's & don'ts
261 
262✅ **Do**
263- Use Fraunces 300 at 176px for the hero — the extreme thin weight is the studio voice
264- Pair every headline with a single Fraunces italic line that breaks the alignment — the asymmetric craft moment
265- Hold the cream surface — white reads as web app, beige reads as old textbook
266- Number every section in Fraunces 400 at 96px (01., 02., 03.) — the chapter-mark voice
267 
268❌ **Don't**
269- Use Fraunces at 600+ for display — bold breaks the studio thin-weight signature
270- Resolve the layout to symmetry — every section needs one intentional grid-break
271- Add a third color or accent — cream + pure ink IS the entire palette
272- Round any corner — 0px sharp letterpress precision throughout
273 
274---
275 
276## Tokens
277 
278> Generated from the same source the live preview renders from.
279> Treat the values below as the contract — never substitute approximations.
280 
281### Colors
282 
283| Role      | Value |
284|-----------|-------|
285| primary   | `#0e0c0a` |
286| secondary | `#5e574d` |
287| tertiary  | `#0e0c0a` |
288| neutral   | `#ebe2ce` |
289| surface   | `#f1e8d4` |
290 
291### Typography
292 
293- **Display:** Fraunces
294- **Body:** Inter Tight
295- **Mono:** JetBrains Mono
296 
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### Radius
305 
306- sm: `0px`
307- md: `0px`
308- lg: `0px`
309- pill: `9999px`
310 
311### Shadows
312 
313- **card:** `none`
314- **button:** `none`
315 
316### Borders
317 
318- **card:** `1px solid rgba(14,12,10,0.14)`
319- **divider:** `rgba(14,12,10,0.18)`
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 | `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#### Secondary
340 
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#### Outline
354 
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#### Ghost
368 
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### Charts
382 
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

03 · How to use it

Wire it into your agent.

markdown

# 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.

04 · Required setup

Three snippets.

Google Fonts link

html

<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" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export 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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Linear Orbit

Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.

developerminimalpremiumsaasmodern

Linear.app

ProductPricingDocsAbout

Sign inGet started

developer · minimal · premium

Build with Linear Orbit.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

Warm Canvas

Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent.

minimalwarmproductivitysaas

Warm.app

ProductPricingDocsAbout

Sign inGet started

minimal · warm · productivity

Build with Warm Canvas.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational