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', }, }, },};Design-agency oversized grotesque. 8rem condensed display sans with -5% tracking — the type itself is the layout. Off-white canvas, one molten-orange accent, hairline grid, asymmetric columns. Hits hard the moment it loads.
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 soft modern SaaS surface with the warmth of a marshmallow. Cream-mallow page background, butter-soft cards with generous radius, Manrope for UI and DM Mono for figures, a single muted lavender accent reserved for the primary CTA and the active sidebar item. Built for early-stage product pages, friendly B2C dashboards, and onboarding flows that need to feel approachable without going saccharine.
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.