# Warm Editorial
크림빛 종이 위에 잉크브라운 잔글과 우아한 세리프 디스플레이를 얹은 따뜻한 문학 편집 스타일 — 읽는 즐거움이 곧 디자인이다.
- taxonomy: editorial-minimalism · warm-editorial, serif-display, literary, reading-comfort, cream-paper, magazine-longform · complexity=medium
- page types: editorial, portfolio, landing, docs
- best for: 잡지형 롱폼 아티클과 에세이, 작가·포토그래퍼 포트폴리오, 음식·라이프스타일 부티크 브랜드, 따뜻한 톤의 브랜드 매니페스토
- avoid for: 데이터 밀도 높은 대시보드, 테크·핀테크의 차가운 제품 UI, 빠른 전환이 필요한 커머스 체크아웃, 네온·다크 게이밍 인터페이스
- provenance: authored (Warm literary editorial (편집 큐레이션) — Editorial Swiss의 따뜻한 세리프 대응) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# Warm Editorial
## Overview
The warm, literary counterpart to Editorial Swiss. Where Swiss is cold sans on a severe grid, Warm Editorial is ink-brown type on cream paper, led by an elegant serif display and tuned for reading comfort. Think a well-set magazine longform, an author's portfolio, or a boutique food/lifestyle brand: unhurried, tactile, warm. Hierarchy still comes from type and whitespace — but the mood is invitation, not rigor.
## Colors & Roles
Warm neutral foundation on the hue 54–84 axis. `background` is cream (oklch ~0.972/0.013/82), `foreground` is ink-brown (~0.27/0.024/58) — never pure black or gray. `card` is a slightly brighter paper that lifts off the page. `primary` is a deep espresso brown for default buttons and marks; the single chromatic `accent` is terracotta (~0.615/0.138/45), reserved for the key CTA, active states, and a punctuation of emphasis. `muted-foreground` is a warm taupe for secondary text. `destructive` is the one cool-leaning red, used only for genuine warnings. Keep everything on the warm axis; a stray cool gray reads as a bug.
## Typography Rules
Two families. **Display/headings:** Fraunces (→ Source Serif 4 fallback), set large at a light-to-regular weight (400) so the serif feels graceful, not heavy — line-height ~1.05, letter-spacing −0.02em. **Body:** a humanist sans (Söhne → Inter fallback) at 400 with a generous 1.72 line-height for longform legibility. A serif `lead` step (1.375rem) opens articles with a literary tone. `caption` is uppercase, 500 weight, 0.06em tracking — the section-label voice. Modular scale ratio ≈ 1.2 for a gentle, close progression.
## Layout Principles
Max page width ~1120px, but body text lives in a narrow single-column reading measure (~66ch, roughly 640–720px) centered with wide side margins. Images, pull-quotes, and figures may break out wider to create rhythm against the narrow text column. Vertical rhythm is generous: section gaps `clamp(5rem, 10vw, 8.5rem)`. Aim for 35%+ of the viewport as whitespace. No rigid 12-column severity — the measure is the grid.
## Depth & Elevation
Soft and low. One warm shadow step (brown-tinted, ~9% opacity, 28px blur, −6px spread, 12px y-offset) lifts cards, images, and popovers like paper resting on paper. A faint paper grain (noise ~0.04) is welcome for texture. No glass, no neon gradients, no hard slab shadows.
## Shapes
Moderate, friendly radii: 8px on boxes/cards, 6px on fields and buttons. Nothing pill-shaped, nothing perfectly square — the softness reinforces the warm, tactile register.
## Component Stylings
- **Button**: radius 6px, filled `primary` (ink-brown) with `primary-foreground` text, sans 500, padding 12px 24px. Hover shifts toward `accent` or brightens over 180ms. Focus = 2px `accent` outline at 2px offset. Disabled = opacity 0.45, no shadow. The terracotta `accent` fill is the one hero CTA per page. Text links underline on hover, the underline filling in gently.
- **Card**: `card` paper background, 8px radius, 1px warm border plus the single soft shadow. Padding 32–40px. Card headings are serif.
- **Input**: radius 6px, 1px border, `card` background; focus moves the border to `accent` with a 2px ring. Labels use the uppercase caption style.
- **Nav**: thin hairline bottom rule, serif wordmark left, sans links right; links underline on hover. Stays cream on scroll — no glass blur.
## Motion
Calm and literary. Opacity + translateY(10px) fade-ups (180–340ms), links whose underline draws in on hover, popovers that ease open with `cubic-bezier(0.22, 1, 0.36, 1)`. No bounce, spring overshoot, or parallax.
## Do's and Don'ts
**Do:** set headlines in large Fraunces serif and body in sans at ~1.7 line-height; keep body to a ~66ch measure with wide margins; hold the terracotta accent to one or two uses; open sections with an uppercase caption label and a warm hairline.
**Don't:** use cold gray or pure-black text; set headlines in sans; stretch body text full-width; reach for heavy shadows, glass, or neon gradients; let the accent carry hierarchy that type and space should carry.
## Responsive Behavior
The reading measure already behaves well — on mobile it simply fills the column with comfortable side padding, and display type scales via `clamp()`. Breakout images collapse to full-width figures. Nav links wrap or condense to a simple menu; the cream background and serif wordmark persist across breakpoints.
## Agent Prompt Guide
> Build this in the 'Warm Editorial' style: cream/paper background with ink-brown foreground and one terracotta accent, an elegant Fraunces serif display for oversized headlines paired with a humanist sans body at generous 1.7 line-height, a narrow ~66ch reading measure with wide margins, moderate 6-8px radius, soft low warm shadows instead of hard borders, and uppercase tracked caption labels opening each section — literary magazine calm, never cold or gridded.
## Known Gaps / Confidence
Authored seed style (not extracted from a live URL), so all tokens are `manual` confidence. Fraunces and Inter are real Google Fonts and the practical reproduction defaults; Söhne (body) and Source Serif 4 are commercial/alternate picks noted in the font stack. The paper grain effect is a suggestion (`noise`/`grain` tokens) rather than a shipped asset.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Warm Editorial — theme.css (generated, do not edit) */
:root {
--radius: 8px;
--radius-selector: 6px;
--radius-field: 6px;
--font-sans: 'Söhne', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-serif: 'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif;
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
--font-display: 'Fraunces', 'Source Serif 4', Georgia, serif;
--spacing: 8px;
--shadow: 0px 12px 28px -6px color-mix(in oklab, oklch(0.31 0.032 54) 9%, transparent);
--ks-display-weight: 400;
--ks-display-tracking: -0.02em;
--background: oklch(0.972 0.013 82);
--foreground: oklch(0.27 0.024 58);
--card: oklch(0.99 0.008 84);
--card-foreground: oklch(0.27 0.024 58);
--popover: oklch(0.99 0.008 84);
--popover-foreground: oklch(0.27 0.024 58);
--primary: oklch(0.31 0.032 54);
--primary-foreground: oklch(0.975 0.013 82);
--secondary: oklch(0.93 0.021 78);
--secondary-foreground: oklch(0.31 0.032 54);
--muted: oklch(0.945 0.016 80);
--muted-foreground: oklch(0.505 0.026 62);
--accent: oklch(0.615 0.138 45);
--accent-foreground: oklch(0.99 0.008 84);
--destructive: oklch(0.52 0.194 27);
--destructive-foreground: oklch(0.99 0.008 84);
--border: oklch(0.885 0.017 78);
--input: oklch(0.885 0.017 78);
--ring: oklch(0.615 0.138 45);
--chart-1: oklch(0.615 0.138 45);
--chart-2: oklch(0.31 0.032 54);
--chart-3: oklch(0.70 0.09 68);
--chart-4: oklch(0.55 0.06 40);
--chart-5: oklch(0.78 0.045 82);
}
.dark {
--background: oklch(0.205 0.014 58);
--foreground: oklch(0.935 0.014 82);
--card: oklch(0.238 0.016 58);
--card-foreground: oklch(0.935 0.014 82);
--popover: oklch(0.238 0.016 58);
--popover-foreground: oklch(0.935 0.014 82);
--primary: oklch(0.92 0.016 82);
--primary-foreground: oklch(0.225 0.016 58);
--secondary: oklch(0.285 0.018 62);
--secondary-foreground: oklch(0.905 0.014 82);
--muted: oklch(0.285 0.018 62);
--muted-foreground: oklch(0.685 0.022 74);
--accent: oklch(0.685 0.142 48);
--accent-foreground: oklch(0.205 0.014 58);
--destructive: oklch(0.62 0.185 27);
--destructive-foreground: oklch(0.205 0.014 58);
--border: oklch(0.325 0.018 62);
--input: oklch(0.325 0.018 62);
--ring: oklch(0.685 0.142 48);
--chart-1: oklch(0.685 0.142 48);
--chart-2: oklch(0.92 0.016 82);
--chart-3: oklch(0.74 0.09 70);
--chart-4: oklch(0.60 0.07 42);
--chart-5: oklch(0.55 0.04 82);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Issue Nº 14 — The Slow Kitchen
A morning spent proofing bread, and nothing else.
Notes on patience, warmth, and the quiet architecture of a loaf — an essay on doing one thing slowly, and doing it well.
Dawn light on the second rise. Photograph by the author.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/warm-editorial.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `