# Editorial Swiss

## Overview
International Typographic Style meets contemporary magazine editorial. Near-black ink on warm off-white, a strict 12-column grid, and one restrained red accent. Decoration is banned; hierarchy comes only from type size, weight, and whitespace. If a section feels crowded, the fix is more space — not more color.

## Colors & Roles
Monochrome foundation: `background` off-white, `foreground` near-black (both slightly warm, hue 90). Surfaces separate by hairline `border` or a faint tonal step (`card` vs `background`), never by shadow. A single chromatic `accent` (red, oklch ~0.55/0.22/27) is a punctuation mark — use it at most twice per page (a key CTA, a live indicator). Body links are underlined, never colored.

## Typography Rules
One sans-serif family (Neue Haas Grotesk → Inter fallback), three weights only: 400 body, 500 display/headings, 600 small headings. Display type is oversized and tracking-tight (`clamp(3rem, 8vw, 6.5rem)`, letter-spacing −0.03em, line-height 0.95). Captions are uppercase with wide tracking (0.08em) and act as section labels. Modular scale ratio ≈ 1.414.

## Layout Principles
Max content width 1280px on a 12-column / 24px-gutter grid. Compose asymmetrically — text set in ~5 columns with deliberate whitespace offset. Vertical rhythm is large: section gaps `clamp(6rem, 12vw, 10.5rem)`. Aim for 40%+ of the viewport as whitespace.

## Depth & Elevation
Effectively flat. No gradients, glass, or noise. Shadows are near-absent (a 1px/6%-opacity hairline shadow only on dropdowns/modals). Division is done with 1px hairline rules.

## Shapes
Zero border-radius everywhere — buttons, cards, inputs, images. Corners are sharp by rule.

## Component Stylings
- **Button**: radius 0, 1px solid `foreground` border, transparent fill, uppercase caption type, padding 12px 28px. Hover inverts fill/text over 150ms. Focus = 2px offset outline (`ring`). Primary variant fills `primary` — one per page. Disabled = opacity 0.4.
- **Card**: no shadow; hairline border or `card` tonal step only. Padding 40px.
- **Input**: underline-only or 1px full border, radius 0; focus border goes to `foreground`.
- **Nav**: not sticky; hairline bottom rule, logo left, uppercase caption links right. Prefer fully-exposed links over a hamburger.

## Motion
Restrained. Opacity + translateY(8px) fade-ins only, 150–300ms, standard easing. No bounce, spring, or parallax.

## Do's and Don'ts
**Do:** build hierarchy from size/weight/space; open each section with an uppercase label + hairline rule; keep the accent to 1–2 uses.
**Don't:** use border-radius > 0; use gradients, glassmorphism, or colorful icons; divide with shadows; color body links with the accent.

## Responsive Behavior
The 12-column grid collapses to a single column on mobile; display type scales via `clamp()`. Nav links wrap rather than collapsing into a hamburger where space allows.

## Agent Prompt Guide
> Build this in the 'Editorial Swiss' style: strict 12-column grid, near-black on off-white, one red accent used at most twice, zero border-radius, hairline 1px rules instead of shadows, oversized tracking-tight display type with uppercase tracked caption labels, generous clamp()-based section spacing.

## Known Gaps / Confidence
Authored seed style (not extracted from a live URL), so all tokens are `manual` confidence. Font is the commercial Neue Haas Grotesk; the Google-Fonts fallback (Inter) is the practical default for reproduction.