design.md
Back to directory
editorial · playful

Magazine Bold.

High-contrast red, oversized Playfair headlines, dense editorial layout.

01 · Preview

The kitchen sink.

Magazine.app
ProductPricingDocsAbout
Sign inGet started
editorial · playful

Build with Magazine Bold.

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
#0A0A0A
secondary
#5A5A5A
tertiary
#DC2626
neutral
#FFFFFF
surface
#FAFAFA
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
2px
md
2px
lg
4px
pill
999px
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: "Magazine Bold"
3description: "High-contrast red, oversized Playfair headlines, dense editorial layout."
4tags: [editorial, playful]
5colors:
6  primary:   "#0A0A0A"
7  secondary: "#5A5A5A"
8  tertiary:  "#DC2626"
9  neutral:   "#FFFFFF"
10  surface:   "#FAFAFA"
11typography:
12  display: "Playfair Display"
13  body:    Inter
14  mono:    "JetBrains Mono"
15radius:
16  sm: 2px
17  md: 2px
18  lg: 4px
19buttons:
20  primary:
21    background: #FF3D00
22    color: #FFFFFF
23    border: none
24    shape: sharp
25    padding: 14px 28px
26    font: display / 800 / 0.04em
27    uppercase: true
28  secondary:
29    background: #000000
30    color: #FFFFFF
31    border: none
32    shape: sharp
33    padding: 14px 28px
34    font: display / 800 / 0.04em
35    uppercase: true
36  outline:
37    background: transparent
38    color: #000000
39    border: 3px solid #000000
40    shape: sharp
41    padding: 12px 26px
42    font: display / 800 / 0.04em
43    uppercase: true
44  ghost:
45    background: transparent
46    color: #FF3D00
47    border: none
48    shape: sharp
49    padding: 10px 0
50    font: display / 800 / 0.04em
51    uppercase: true
52    hover: underline
53charts:
54  variant: "top-only"
55  bar_radius: "3px 3px 0 0"
56  bar_gap: 10px
57  highlight: single
58fonts_url: "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap"
59dependencies: ["lucide-react"]
60---
61 
62# Magazine Bold
63 
64## AI Build Instructions
65 
66> **Read this section before writing any code.** The rules below
67> are non-negotiable. Every value used in the UI must come from this
68> file's frontmatter — never substitute, approximate, or invent new
69> colors, fonts, radii, or shadows. If a value is missing, ask the
70> user before adding one.
71 
72### 1 · Your role
73 
74You are building UI for a project that has adopted **Magazine Bold** as its
75design system. Treat `DESIGN.md` as the single source of truth.
76Your job is to translate the user's product requirements into
77components and pages that look like they were designed by the same
78person who authored this file.
79 
80### 2 · Token compliance
81 
82- Pull every color, font family, radius, shadow, and spacing value
83  from the frontmatter at the top of this file.
84- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
85  hard-code hex values that bypass the system.
86- When a token can be expressed as a CSS variable, declare it once
87  in your global stylesheet and reference it everywhere downstream.
88- The Google Fonts `<link>` is provided in the Typography section.
89  Add it to `<head>` before any component renders.
90 
91### 3 · Component recipes
92 
93Use these recipes verbatim when building the corresponding component.
94 
95#### Buttons
96 
97Four variants are defined. Pick one — never blend variants or invent a fifth.
98 
99- **Primary** — sharp shape, bg `#FF3D00`, text `#FFFFFF`, padding `14px 28px`, weight `800`, uppercased.
100- **Secondary** — sharp shape, bg `#000000`, text `#FFFFFF`, padding `14px 28px`, weight `800`, uppercased.
101- **Outline** — sharp shape, text `#000000`, border `3px solid #000000`, padding `12px 26px`, weight `800`, uppercased.
102- **Ghost** — sharp shape, text `#FF3D00`, padding `10px 0`, weight `800`, uppercased.
103 
104Reach for **primary** as the single dominant CTA per screen.
105**Secondary** for the supporting action. **Outline** for tertiary
106actions in toolbars. **Ghost** for inline links and table actions.
107 
108#### Cards
109 
110- Background: `#FAFAFA`
111- Radius: `radius.lg` (`4px`)
112- Internal padding: `20px` for compact cards, `24–28px` for content cards.
113 
114#### Tabs
115 
116Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
117Tabs are uppercased with `0.06em` tracking.
118 
119#### Charts
120 
121- Bar/line variant: `top-only`
122- Bar radius: `3px 3px 0 0`
123- Highlight strategy: `single` — emphasize a single bar/point per chart.
124 
125#### Typography pairings
126 
127- **Display (`Playfair Display`)** — h1, h2, hero headlines, brand wordmarks.
128- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
129- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
130 
131### 4 · Hard constraints
132 
133Never do any of the following without explicit instruction from the user:
134 
135- Introduce a new color, font, radius, or shadow that isn't declared above.
136- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
137- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
138- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
139- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
140 
141### 5 · Before you finish — verify
142 
143Run through this checklist for every screen you produce:
144 
145- [ ] Every color used appears in the Colors table above.
146- [ ] Headlines use the display font; body copy uses the body font.
147- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
148- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
149- [ ] Cards and dividers use the declared border + shadow tokens.
150- [ ] No values were invented; if you needed something missing, you stopped and asked.
151 
152---
153 
154## Overview
155A high-contrast print-inspired system. Oversized serif headlines do the storytelling; red is reserved for moments of urgency or featured items.
156 
157## Colors
158- **Primary #0A0A0A** — text and rules.
159- **Secondary #5A5A5A** — bylines, captions.
160- **Tertiary #DC2626** — red. Featured tags, primary CTAs.
161- **Neutral #FFFFFF** — page.
162- **Surface #FAFAFA** — cards.
163 
164## Typography
165**Playfair Display** at large sizes (900 weight on h1) — let it breathe. **Inter** for body.
166 
167## Spacing
1684px grid. 96px between sections. Use thin 1px rules to divide content.
169 
170## Components
171Near-zero radius (2px). No shadows. Buttons uppercase with red fill.
172 
173## Icons
174`lucide-react`, stroke width 1.5. Inherit text color, never red unless paired with a CTA.
175 
176## Do's and Don'ts
177- ✅ Make h1 huge — 5rem+ desktop.
178- ✅ Use italics on Playfair for editorial flair.
179- ❌ Don't use red on body text.
180- ❌ Don't soften with rounded corners.
181 
182---
183 
184## Tokens
185 
186> Generated from the same source the live preview renders from.
187> Treat the values below as the contract — never substitute approximations.
188 
189### Colors
190 
191| Role      | Value |
192|-----------|-------|
193| primary   | `#0A0A0A` |
194| secondary | `#5A5A5A` |
195| tertiary  | `#DC2626` |
196| neutral   | `#FFFFFF` |
197| surface   | `#FAFAFA` |
198 
199### Typography
200 
201- **Display:** Playfair Display
202- **Body:** Inter
203- **Mono:** JetBrains Mono
204 
205### Radius
206 
207- sm: `2px`
208- md: `2px`
209- lg: `4px`
210 
211### Buttons
212 
213Four variants, each fully tokenized. The preview renders from these exact values.
214 
215#### Primary
216 
217| Property | Value |
218|----------|-------|
219| shape | `sharp` |
220| background | `#FF3D00` |
221| color | `#FFFFFF` |
222| border | `none` |
223| padding | `14px 28px` |
224| fontFamily | `display` |
225| fontWeight | `800` |
226| tracking | `0.04em` |
227| uppercase | `true` |
228 
229#### Secondary
230 
231| Property | Value |
232|----------|-------|
233| shape | `sharp` |
234| background | `#000000` |
235| color | `#FFFFFF` |
236| border | `none` |
237| padding | `14px 28px` |
238| fontFamily | `display` |
239| fontWeight | `800` |
240| tracking | `0.04em` |
241| uppercase | `true` |
242 
243#### Outline
244 
245| Property | Value |
246|----------|-------|
247| shape | `sharp` |
248| background | `transparent` |
249| color | `#000000` |
250| border | `3px solid #000000` |
251| padding | `12px 26px` |
252| fontFamily | `display` |
253| fontWeight | `800` |
254| tracking | `0.04em` |
255| uppercase | `true` |
256 
257#### Ghost
258 
259| Property | Value |
260|----------|-------|
261| shape | `sharp` |
262| background | `transparent` |
263| color | `#FF3D00` |
264| border | `none` |
265| padding | `10px 0` |
266| fontFamily | `display` |
267| fontWeight | `800` |
268| tracking | `0.04em` |
269| uppercase | `true` |
270| hoverHint | `underline` |
271 
272### Charts
273 
274| Property | Value |
275|----------|-------|
276| variant | `top-only` |
277| barRadius | `3px 3px 0 0` |
278| barGap | `10px` |
279| highlight | `single` |
280 
281---
282 
283## Pro tokens
284 
285> Production-fidelity tokens. States, density, motion, elevation,
286> content rules and a measured WCAG contract — derived from the
287> resting tokens unless explicitly authored.
288 
289### States
290 
291#### Button
292 
293- **hover** — bg: `rgba(220, 38, 38, 0.92)`, shadow: `0 4px 20px -8px rgba(220, 38, 38, 0.4)`
294- **focus** — outline: `1.5px solid #DC2626`, outline-offset: `4px`
295- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
296- **disabled** — opacity: `0.45`
297- **loading** — opacity: `0.7`
298- **selected** — bg: `#0A0A0A`, color: `#FAFAFA`
299 
300#### Input
301 
302- **hover** — border: `1px solid #0A0A0A`
303- **focus** — border: `1px solid #DC2626`, shadow: `0 1px 0 0 #DC2626`
304- **disabled** — opacity: `0.45`
305- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
306 
307#### Card
308 
309- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
310- **selected** — border: `1px solid #0A0A0A`
311 
312#### Tab
313 
314- **hover** — color: `#0A0A0A`
315- **focus** — outline: `1.5px solid #DC2626`, outline-offset: `3px`
316- **selected** — color: `#DC2626`, border: `0 0 2px 0 solid #DC2626`
317 
318### Density
319 
320| Mode | padding × | row × | body | radius × | Use for |
321|------|-----------|-------|------|----------|---------|
322| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
323| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
324| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
325 
326### Motion
327 
328**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
329 
330```css
331transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
332```
333 
334| Token | Value |
335|-------|-------|
336| duration.instant | `80ms` |
337| duration.fast | `180ms` |
338| duration.base | `320ms` |
339| duration.slow | `500ms` |
340| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
341| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
342| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
343| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
344 
345### Elevation
346 
347Five-level scale, system-specific recipe.
348 
349| Level | Shadow | Recipe |
350|-------|--------|--------|
351| level0 | `none` | Hairline only — typical editorial resting state. |
352| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
353| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
354| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
355| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
356 
357### Content
358 
359- **measure:** `60ch` (max line length for body prose)
360- **paragraph spacing:** `1.5em`
361- **list indent:** `1.75em`
362- **list gap:** `0.55em`
363- **link:** color `#DC2626`, underline `always`
364- **blockquote:** border `4px solid #DC2626`, padding `0.4em 0 0.4em 1.5em`
365- **code:** background `rgba(10, 10, 10, 0.06)`, color `#0A0A0A`
366 
367### Accessibility (WCAG 2.1)
368 
369**Overall:** AA
370 
371| Pair | Ratio | Required | Grade | Suggested fix |
372|------|-------|----------|-------|---------------|
373| Body text on surface | 18.97:1 | AA | AAA | — |
374| Body text on canvas | 19.8:1 | AA | AAA | — |
375| Muted text on surface | 6.61:1 | AA | AA | — |
376| Accent on surface | 4.63:1 | AA-Large | AA | — |
377| Accent on canvas | 4.83:1 | AA-Large | AA | — |
378
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=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Playfair Display"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0A0A0A',
        secondary: '#5A5A5A',
        accent:    '#DC2626',
        neutral:   '#FFFFFF',
        surface:   '#FAFAFA',
      },
      borderRadius: {
        sm: '2px',
        md: '2px',
        lg: '4px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Sorbet Tonal

A multi-stop pastel gradient runs across the page — desaturated lavender, peach, seafoam, cream — every stop at ~25% chroma so it reads as soft sorbet rather than rainbow. Pure paper-white cards, ink text, hairlines. Calm and considered.

gradientpastelsoftminimalwellnesspremium
Sorbet.app
ProductPricingDocsAbout
Sign inGet started
gradient · pastel · soft

Build with Sorbet Tonal.

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

Argent Machined

Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined.

metallicpremiumcoolminimalhardware
Argent.app
ProductPricingDocsAbout
Sign inGet started
metallic · premium · cool

Build with Argent Machined.

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