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', }, }, },};A precision dark dev-tool surface. Near-black background, every divider a single 1px hairline at 8% white, Inter Display for headings and Geist Mono for IDs and timestamps with tabular-nums, a single electric mint accent reserved for active status pills and the primary CTA. Built for infrastructure dashboards, observability tools, and developer-platform marketing pages where the chrome itself reads as a precision instrument.
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 two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration.
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.