A warm, high-contrast palette rooted in broadsheet newspaper aesthetics.
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: "Warm Editorial"3description: "A warm, high-contrast palette rooted in broadsheet newspaper aesthetics."4tags: [editorial, minimal, warm]5colors:6 primary: "#1A1C1E"7 secondary: "#6C7278"8 tertiary: "#B8422E"9 neutral: "#F7F5F2"10 surface: "#FFFFFF"11typography:12 display: Fraunces13 body: "Public Sans"14 mono: "JetBrains Mono"15radius:16 sm: 4px17 md: 6px18 lg: 8px19buttons:20 primary:21 background: #B8422E22 color: #FFFFFF23 border: none24 shape: rounded25 padding: 12px 20px26 font: 50027 secondary:28 background: #1A1C1E29 color: #FFFFFF30 border: none31 shape: rounded32 padding: 12px 20px33 font: 50034 outline:35 background: #FFFFFF36 color: #1A1C1E37 border: 1px solid #E8E4DD38 shape: rounded39 padding: 12px 20px40 font: 50041 ghost:42 background: transparent43 color: #B8422E44 border: none45 shape: rounded46 padding: 10px 12px47 font: 60048 hover: underline49charts:50 variant: capsule51 bar_gap: 12px52 highlight: gradient53fonts_url: "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;1,400&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"54dependencies: ["lucide-react"]55---56 57# Warm Editorial58 59## AI Build Instructions60 61> **Read this section before writing any code.** The rules below62> are non-negotiable. Every value used in the UI must come from this63> file's frontmatter — never substitute, approximate, or invent new64> colors, fonts, radii, or shadows. If a value is missing, ask the65> user before adding one.66 67### 1 · Your role68 69You are building UI for a project that has adopted **Warm Editorial** as its70design system. Treat `DESIGN.md` as the single source of truth.71Your job is to translate the user's product requirements into72components and pages that look like they were designed by the same73person who authored this file.74 75### 2 · Token compliance76 77- Pull every color, font family, radius, shadow, and spacing value78 from the frontmatter at the top of this file.79- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never80 hard-code hex values that bypass the system.81- When a token can be expressed as a CSS variable, declare it once82 in your global stylesheet and reference it everywhere downstream.83- The Google Fonts `<link>` is provided in the Typography section.84 Add it to `<head>` before any component renders.85 86### 3 · Component recipes87 88Use these recipes verbatim when building the corresponding component.89 90#### Buttons91 92Four variants are defined. Pick one — never blend variants or invent a fifth.93 94- **Primary** — rounded shape, bg `#B8422E`, text `#FFFFFF`, padding `12px 20px`, weight `500`.95- **Secondary** — rounded shape, bg `#1A1C1E`, text `#FFFFFF`, padding `12px 20px`, weight `500`.96- **Outline** — rounded shape, bg `#FFFFFF`, text `#1A1C1E`, border `1px solid #E8E4DD`, padding `12px 20px`, weight `500`.97- **Ghost** — rounded shape, text `#B8422E`, padding `10px 12px`, weight `600`.98 99Reach for **primary** as the single dominant CTA per screen.100**Secondary** for the supporting action. **Outline** for tertiary101actions in toolbars. **Ghost** for inline links and table actions.102 103#### Cards104 105- Background: `#FFFFFF`106- Radius: `radius.lg` (`8px`)107- Internal padding: `20px` for compact cards, `24–28px` for content cards.108 109#### Tabs110 111Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.112 113#### Charts114 115- Bar/line variant: `capsule`116- Highlight strategy: `gradient` — emphasize a single bar/point per chart.117 118#### Typography pairings119 120- **Display (`Fraunces`)** — h1, h2, hero headlines, brand wordmarks.121- **Body (`Public Sans`)** — paragraphs, labels, button text, form inputs.122- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.123 124### 4 · Hard constraints125 126Never do any of the following without explicit instruction from the user:127 128- Introduce a new color, font, radius, or shadow that isn't declared above.129- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).130- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.131- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.132- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.133 134### 5 · Before you finish — verify135 136Run through this checklist for every screen you produce:137 138- [ ] Every color used appears in the Colors table above.139- [ ] Headlines use the display font; body copy uses the body font.140- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).141- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.142- [ ] Cards and dividers use the declared border + shadow tokens.143- [ ] No values were invented; if you needed something missing, you stopped and asked.144 145---146 147## Overview148A serif-driven editorial system. Warmth comes from the off-white background and a single terracotta accent — used only on primary actions. The aesthetic borrows from print: generous whitespace, italic emphasis, restrained color.149 150## Colors151- **Primary #1A1C1E** — body and headlines. Near-black, never pure black, to keep warmth.152- **Secondary #6C7278** — meta text, captions, secondary UI.153- **Tertiary #B8422E** — terracotta. CTAs and italic display emphasis only. Never on body text or icons.154- **Neutral #F7F5F2** — page background.155- **Surface #FFFFFF** — cards, modals, elevated panels.156 157## Typography158- Display: **Fraunces** — italics for emphasis on key fragments only.159- Body: **Public Sans** — clean, neutral grotesque.160- Mono: **JetBrains Mono** — code blocks.161 162## Spacing1634px base unit. Sections separated by 96px. Container max 1200px with 24px gutter.164 165## Components166Buttons are filled terracotta or outline. Cards are white with a 1px border and minimal shadow.167 168## Icons169Use `lucide-react` exclusively. Stroke width 1.5. Default 20px, 16px in dense UI, 24px on primary actions. Icons inherit text color — never terracotta.170 171## Do's and Don'ts172- ✅ Use terracotta sparingly — one or two elements per viewport.173- ✅ Italicize a fragment of a headline for emphasis.174- ❌ Don't apply terracotta to body text, icons, or large surfaces.175- ❌ Don't use gradients or heavy shadows.176 177---178 179## Tokens180 181> Generated from the same source the live preview renders from.182> Treat the values below as the contract — never substitute approximations.183 184### Colors185 186| Role | Value |187|-----------|-------|188| primary | `#1A1C1E` |189| secondary | `#6C7278` |190| tertiary | `#B8422E` |191| neutral | `#F7F5F2` |192| surface | `#FFFFFF` |193 194### Typography195 196- **Display:** Fraunces197- **Body:** Public Sans198- **Mono:** JetBrains Mono199 200### Radius201 202- sm: `4px`203- md: `6px`204- lg: `8px`205 206### Buttons207 208Four variants, each fully tokenized. The preview renders from these exact values.209 210#### Primary211 212| Property | Value |213|----------|-------|214| shape | `rounded` |215| background | `#B8422E` |216| color | `#FFFFFF` |217| border | `none` |218| padding | `12px 20px` |219| fontWeight | `500` |220 221#### Secondary222 223| Property | Value |224|----------|-------|225| shape | `rounded` |226| background | `#1A1C1E` |227| color | `#FFFFFF` |228| border | `none` |229| padding | `12px 20px` |230| fontWeight | `500` |231 232#### Outline233 234| Property | Value |235|----------|-------|236| shape | `rounded` |237| background | `#FFFFFF` |238| color | `#1A1C1E` |239| border | `1px solid #E8E4DD` |240| padding | `12px 20px` |241| fontWeight | `500` |242 243#### Ghost244 245| Property | Value |246|----------|-------|247| shape | `rounded` |248| background | `transparent` |249| color | `#B8422E` |250| border | `none` |251| padding | `10px 12px` |252| fontWeight | `600` |253| hoverHint | `underline` |254 255### Charts256 257| Property | Value |258|----------|-------|259| variant | `capsule` |260| barGap | `12px` |261| highlight | `gradient` |262 # 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=Fraunces:ital,wght@0,400;0,600;0,700;1,400&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Fraunces"', 'serif'], sans: ['"Public Sans"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1A1C1E', secondary: '#6C7278', accent: '#B8422E', neutral: '#F7F5F2', surface: '#FFFFFF', }, borderRadius: { sm: '4px', md: '6px', lg: '8px', }, }, },};Dark graphite glassmorphism — heavy 48px backdrop blur on near-opaque graphite panes, hairline pewter borders, and brushed-silver text accents. No color, no glow, no aurora. Just clean machined glass over a flat charcoal canvas with subtle metallic gradients on display type.
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.
tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect.
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.