# Editorial Swiss

국제주의 타이포그래피 그리드 위에 잡지 편집 감성을 얹은 흑백 중심 스타일 — 여백이 곧 장식이다.

- taxonomy: editorial-minimalism · swiss-minimal, editorial-magazine, grid-driven, monochrome, typographic · complexity=medium
- page types: landing, portfolio, editorial, docs
- best for: 텍스트가 주인공인 콘텐츠 사이트, 포트폴리오, 브랜드 매니페스토 페이지
- avoid for: 데이터 밀도가 높은 대시보드, 장난스러운 소비자 앱, 일러스트 중심 랜딩
- provenance: authored (Swiss International Typographic Style (편집 큐레이션)) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

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


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Editorial Swiss — theme.css (generated, do not edit) */
:root {
  --radius: 0px;
  --radius-selector: 0px;
  --radius-field: 0px;
  --font-sans: 'Neue Haas Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Times New Roman', 'Noto Serif', serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  --font-display: 'Neue Haas Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --spacing: 8px;
  --shadow: 0px 1px 4px 0px color-mix(in oklab, oklch(0.18 0.005 90) 6%, transparent);
  --ks-display-weight: 500;
  --ks-display-tracking: -0.03em;
  --background: oklch(0.985 0.002 90);
  --foreground: oklch(0.18 0.005 90);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.005 90);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.005 90);
  --primary: oklch(0.20 0.01 90);
  --primary-foreground: oklch(0.985 0.002 90);
  --secondary: oklch(0.94 0.003 90);
  --secondary-foreground: oklch(0.25 0.005 90);
  --muted: oklch(0.955 0.003 90);
  --muted-foreground: oklch(0.45 0.008 90);
  --accent: oklch(0.55 0.22 27);
  --accent-foreground: oklch(0.985 0.002 90);
  --destructive: oklch(0.55 0.22 27);
  --destructive-foreground: oklch(0.985 0.002 90);
  --border: oklch(0.86 0.004 90);
  --input: oklch(0.86 0.004 90);
  --ring: oklch(0.20 0.01 90);
  --chart-1: oklch(0.20 0.01 90);
  --chart-2: oklch(0.55 0.22 27);
  --chart-3: oklch(0.60 0.008 90);
  --chart-4: oklch(0.78 0.005 90);
  --chart-5: oklch(0.40 0.006 90);
}

.dark {
  --background: oklch(0.16 0.005 90);
  --foreground: oklch(0.94 0.003 90);
  --card: oklch(0.20 0.006 90);
  --card-foreground: oklch(0.94 0.003 90);
  --popover: oklch(0.20 0.006 90);
  --popover-foreground: oklch(0.94 0.003 90);
  --primary: oklch(0.94 0.003 90);
  --primary-foreground: oklch(0.16 0.005 90);
  --secondary: oklch(0.24 0.006 90);
  --secondary-foreground: oklch(0.88 0.004 90);
  --muted: oklch(0.24 0.006 90);
  --muted-foreground: oklch(0.65 0.008 90);
  --accent: oklch(0.62 0.20 27);
  --accent-foreground: oklch(0.16 0.005 90);
  --destructive: oklch(0.62 0.20 27);
  --destructive-foreground: oklch(0.16 0.005 90);
  --border: oklch(0.30 0.006 90);
  --input: oklch(0.30 0.006 90);
  --ring: oklch(0.94 0.003 90);
  --chart-1: oklch(0.94 0.003 90);
  --chart-2: oklch(0.62 0.20 27);
  --chart-3: oklch(0.60 0.008 90);
  --chart-4: oklch(0.45 0.006 90);
  --chart-5: oklch(0.78 0.005 90);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Editorial Swiss". Fragment — assumes the style's CSS variables
     (--background, --foreground, --accent, --border, --font-sans, --radius, ...) are in scope.
     Tokens only; no literal colors. -->
<section style="background:var(--background); color:var(--foreground); font-family:var(--font-sans); padding:clamp(2rem,6vw,5rem); max-width:1280px; margin:0 auto;">
  <p style="font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-foreground); margin:0 0 1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border);">
    Issue 01 — Editorial
  </p>

  <div style="display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:end;">
    <h1 style="grid-column:1 / span 9; margin:0; font-weight:500; font-size:clamp(3rem,8vw,6.5rem); line-height:.95; letter-spacing:-.03em;">
      Whitespace<br>is the<br>ornament.
    </h1>
    <p style="grid-column:10 / span 3; margin:0; font-size:1rem; line-height:1.55; color:var(--muted-foreground);">
      A monochrome grid where hierarchy is built from size, weight, and space — never decoration.
    </p>
  </div>

  <div style="display:flex; gap:1rem; margin-top:clamp(2.5rem,6vw,4rem);">
    <a href="#" style="border-radius:var(--radius); border:1px solid var(--foreground); background:var(--foreground); color:var(--background); padding:12px 28px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;">
      Read the issue
    </a>
    <a href="#" style="border-radius:var(--radius); border:1px solid var(--foreground); background:transparent; color:var(--foreground); padding:12px 28px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;">
      Archive
    </a>
  </div>

  <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:clamp(3rem,7vw,5rem);">
    <article style="border-top:1px solid var(--border); padding-top:1rem;">
      <p style="font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 .75rem;">Live</p>
      <h3 style="margin:0 0 .5rem; font-weight:600; font-size:1.125rem;">The grid as argument</h3>
      <p style="margin:0; font-size:1rem; line-height:1.55; color:var(--muted-foreground);">Structure carries the meaning; the red is used exactly once, here.</p>
    </article>
    <article style="border-top:1px solid var(--border); padding-top:1rem;">
      <p style="font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-foreground); margin:0 0 .75rem;">Essay</p>
      <h3 style="margin:0 0 .5rem; font-weight:600; font-size:1.125rem;">Three weights, no more</h3>
      <p style="margin:0; font-size:1rem; line-height:1.55; color:var(--muted-foreground);">400 for reading, 500 for display, 600 for labels.</p>
    </article>
    <article style="border-top:1px solid var(--border); padding-top:1rem;">
      <p style="font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-foreground); margin:0 0 .75rem;">Note</p>
      <h3 style="margin:0 0 .5rem; font-weight:600; font-size:1.125rem;">Hairlines over shadows</h3>
      <p style="margin:0; font-size:1rem; line-height:1.55; color:var(--muted-foreground);">Every division is a 1px rule.</p>
    </article>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/editorial-swiss.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 `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.