High-contrast red, oversized Playfair headlines, dense editorial layout.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: Inter14 mono: "JetBrains Mono"15radius:16 sm: 2px17 md: 2px18 lg: 4px19buttons:20 primary:21 background: #FF3D0022 color: #FFFFFF23 border: none24 shape: sharp25 padding: 14px 28px26 font: display / 800 / 0.04em27 uppercase: true28 secondary:29 background: #00000030 color: #FFFFFF31 border: none32 shape: sharp33 padding: 14px 28px34 font: display / 800 / 0.04em35 uppercase: true36 outline:37 background: transparent38 color: #00000039 border: 3px solid #00000040 shape: sharp41 padding: 12px 26px42 font: display / 800 / 0.04em43 uppercase: true44 ghost:45 background: transparent46 color: #FF3D0047 border: none48 shape: sharp49 padding: 10px 050 font: display / 800 / 0.04em51 uppercase: true52 hover: underline53charts:54 variant: "top-only"55 bar_radius: "3px 3px 0 0"56 bar_gap: 10px57 highlight: single58fonts_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 Bold63 64## AI Build Instructions65 66> **Read this section before writing any code.** The rules below67> are non-negotiable. Every value used in the UI must come from this68> file's frontmatter — never substitute, approximate, or invent new69> colors, fonts, radii, or shadows. If a value is missing, ask the70> user before adding one.71 72### 1 · Your role73 74You are building UI for a project that has adopted **Magazine Bold** as its75design system. Treat `DESIGN.md` as the single source of truth.76Your job is to translate the user's product requirements into77components and pages that look like they were designed by the same78person who authored this file.79 80### 2 · Token compliance81 82- Pull every color, font family, radius, shadow, and spacing value83 from the frontmatter at the top of this file.84- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never85 hard-code hex values that bypass the system.86- When a token can be expressed as a CSS variable, declare it once87 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 recipes92 93Use these recipes verbatim when building the corresponding component.94 95#### Buttons96 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 tertiary106actions in toolbars. **Ghost** for inline links and table actions.107 108#### Cards109 110- Background: `#FAFAFA`111- Radius: `radius.lg` (`4px`)112- Internal padding: `20px` for compact cards, `24–28px` for content cards.113 114#### Tabs115 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#### Charts120 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 pairings126 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 constraints132 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 — verify142 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## Overview155A high-contrast print-inspired system. Oversized serif headlines do the storytelling; red is reserved for moments of urgency or featured items.156 157## Colors158- **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## Typography165**Playfair Display** at large sizes (900 weight on h1) — let it breathe. **Inter** for body.166 167## Spacing1684px grid. 96px between sections. Use thin 1px rules to divide content.169 170## Components171Near-zero radius (2px). No shadows. Buttons uppercase with red fill.172 173## Icons174`lucide-react`, stroke width 1.5. Inherit text color, never red unless paired with a CTA.175 176## Do's and Don'ts177- ✅ 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## Tokens185 186> Generated from the same source the live preview renders from.187> Treat the values below as the contract — never substitute approximations.188 189### Colors190 191| Role | Value |192|-----------|-------|193| primary | `#0A0A0A` |194| secondary | `#5A5A5A` |195| tertiary | `#DC2626` |196| neutral | `#FFFFFF` |197| surface | `#FAFAFA` |198 199### Typography200 201- **Display:** Playfair Display202- **Body:** Inter203- **Mono:** JetBrains Mono204 205### Radius206 207- sm: `2px`208- md: `2px`209- lg: `4px`210 211### Buttons212 213Four variants, each fully tokenized. The preview renders from these exact values.214 215#### Primary216 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#### Secondary230 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#### Outline244 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#### Ghost258 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### Charts273 274| Property | Value |275|----------|-------|276| variant | `top-only` |277| barRadius | `3px 3px 0 0` |278| barGap | `10px` |279| highlight | `single` |280 # 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.<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" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};A developer tool that finally feels warm. Graphite surfaces (never black, never grey), JetBrains Mono for everything technical, Inter for prose, a single sage-green accent reserved for the active state. Built for CLIs, infra dashboards, and dev portals that want to look serious without looking like a 90s terminal.
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.
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.
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.