# 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.