editorial · agency · minimal · premium · modern

Maison Vox.

Design-agency editorial in print mode. Oversized DM Serif Display headlines that nearly touch the gutter, asymmetric two-column body in Inter, a single tomato accent that lives only in the first letter of the H1 and the period of the CTA. Built for studio sites and case studies.

01 · Preview

The kitchen sink.

Maison.app

ProductPricingDocsAbout

Sign inGet started

editorial · agency · minimal

Build with Maison Vox.

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

#101010

secondary

#5A5A5A

tertiary

#101010

neutral

#F3EFE7

surface

#FBF8F1

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: "Maison Vox"
3description: "Design-agency editorial in print mode. Oversized DM Serif Display headlines that nearly touch the gutter, asymmetric two-column body in Inter, a single tomato accent that lives only in the first letter of the H1 and the period of the CTA. Built for studio sites and case studies."
4tags: [editorial, agency, minimal, premium, modern]
5colors:
6  primary:   "#101010"
7  secondary: "#5a5a5a"
8  tertiary:  "#101010"
9  neutral:   "#f3efe7"
10  surface:   "#fbf8f1"
11typography:
12  display: "DM Serif Display"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "7rem / 0.94 / 400 / -0.045em"
17    h1:   "4rem / 1 / 400 / -0.035em"
18    h2:   "2rem / 1.15 / 400 / -0.02em"
19    body: "1.0625rem / 1.65 / 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(16,16,16,0.10)"
30  divider: rgba(16,16,16,0.14)
31buttons:
32  primary:
33    background: #101010
34    color: #fbf8f1
35    border: none
36    shape: sharp
37    padding: 14px 26px
38    font: 500 / 0.875rem
39  secondary:
40    background: transparent
41    color: #101010
42    border: 1px solid #101010
43    shape: sharp
44    padding: 14px 26px
45    font: 500 / 0.875rem
46  outline:
47    background: transparent
48    color: #101010
49    border: 1px solid rgba(16,16,16,0.18)
50    shape: sharp
51    padding: 14px 26px
52    font: 500 / 0.875rem
53  ghost:
54    background: transparent
55    color: #5a5a5a
56    border: none
57    shape: sharp
58    padding: 14px 18px
59    font: 500 / 0.875rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1
63  fill_opacity: 0
64  gridlines: false
65  bar_gap: 16px
66  highlight: single
67  dot_marker: false
68fonts_url: "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Maison Vox
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Maison Vox** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — sharp shape, bg `#101010`, text `#fbf8f1`, padding `14px 26px`, weight `500`.
110- **Secondary** — sharp shape, text `#101010`, border `1px solid #101010`, padding `14px 26px`, weight `500`.
111- **Outline** — sharp shape, text `#101010`, border `1px solid rgba(16,16,16,0.18)`, padding `14px 26px`, weight `500`.
112- **Ghost** — sharp shape, text `#5a5a5a`, padding `14px 18px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#fbf8f1`
121- Border: `1px solid rgba(16,16,16,0.10)`
122- Shadow: `none`
123- Radius: `radius.lg` (`0px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- No gridlines — let the bars/lines carry the data.
134- Highlight strategy: `single` — emphasize a single bar/point per chart.
135 
136#### Typography pairings
137 
138- **Display (`DM Serif Display`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
141 
142### 4 · Hard constraints
143 
144Never do any of the following without explicit instruction from the user:
145 
146- Introduce a new color, font, radius, or shadow that isn't declared above.
147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
151 
152### 5 · Before you finish — verify
153 
154Run through this checklist for every screen you produce:
155 
156- [ ] Every color used appears in the Colors table above.
157- [ ] Headlines use the display font; body copy uses the body font.
158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
160- [ ] Cards and dividers use the declared border + shadow tokens.
161- [ ] No values were invented; if you needed something missing, you stopped and asked.
162 
163---
164 
165## 1. Atmosphere
166 
167Maison Vox is the visual language of a small design studio that publishes a print quarterly on the side. Headlines run in DM Serif Display at 112px — nearly touching the gutter — with negative tracking that compresses them into editorial bricks. Body sits in Inter at 17px on a 1.65 leading, set in two asymmetric columns. The page is warm bone `#fbf8f1`, never white, and the only color in the entire system is a single tomato `#e0432a` that appears as the first letter of the H1 and as the period after the CTA label. That's it.
168 
169The discipline is in the gestures: oversized type as the only ornament, sharp 0px radius everywhere, and a single colored character as the brand mark.
170 
171**Signature moves**
172- DM Serif Display at 112px hero, 400 weight, -0.045em tracking — print-quarterly scale
173- Tomato `#e0432a` used only on the first letter of the headline AND the period after the CTA — never as a fill
174- Sharp 0px radius on every surface — buttons, cards, inputs
175- Asymmetric two-column body (8/4 split) — the column rhythm IS the layout
176- Italic display variant for pull quotes, never for emphasis in body
177 
178## 2. Palette
179 
180### Core
181- **Ink** `#101010` — text, headings, button fill
182- **Bone** `#fbf8f1` — page background (warm, not white)
183- **Bone Lift** `#f3efe7` — secondary surfaces
184- **Hairline** `rgba(16,16,16,0.10)` — section dividers
185 
186### Accent
187- **Tomato** `#e0432a` — first letter of H1, period after CTA, marginalia number
188- That is the entire color system. There is no second accent.
189 
190## 3. Typography
191 
192| Role | Font | Size | Weight | Leading | Tracking |
193|------|------|------|--------|---------|----------|
194| Hero | DM Serif Display | 112px | 400 | 0.94 | -0.045em |
195| H1 | DM Serif Display | 64px | 400 | 1.0 | -0.035em |
196| H2 | DM Serif Display | 32px | 400 | 1.15 | -0.02em |
197| H3 | Inter | 20px | 600 | 1.3 | -0.015em |
198| Body | Inter | 17px | 400 | 1.65 | -0.005em |
199| Caption | Inter | 13px | 500 | 1.4 | 0 |
200| Marginalia | JetBrains Mono | 11px | 500 | 1.0 | 0.12em uppercase |
201 
202DM Serif Display only at 400 — there is no other weight. Inter carries weight (400/500/600) for body and UI. Mono is reserved for marginalia (page numbers, footnotes, dateline).
203 
204## 4. Buttons
205 
206### Primary (Ink Slab)
207```css
208background: #101010;
209color: #fbf8f1;
210padding: 14px 26px;
211border-radius: 0;
212font-family: "Inter";
213font-weight: 500;
214```
215 
216The button label always ends with a tomato period: `View case study` followed by a `#e0432a` colored `.`
217 
218### Secondary (Ink Outline)
219- Transparent, 1px solid ink, ink text
220- Same sharp shape, same padding
221 
222### Ghost
223- Inter 500, ink-secondary, no border. Hover: underline.
224 
225## 5. Cards
226 
227- Background `#fbf8f1` (or `#f3efe7` for elevated)
228- 1px hairline at 10% ink, NO shadow, NO radius
229- Internal padding 32px / 48px
230- Featured cards add a single 1px ink top border — that is the only chrome
231 
232## 6. Charts
233 
234Thin precise bars (3px wide, 16px gap). One bar in tomato, others in 18% ink. NO gridlines, NO axis lines — labels float in mono uppercase along the baseline. Line charts run at 1px ink with no fill. The chart is a footnote, not a feature.
235 
236## 7. Tabs
237 
238Underline 1px in ink for the active state. Inactive tabs are Inter 500 ink-secondary. The active label is set in DM Serif Display italic — that's the rhythm change, not a color shift.
239 
240## 8. Spacing
241 
242- Base 8px
243- Scale: `8, 16, 24, 32, 48, 64, 96, 128`
244- Section padding: 128px desktop, 64px mobile — editorial needs the air
245 
246## 9. Do's & don'ts
247 
248✅ **Do**
249- Use DM Serif Display only at 400 weight — anything heavier reads as decorative, not editorial
250- Reserve the tomato for the first letter and the period — those two gestures are the brand
251- Hold the asymmetric 8/4 column split for body — symmetric two-column reads as a blog
252- Use sharp 0px radius on everything — print rules
253 
254❌ **Don't**
255- Use a second accent color — tomato alone, on two specific characters
256- Use any radius — pills are reserved for status badges only
257- Use serif body — Inter carries the body, DM Serif Display carries the display
258- Use weight on DM Serif — there is only 400
259 
260---
261 
262## Tokens
263 
264> Generated from the same source the live preview renders from.
265> Treat the values below as the contract — never substitute approximations.
266 
267### Colors
268 
269| Role      | Value |
270|-----------|-------|
271| primary   | `#101010` |
272| secondary | `#5a5a5a` |
273| tertiary  | `#101010` |
274| neutral   | `#f3efe7` |
275| surface   | `#fbf8f1` |
276 
277### Typography
278 
279- **Display:** DM Serif Display
280- **Body:** Inter
281- **Mono:** JetBrains Mono
282 
283| Role | size / leading / weight / tracking |
284|------|------------------------------------|
285| Hero | 7rem / 0.94 / 400 / -0.045em |
286| H1   | 4rem / 1 / 400 / -0.035em |
287| H2   | 2rem / 1.15 / 400 / -0.02em |
288| Body | 1.0625rem / 1.65 / 400 / -0.005em |
289 
290### Radius
291 
292- sm: `0px`
293- md: `0px`
294- lg: `0px`
295- pill: `9999px`
296 
297### Shadows
298 
299- **card:** `none`
300- **button:** `none`
301 
302### Borders
303 
304- **card:** `1px solid rgba(16,16,16,0.10)`
305- **divider:** `rgba(16,16,16,0.14)`
306 
307### Buttons
308 
309Four variants, each fully tokenized. The preview renders from these exact values.
310 
311#### Primary
312 
313| Property | Value |
314|----------|-------|
315| shape | `sharp` |
316| background | `#101010` |
317| color | `#fbf8f1` |
318| border | `none` |
319| padding | `14px 26px` |
320| fontWeight | `500` |
321| fontSize | `0.875rem` |
322 
323#### Secondary
324 
325| Property | Value |
326|----------|-------|
327| shape | `sharp` |
328| background | `transparent` |
329| color | `#101010` |
330| border | `1px solid #101010` |
331| padding | `14px 26px` |
332| fontWeight | `500` |
333| fontSize | `0.875rem` |
334 
335#### Outline
336 
337| Property | Value |
338|----------|-------|
339| shape | `sharp` |
340| background | `transparent` |
341| color | `#101010` |
342| border | `1px solid rgba(16,16,16,0.18)` |
343| padding | `14px 26px` |
344| fontWeight | `500` |
345| fontSize | `0.875rem` |
346 
347#### Ghost
348 
349| Property | Value |
350|----------|-------|
351| shape | `sharp` |
352| background | `transparent` |
353| color | `#5a5a5a` |
354| border | `none` |
355| padding | `14px 18px` |
356| fontWeight | `500` |
357| fontSize | `0.875rem` |
358 
359### Charts
360 
361| Property | Value |
362|----------|-------|
363| variant | `thin-bars` |
364| strokeWidth | `1` |
365| fillOpacity | `0` |
366| gridlines | `false` |
367| barGap | `16px` |
368| highlight | `single` |
369| dotMarker | `false` |
370

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=DM+Serif+Display:ital@0;1&family=Inter: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: ['"DM Serif Display"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#101010',
        secondary: '#5a5a5a',
        accent:    '#101010',
        neutral:   '#f3efe7',
        surface:   '#fbf8f1',
      },
      borderRadius: {
        sm: '0px',
        md: '0px',
        lg: '0px',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Twilight Mail

Luxury productivity. Deep purple hero against pristine white, non-standard variable weight 460/540, ultra-tight 0.96 leading, warm cream CTAs, lavender as the only accent.

consumerpremiumminimaleditorial

Twilight.app

ProductPricingDocsAbout

Sign inGet started