design.md
Back to directory
editorial · agency · serif · oversized · minimal

Maison Folio.

Design-agency editorial: a single oversized Bodoni Moda display at 7rem, a single ink, an off-white canvas. The signature is the radical scale gap — hero 7rem, body 1rem, nothing in between except a mono eyebrow.

01 · Preview

The kitchen sink.

Maison.app
ProductPricingDocsAbout
Sign in→Get started
editorial · agency · serif

Build with Maison Folio.

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
#13110F
secondary
#6E695E
tertiary
#A39989
neutral
#F2EFEA
surface
#FFFFFF
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

PrimarySecondaryOutlineGhost→Text 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
2px
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 · Pro tokens

The states behind the resting style.

ArchetypeEditorial

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.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Maison Folio"
3description: "Design-agency editorial: a single oversized Bodoni Moda display at 7rem, a single ink, an off-white canvas. The signature is the radical scale gap — hero 7rem, body 1rem, nothing in between except a mono eyebrow."
4tags: [editorial, agency, serif, oversized, minimal]
5colors:
6  primary:   "#13110F"
7  secondary: "#6E695E"
8  tertiary:  "#A39989"
9  neutral:   "#F2EFEA"
10  surface:   "#FFFFFF"
11typography:
12  display: "Bodoni Moda"
13  body:    "Inter Tight"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "7rem / 0.92 / 500 / -0.05em"
17    h1:   "4rem / 0.98 / 500 / -0.04em"
18    h2:   "1.625rem / 1.25 / 500 / -0.015em"
19    body: "1.0625rem / 1.6 / 400 / 0"
20radius:
21  sm: 0px
22  md: 0px
23  lg: 2px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid #13110F"
30  divider: "#13110F"
31buttons:
32  primary:
33    background: #13110F
34    color: #F2EFEA
35    border: 1px solid #13110F
36    shape: sharp
37    padding: 16px 32px
38    font: mono / 500 / 0.75rem / 0.12em
39    uppercase: true
40  secondary:
41    background: transparent
42    color: #13110F
43    border: 1px solid #13110F
44    shape: sharp
45    padding: 16px 32px
46    font: mono / 500 / 0.75rem / 0.12em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #13110F
51    border: 1px solid #A39989
52    shape: sharp
53    padding: 15px 31px
54    font: mono / 500 / 0.75rem / 0.12em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #13110F
59    border: none
60    shape: sharp
61    padding: 16px 0
62    font: mono / 500 / 0.75rem / 0.12em
63    uppercase: true
64    suffix: arrow
65    hover: underline
66charts:
67  variant: "thin-bars"
68  stroke_width: 1
69  gridlines: false
70  bar_radius: 0px
71  bar_gap: 12px
72  highlight: single
73  axis_color: "#6E695E"
74  palette: ["#13110F"]
75fonts_url: "https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,700&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
76dependencies: ["lucide-react"]
77---
78 
79# Maison Folio
80 
81## AI Build Instructions
82 
83> **Read this section before writing any code.** The rules below
84> are non-negotiable. Every value used in the UI must come from this
85> file's frontmatter — never substitute, approximate, or invent new
86> colors, fonts, radii, or shadows. If a value is missing, ask the
87> user before adding one.
88 
89### 1 · Your role
90 
91You are building UI for a project that has adopted **Maison Folio** as its
92design system. Treat `DESIGN.md` as the single source of truth.
93Your job is to translate the user's product requirements into
94components and pages that look like they were designed by the same
95person who authored this file.
96 
97### 2 · Token compliance
98 
99- Pull every color, font family, radius, shadow, and spacing value
100  from the frontmatter at the top of this file.
101- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
102  hard-code hex values that bypass the system.
103- When a token can be expressed as a CSS variable, declare it once
104  in your global stylesheet and reference it everywhere downstream.
105- The Google Fonts `<link>` is provided in the Typography section.
106  Add it to `<head>` before any component renders.
107 
108### 3 · Component recipes
109 
110Use these recipes verbatim when building the corresponding component.
111 
112#### Buttons
113 
114Four variants are defined. Pick one — never blend variants or invent a fifth.
115 
116- **Primary** — sharp shape, bg `#13110F`, text `#F2EFEA`, border `1px solid #13110F`, padding `16px 32px`, weight `500`, uppercased.
117- **Secondary** — sharp shape, text `#13110F`, border `1px solid #13110F`, padding `16px 32px`, weight `500`, uppercased.
118- **Outline** — sharp shape, text `#13110F`, border `1px solid #A39989`, padding `15px 31px`, weight `500`, uppercased.
119- **Ghost** — sharp shape, text `#13110F`, padding `16px 0`, weight `500`, uppercased.
120 
121Reach for **primary** as the single dominant CTA per screen.
122**Secondary** for the supporting action. **Outline** for tertiary
123actions in toolbars. **Ghost** for inline links and table actions.
124 
125#### Cards
126 
127- Background: `#FFFFFF`
128- Border: `1px solid #13110F`
129- Shadow: `none`
130- Radius: `radius.lg` (`2px`)
131- Internal padding: `20px` for compact cards, `24–28px` for content cards.
132 
133#### Charts
134 
135- Bar/line variant: `thin-bars`
136- Bar radius: `0px`
137- No gridlines — let the bars/lines carry the data.
138- Highlight strategy: `single` — emphasize a single bar/point per chart.
139- Use the declared palette in order: `#13110F`.
140 
141#### Typography pairings
142 
143- **Display (`Bodoni Moda`)** — h1, h2, hero headlines, brand wordmarks.
144- **Body (`Inter Tight`)** — paragraphs, labels, button text, form inputs.
145- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
146 
147### 4 · Hard constraints
148 
149Never do any of the following without explicit instruction from the user:
150 
151- Introduce a new color, font, radius, or shadow that isn't declared above.
152- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
153- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
154- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
155- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
156 
157### 5 · Before you finish — verify
158 
159Run through this checklist for every screen you produce:
160 
161- [ ] Every color used appears in the Colors table above.
162- [ ] Headlines use the display font; body copy uses the body font.
163- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
164- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
165- [ ] Cards and dividers use the declared border + shadow tokens.
166- [ ] No values were invented; if you needed something missing, you stopped and asked.
167 
168---
169 
170## Overview
171Maison Folio is design-agency editorial. One oversized modern serif. One ink. One off-white canvas. The signature is a radical type-scale gap: hero at 7rem, body at 1.0625rem, and nothing in between except a single mono eyebrow line in caps. The whitespace does the rest.
172 
173For design studios, fashion houses, architecture firms, photography portfolios — anywhere the work itself is the loudest element on the page and the typography needs to be a second voice, not a competitor.
174 
175## The Scale Gap
176Most editorial systems lay down five or six type sizes. Maison Folio uses three:
177 
178| Role | Font | Size | Weight | Tracking |
179|------|------|------|--------|----------|
180| Hero | Bodoni Moda | 7rem | 500 | -0.05em / 0.92 |
181| H1 | Bodoni Moda | 4rem | 500 | -0.04em / 0.98 |
182| H2 | Bodoni Moda | 1.625rem | 500 | -0.015em / 1.25 |
183| Body | Inter Tight | 1.0625rem | 400 | 0 / 1.6 |
184| Eyebrow | JetBrains Mono | 0.75rem | 500 | 0.12em / uppercase |
185 
186The 7rem hero with -5% tracking is non-negotiable. Bodoni Moda's high contrast collapses below 4rem; below that size, switch to Inter Tight. Never use the serif for body text — modern serifs are designed for display only.
187 
188## Color
189- **Ink #13110F** — text and CTA. The only chromatic mark.
190- **Stone #6E695E** — secondary text, axis labels.
191- **Taupe #A39989** — used only in hairline outlines.
192- **Linen #F2EFEA** — page canvas with warmth.
193- **Paper #FFFFFF** — inverse panels only.
194 
195## Geometry
196- **Radii: 0px throughout.** The serifs need flat edges. Pill exists only for status chips.
197- **Section gap: 192px** desktop, 96px mobile. The whitespace IS the design.
198- **Asymmetric grid** — 12 columns with intentional offset. Heroes break the grid.
199 
200## Buttons
201Every button uses **JetBrains Mono caps at 0.75rem with 0.12em tracking** — the eyebrow voice carried through to interaction. Sharp corners. No shadow.
202- **Primary** — flat ink rectangle.
203- **Secondary** — off-white with ink hairline.
204- **Outline** — taupe hairline.
205- **Ghost** — bare mono caps with arrow suffix and underline on hover.
206 
207## Cards
208Flat off-white panel with a 1px ink hairline. No shadow, no radius. Padding 48px minimum — the negative space is the entire treatment. Inverse cards (ink background, off-white text) appear sparingly for editorial contrast.
209 
210## Charts & Data
211Thin ink bars at 1px width with 12px gaps. No gridlines, no axis decoration. One bar may be highlighted by extending its height — never by changing its color. Numbers set in Bodoni Moda for headline KPIs, in mono for tabular data.
212 
213## Do's and Don'ts
214- ✅ Hold the 7rem hero with -5% tracking. The scale IS the system.
215- ✅ One ink only. Never introduce a second chromatic color.
216- ✅ Mono caps at 0.12em tracking for every interactive label.
217- ✅ Massive section gaps. Whitespace is a first-class element.
218- ❌ No Bodoni Moda below 1.625rem — its contrast collapses.
219- ❌ No second display family. The serif carries every display role.
220- ❌ No rounded corners. Sharp throughout.
221- ❌ No drop shadows. Depth comes from scale and negative space only.
222 
223---
224 
225## Tokens
226 
227> Generated from the same source the live preview renders from.
228> Treat the values below as the contract — never substitute approximations.
229 
230### Colors
231 
232| Role      | Value |
233|-----------|-------|
234| primary   | `#13110F` |
235| secondary | `#6E695E` |
236| tertiary  | `#A39989` |
237| neutral   | `#F2EFEA` |
238| surface   | `#FFFFFF` |
239 
240### Typography
241 
242- **Display:** Bodoni Moda
243- **Body:** Inter Tight
244- **Mono:** JetBrains Mono
245 
246| Role | size / leading / weight / tracking |
247|------|------------------------------------|
248| Hero | 7rem / 0.92 / 500 / -0.05em |
249| H1   | 4rem / 0.98 / 500 / -0.04em |
250| H2   | 1.625rem / 1.25 / 500 / -0.015em |
251| Body | 1.0625rem / 1.6 / 400 / 0 |
252 
253### Radius
254 
255- sm: `0px`
256- md: `0px`
257- lg: `2px`
258- pill: `9999px`
259 
260### Shadows
261 
262- **card:** `none`
263- **button:** `none`
264 
265### Borders
266 
267- **card:** `1px solid #13110F`
268- **divider:** `#13110F`
269 
270### Buttons
271 
272Four variants, each fully tokenized. The preview renders from these exact values.
273 
274#### Primary
275 
276| Property | Value |
277|----------|-------|
278| shape | `sharp` |
279| background | `#13110F` |
280| color | `#F2EFEA` |
281| border | `1px solid #13110F` |
282| padding | `16px 32px` |
283| fontFamily | `mono` |
284| fontWeight | `500` |
285| fontSize | `0.75rem` |
286| tracking | `0.12em` |
287| uppercase | `true` |
288 
289#### Secondary
290 
291| Property | Value |
292|----------|-------|
293| shape | `sharp` |
294| background | `transparent` |
295| color | `#13110F` |
296| border | `1px solid #13110F` |
297| padding | `16px 32px` |
298| fontFamily | `mono` |
299| fontWeight | `500` |
300| fontSize | `0.75rem` |
301| tracking | `0.12em` |
302| uppercase | `true` |
303 
304#### Outline
305 
306| Property | Value |
307|----------|-------|
308| shape | `sharp` |
309| background | `transparent` |
310| color | `#13110F` |
311| border | `1px solid #A39989` |
312| padding | `15px 31px` |
313| fontFamily | `mono` |
314| fontWeight | `500` |
315| fontSize | `0.75rem` |
316| tracking | `0.12em` |
317| uppercase | `true` |
318 
319#### Ghost
320 
321| Property | Value |
322|----------|-------|
323| shape | `sharp` |
324| background | `transparent` |
325| color | `#13110F` |
326| border | `none` |
327| padding | `16px 0` |
328| fontFamily | `mono` |
329| fontWeight | `500` |
330| fontSize | `0.75rem` |
331| tracking | `0.12em` |
332| uppercase | `true` |
333| suffix | `arrow` |
334| hoverHint | `underline` |
335 
336### Charts
337 
338| Property | Value |
339|----------|-------|
340| variant | `thin-bars` |
341| strokeWidth | `1` |
342| gridlines | `false` |
343| barRadius | `0px` |
344| barGap | `12px` |
345| highlight | `single` |
346| axisColor | `#6E695E` |
347| palette | `#13110F` |
348 
349---
350 
351## Pro tokens
352 
353> Production-fidelity tokens. States, density, motion, elevation,
354> content rules and a measured WCAG contract — derived from the
355> resting tokens unless explicitly authored.
356 
357### States
358 
359#### Button
360 
361- **hover** — bg: `rgba(163, 153, 137, 0.92)`, shadow: `0 4px 20px -8px rgba(163, 153, 137, 0.4)`
362- **focus** — outline: `1.5px solid #A39989`, outline-offset: `4px`
363- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
364- **disabled** — opacity: `0.45`
365- **loading** — opacity: `0.7`
366- **selected** — bg: `#13110F`, color: `#FFFFFF`
367 
368#### Input
369 
370- **hover** — border: `1px solid #13110F`
371- **focus** — border: `1px solid #A39989`, shadow: `0 1px 0 0 #A39989`
372- **disabled** — opacity: `0.45`
373- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
374 
375#### Card
376 
377- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
378- **selected** — border: `1px solid #13110F`
379 
380#### Tab
381 
382- **hover** — color: `#13110F`
383- **focus** — outline: `1.5px solid #A39989`, outline-offset: `3px`
384- **selected** — color: `#A39989`, border: `0 0 2px 0 solid #A39989`
385 
386### Density
387 
388| Mode | padding × | row × | body | radius × | Use for |
389|------|-----------|-------|------|----------|---------|
390| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
391| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
392| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
393 
394### Motion
395 
396**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
397 
398```css
399transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
400```
401 
402| Token | Value |
403|-------|-------|
404| duration.instant | `80ms` |
405| duration.fast | `180ms` |
406| duration.base | `320ms` |
407| duration.slow | `500ms` |
408| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
409| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
410| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
411| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
412 
413### Elevation
414 
415Five-level scale, system-specific recipe.
416 
417| Level | Shadow | Recipe |
418|-------|--------|--------|
419| level0 | `none` | Hairline only — typical editorial resting state. |
420| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
421| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
422| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
423| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
424 
425### Content
426 
427- **measure:** `60ch` (max line length for body prose)
428- **paragraph spacing:** `1.5em`
429- **list indent:** `1.75em`
430- **list gap:** `0.55em`
431- **link:** color `#A39989`, underline `always`
432- **blockquote:** border `4px solid #A39989`, padding `0.4em 0 0.4em 1.5em`
433- **code:** background `rgba(19, 17, 15, 0.06)`, color `#13110F`
434 
435### Accessibility (WCAG 2.1)
436 
437**Overall:** FAIL
438 
439| Pair | Ratio | Required | Grade | Suggested fix |
440|------|-------|----------|-------|---------------|
441| Body text on surface | 18.84:1 | AA | AAA | — |
442| Body text on canvas | 16.43:1 | AA | AAA | — |
443| Muted text on surface | 5.46:1 | AA | AA | — |
444| Accent on surface | 2.81:1 | AA-Large | FAIL | `#7b7060` → 4.85:1 (AA) |
445| Accent on canvas | 2.45:1 | AA-Large | FAIL | `#756b5b` → 4.57:1 (AA) |
446
04 · 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.
05 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,700&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Bodoni Moda"', 'serif'],
        sans:    ['"Inter Tight"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#13110F',
        secondary: '#6E695E',
        accent:    '#A39989',
        neutral:   '#F2EFEA',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '0px',
        md: '0px',
        lg: '2px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Titanium Deck

Brushed metal as a quiet design system. Cool grey surfaces with a faint vertical machined gradient, Space Grotesk display, IBM Plex Mono for technical labels, a single warm amber accent that reads like a status LED. Built for hardware companies and infrastructure dashboards.

metallicpremiummodernsaasdeveloper
Titanium.app
ProductPricingDocsAbout
Sign inGet started
metallic · premium · modern

Build with Titanium Deck.

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

Whisper Studio

Near-white canvas with warm stone undertones, ethereal light-weight display type, and whisper-soft multi-layer shadows.

minimalwarmpremiumaudio
Whisper.app
ProductPricingDocsAbout
Sign inGet started
minimal · warm · premium

Build with Whisper Studio.

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