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: Fraunces
13  body:    "Public Sans"
14  mono:    "JetBrains Mono"
15radius:
16  sm: 4px
17  md: 6px
18  lg: 8px
19buttons:
20  primary:
21    background: #B8422E
22    color: #FFFFFF
23    border: none
24    shape: rounded
25    padding: 12px 20px
26    font: 500
27  secondary:
28    background: #1A1C1E
29    color: #FFFFFF
30    border: none
31    shape: rounded
32    padding: 12px 20px
33    font: 500
34  outline:
35    background: #FFFFFF
36    color: #1A1C1E
37    border: 1px solid #E8E4DD
38    shape: rounded
39    padding: 12px 20px
40    font: 500
41  ghost:
42    background: transparent
43    color: #B8422E
44    border: none
45    shape: rounded
46    padding: 10px 12px
47    font: 600
48    hover: underline
49charts:
50  variant: capsule
51  bar_gap: 12px
52  highlight: gradient
53fonts_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 Editorial
58 
59## AI Build Instructions
60 
61> **Read this section before writing any code.** The rules below
62> are non-negotiable. Every value used in the UI must come from this
63> file's frontmatter — never substitute, approximate, or invent new
64> colors, fonts, radii, or shadows. If a value is missing, ask the
65> user before adding one.
66 
67### 1 · Your role
68 
69You are building UI for a project that has adopted **Warm Editorial** as its
70design system. Treat `DESIGN.md` as the single source of truth.
71Your job is to translate the user's product requirements into
72components and pages that look like they were designed by the same
73person who authored this file.
74 
75### 2 · Token compliance
76 
77- Pull every color, font family, radius, shadow, and spacing value
78  from the frontmatter at the top of this file.
79- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
80  hard-code hex values that bypass the system.
81- When a token can be expressed as a CSS variable, declare it once
82  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 recipes
87 
88Use these recipes verbatim when building the corresponding component.
89 
90#### Buttons
91 
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 tertiary
101actions in toolbars. **Ghost** for inline links and table actions.
102 
103#### Cards
104 
105- Background: `#FFFFFF`
106- Radius: `radius.lg` (`8px`)
107- Internal padding: `20px` for compact cards, `24–28px` for content cards.
108 
109#### Tabs
110 
111Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
112 
113#### Charts
114 
115- Bar/line variant: `capsule`
116- Highlight strategy: `gradient` — emphasize a single bar/point per chart.
117 
118#### Typography pairings
119 
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 constraints
125 
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 — verify
135 
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## Overview
148A 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## Colors
151- **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## Typography
158- Display: **Fraunces** — italics for emphasis on key fragments only.
159- Body: **Public Sans** — clean, neutral grotesque.
160- Mono: **JetBrains Mono** — code blocks.
161 
162## Spacing
1634px base unit. Sections separated by 96px. Container max 1200px with 24px gutter.
164 
165## Components
166Buttons are filled terracotta or outline. Cards are white with a 1px border and minimal shadow.
167 
168## Icons
169Use `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'ts
172- ✅ 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## Tokens
180 
181> Generated from the same source the live preview renders from.
182> Treat the values below as the contract — never substitute approximations.
183 
184### Colors
185 
186| Role      | Value |
187|-----------|-------|
188| primary   | `#1A1C1E` |
189| secondary | `#6C7278` |
190| tertiary  | `#B8422E` |
191| neutral   | `#F7F5F2` |
192| surface   | `#FFFFFF` |
193 
194### Typography
195 
196- **Display:** Fraunces
197- **Body:** Public Sans
198- **Mono:** JetBrains Mono
199 
200### Radius
201 
202- sm: `4px`
203- md: `6px`
204- lg: `8px`
205 
206### Buttons
207 
208Four variants, each fully tokenized. The preview renders from these exact values.
209 
210#### Primary
211 
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#### Secondary
222 
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#### Outline
233 
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#### Ghost
244 
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### Charts
256 
257| Property | Value |
258|----------|-------|
259| variant | `capsule` |
260| barGap | `12px` |
261| highlight | `gradient` |
262 
263---
264 
265## Pro tokens
266 
267> Production-fidelity tokens. States, density, motion, elevation,
268> content rules and a measured WCAG contract — derived from the
269> resting tokens unless explicitly authored.
270 
271### States
272 
273#### Button
274 
275- **hover** — bg: `rgba(184, 66, 46, 0.92)`, shadow: `0 4px 20px -8px rgba(184, 66, 46, 0.4)`
276- **focus** — outline: `1.5px solid #B8422E`, outline-offset: `4px`
277- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
278- **disabled** — opacity: `0.45`
279- **loading** — opacity: `0.7`
280- **selected** — bg: `#1A1C1E`, color: `#FFFFFF`
281 
282#### Input
283 
284- **hover** — border: `1px solid #1A1C1E`
285- **focus** — border: `1px solid #B8422E`, shadow: `0 1px 0 0 #B8422E`
286- **disabled** — opacity: `0.45`
287- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
288 
289#### Card
290 
291- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
292- **selected** — border: `1px solid #1A1C1E`
293 
294#### Tab
295 
296- **hover** — color: `#1A1C1E`
297- **focus** — outline: `1.5px solid #B8422E`, outline-offset: `3px`
298- **selected** — color: `#B8422E`, border: `0 0 2px 0 solid #B8422E`
299 
300### Density
301 
302| Mode | padding × | row × | body | radius × | Use for |
303|------|-----------|-------|------|----------|---------|
304| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
305| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
306| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
307 
308### Motion
309 
310**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
311 
312```css
313transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
314```
315 
316| Token | Value |
317|-------|-------|
318| duration.instant | `80ms` |
319| duration.fast | `180ms` |
320| duration.base | `320ms` |
321| duration.slow | `500ms` |
322| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
323| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
324| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
325| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
326 
327### Elevation
328 
329Five-level scale, system-specific recipe.
330 
331| Level | Shadow | Recipe |
332|-------|--------|--------|
333| level0 | `none` | Hairline only — typical editorial resting state. |
334| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
335| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
336| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
337| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
338 
339### Content
340 
341- **measure:** `60ch` (max line length for body prose)
342- **paragraph spacing:** `1.5em`
343- **list indent:** `1.75em`
344- **list gap:** `0.55em`
345- **link:** color `#B8422E`, underline `always`
346- **blockquote:** border `4px solid #B8422E`, padding `0.4em 0 0.4em 1.5em`
347- **code:** background `rgba(26, 28, 30, 0.06)`, color `#1A1C1E`
348 
349### Accessibility (WCAG 2.1)
350 
351**Overall:** AA
352 
353| Pair | Ratio | Required | Grade | Suggested fix |
354|------|-------|----------|-------|---------------|
355| Body text on surface | 17.09:1 | AA | AAA | — |
356| Body text on canvas | 15.71:1 | AA | AAA | — |
357| Muted text on surface | 4.87:1 | AA | AA | — |
358| Accent on surface | 5.44:1 | AA-Large | AA | — |
359| Accent on canvas | 5:1 | AA-Large | AA | — |
360