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

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 · 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

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=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

// 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',
      },
    },
  },
};