# Editorial Confidence

## Overview
A magazine spread rendered as a website. A wide warm-white canvas holds a 12-column asymmetric grid where oversized Fraunces display-serif headlines meet calm Inter body text. A single deep-forest color is used boldly as full-bleed solid panels — the only accent on the page. Hierarchy comes from type scale, generous leading, and whitespace; decoration (shadows, gradients, rounded corners) is banned. If a section feels flat, the fix is a bolder asymmetry or a forest panel — not a second color.

## Colors & Roles
Warm foundation: `background` a paper-tinted off-white, `foreground` a soft ink (both warm, hue ~90-107). The signature is one deep-forest accent (oklch ~0.323/0.040/164, from source `#1f3a2e`) mapped to `primary`, `accent`, `ring`, and `chart-1`. It appears as solid full-bleed panels, underlined links, and 1px button borders — never joined by a second chromatic accent. Surfaces separate by a warm 1px hairline `border` or tonal step, never by shadow. `muted-foreground` is a warm gray for captions and credits. `destructive` is a standalone system red (not part of the palette; the pack ships no red).

## Typography Rules
Two families with fixed roles, never mixed: **Fraunces** (display serif, high optical size) for headlines and pull-quotes; **Inter** (sans) for body, captions, and kickers. Display headlines are large and tracking-tight (`clamp(2.6rem, 5.5vw, 5rem)`, weight 600, −0.02em, line-height 1.08). Body runs at 1.125rem / line-height 1.7, measured to 62-70ch. Kickers are uppercase Inter with wide 0.14em tracking as section overlines. Modular scale ratio ≈ 1.5.

## Layout Principles
Max content width 1200px with `clamp(24px, 5vw, 72px)` side padding. Compose on a 12-column / 32px-gap grid, asymmetrically: text in ~7 columns with a 5-column offset for whitespace or captions; large photos span ~8 columns right-aligned while a headline holds the left 4. Vertical rhythm is large: section gaps `clamp(80px, 10vw, 144px)`. Below 720px the grid collapses to one column but the hairline-rule hierarchy stays.

## Depth & Elevation
Flat by rule. No shadows, gradients, glass, or noise. Division is done with 1px warm hairline rules, whitespace, and solid forest panels. Editorial content is static — depth is a layout decision, not a lighting effect.

## Shapes
Zero border-radius everywhere — cards, images, buttons, accent panels. Corners are sharp. Images are full rectangles with no border, captioned by a single small sans line beneath.

## Component Stylings
- **Button**: radius 0; text-link style or 1px solid `accent` square border over transparent fill, padding 14px 28px. On a forest panel, the CTA hover inverts to `background` fill with `accent` text (180ms).
- **Card**: no border or shadow; a single 1px top hairline rule plus generous padding. Fraunces H2 + Inter body + small caption.
- **Input**: 1px full border or underline, radius 0; focus border goes to `accent`.
- **Nav**: not sticky (flows with scroll), 80px tall; Fraunces wordmark left, text menu right, 1px hairline rule beneath.
- **Link**: `accent` text with a 1px underline (offset 3px); hover thickens the underline to 2px, color held.
- **Blockquote**: 2px `accent` vertical rule + Fraunces 1.5rem italic.
- **Accent panel**: a full section or column filled solid `accent`, `accent-foreground` text, radius 0; interior dividers are translucent white rules.

## Motion
Restrained. Scroll entrance: opacity 0→1 + translateY(20px→0), 500ms ease-out. Link hover thickens the underline (160ms). Images have no hover motion. `prefers-reduced-motion: reduce` removes entrance motion (content shows instantly) and keeps only hover color transitions.

## Do's and Don'ts
**Do:** fix headline serif to Fraunces and body to Inter; keep the accent to one deep-forest used as solid panels; compose asymmetric multi-column; open each section with an uppercase kicker + hairline rule; keep body at 62-70ch.
**Don't:** use border-radius > 0; use drop-shadows, gradients, or glassmorphism; introduce a second accent or neon; center everything symmetrically; mix serif/sans roles; cram body into a narrow card.

## Responsive Behavior
The 12-column grid collapses to a single column below 720px while preserving the hairline-rule and kicker hierarchy. Display type scales fluidly via `clamp()`. Large asymmetric photos stack above their headlines on narrow viewports.

## Agent Prompt Guide
> Build this in the 'Editorial Confidence' style: a wide warm-white canvas with a 12-column asymmetric grid (text ~7 cols, large photos spanning 8 cols right-aligned). Oversized Fraunces display-serif headlines over Inter body at 62-70ch, uppercase tracked kickers opening each section. One single deep-forest accent used as solid full-bleed panels, underlined links, and 1px-bordered buttons — never a second accent, no gradients. Zero border-radius, 1px warm hairline rules instead of shadows, generous clamp()-based vertical rhythm. Calm, confident, magazine-like.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-editorial-confidence` (an authored design spec, not extracted from a live URL), so all tokens are `manual` confidence. The deep-forest accent traces to the pack (`#1f3a2e`); background, ink, muted, and border are pack-specified; neighboring neutrals (card/secondary/muted step) are derived from the pack's paper palette, and `destructive` is a standalone system red the pack does not define. Fonts are the open web fonts named by the pack (Fraunces, Inter via Google Fonts). Canonical mode is light; dark is a faithfully re-authored deep-forest world.