# Editorial Confidence 넓은 미색 캔버스에 비대칭 다단 그리드, 큰 디스플레이 세리프 헤드라인과 단 하나의 딥 포레스트 면강조색으로 잡지 같은 차분한 권위를 내는 편집형 스타일. - taxonomy: editorial-minimalism · editorial-magazine, display-serif, asymmetric-grid, single-accent, print-like · complexity=medium - page types: landing, marketing, editorial, portfolio - best for: 프리미엄 브랜드 마케팅 사이트, 매니페스토·피처 스토리 페이지, 텍스트와 큰 사진이 주인공인 편집형 랜딩 - avoid for: 데이터 밀도가 높은 대시보드, 장난스러운 소비자 앱, 네온·그라디언트 중심의 테크 랜딩 - provenance: authored (design-diversity 팩 'web-editorial-confidence' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Editorial Confidence — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace; --font-display: 'Fraunces', Georgia, serif; --spacing: 8px; --shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.323 0.040 164.0) 0%, transparent); --ks-display-weight: 600; --ks-display-tracking: -0.02em; --background: oklch(0.988 0.004 91.4); --foreground: oklch(0.217 0.006 106.9); --card: oklch(0.995 0.003 91.4); --card-foreground: oklch(0.217 0.006 106.9); --popover: oklch(0.995 0.003 91.4); --popover-foreground: oklch(0.217 0.006 106.9); --primary: oklch(0.323 0.040 164.0); --primary-foreground: oklch(0.988 0.004 91.4); --secondary: oklch(0.961 0.008 91.5); --secondary-foreground: oklch(0.323 0.040 164.0); --muted: oklch(0.936 0.011 95.2); --muted-foreground: oklch(0.523 0.011 100.1); --accent: oklch(0.323 0.040 164.0); --accent-foreground: oklch(0.988 0.004 91.4); --destructive: oklch(0.550 0.200 27.0); --destructive-foreground: oklch(0.988 0.004 91.4); --border: oklch(0.885 0.013 91.5); --input: oklch(0.885 0.013 91.5); --ring: oklch(0.323 0.040 164.0); --chart-1: oklch(0.323 0.040 164.0); --chart-2: oklch(0.388 0.050 161.7); --chart-3: oklch(0.523 0.011 100.1); --chart-4: oklch(0.885 0.013 91.5); --chart-5: oklch(0.217 0.006 106.9); } .dark { --background: oklch(0.185 0.008 155.0); --foreground: oklch(0.950 0.004 91.0); --card: oklch(0.225 0.012 155.0); --card-foreground: oklch(0.950 0.004 91.0); --popover: oklch(0.225 0.012 155.0); --popover-foreground: oklch(0.950 0.004 91.0); --primary: oklch(0.520 0.070 162.0); --primary-foreground: oklch(0.980 0.004 91.0); --secondary: oklch(0.265 0.012 155.0); --secondary-foreground: oklch(0.900 0.004 91.0); --muted: oklch(0.265 0.012 155.0); --muted-foreground: oklch(0.680 0.010 100.0); --accent: oklch(0.520 0.070 162.0); --accent-foreground: oklch(0.980 0.004 91.0); --destructive: oklch(0.620 0.190 27.0); --destructive-foreground: oklch(0.185 0.008 155.0); --border: oklch(0.300 0.012 155.0); --input: oklch(0.300 0.012 155.0); --ring: oklch(0.520 0.070 162.0); --chart-1: oklch(0.520 0.070 162.0); --chart-2: oklch(0.620 0.075 160.0); --chart-3: oklch(0.680 0.010 100.0); --chart-4: oklch(0.300 0.012 155.0); --chart-5: oklch(0.950 0.004 91.0); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

On Craft

Confidence is a
layout decision.

Read the feature

A magazine spread that happens to be a website: a wide canvas, one deep accent used as a whole plane, and type that carries the argument. Every division is a hairline rule, never a shadow.

The whole plane is the emphasis. There is no second color to reach for.
Subscribe

Essay

Serif for weight

Fraunces sets the headline; Inter never crosses into display.

Note

Asymmetry as voice

Text at seven columns, whitespace holding the rest.

Method

Hairlines, not shadows

A single 1px rule opens every block.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/editorial-confidence.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 `