# Swiss Editorial Bold 정밀 12열 그리드 위에 거대 압축 디스플레이 활자를 타이포그래픽 일러스트로 쓰는 흑백+스팟 1색 에디토리얼 덱 스타일 — 질서 위의 의도된 혼돈. - taxonomy: swiss-international · swiss-editorial, giant-type, condensed-display, spot-color, strict-grid, typographic-illustration, monochrome-plus-one · complexity=high - page types: presentation - best for: 편집형·매거진형 발표 덱(에디토리얼 스토리), 브랜드 매니페스토·컬처 덱, 타이포그래피가 주인공인 임팩트형 발표 - avoid for: 보수적 경영진 보고·재무 실사 덱, 데이터 밀도가 극단적으로 높은 표 중심 리포트, 부드러운 감성·둥근 소비자 제품 키노트 - provenance: authored (design-diversity 팩 'ppt-swiss-editorial-bold' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # Swiss Editorial Bold ## Overview Swiss International Typographic Style meets Bloomberg Businessweek editorial — the rigor of a precise grid, blown open by giant type. A 16:9 deck where a 12-column modular grid snaps every content block into place while oversized condensed display type (96–140pt) is stretched and **cropped at the slide edge**, used as typographic illustration in its own right. Warm white and ink black invert slide to slide; a single spot color — vermilion or electric blue, never both on one slide — punctuates the giant type or a solid color block. "Deliberate chaos on top of order" is the whole identity: the grid is strict so the type can be loud. ## Colors & Roles Canonical mode is **light**: `background` is warm white (#F2F0EB), `foreground` ink black (#111111), both faintly warm (hue ≈88). Slides may invert to an ink-black canvas — the `dark` map is that native inversion, not a bolted-on theme. The chromatic voice is two spot colors mapped to `primary` (vermilion #FF4A1C → oklch 0.666 0.224 34.3) and `accent` (electric blue #0047FF → oklch 0.511 0.274 263.5), so a generator can pick one per slide — but **only one spot color appears on any given slide**, on giant type or a rectangular block. `border`/`input` map to ink `foreground`, faithfully honoring this style's signature bold 1–3pt solid rule lines (#111111, or #F2F0EB on inverted slides) — these are *not* the light hairlines of a consulting deck. `secondary`/`muted` are warm-gray tints; `destructive` reuses vermilion (the palette holds no danger red). `chart-1` is vermilion (the one emphasis bar), `chart-5` is blue (alternate spot), and `chart-2..4` are an ink→warm-gray lightness ramp — one spot emphasis per chart, everything else encoded by lightness. ## Typography Rules One heavy condensed display family (Archivo Black / Archivo Expanded → Pretendard ExtraBold fallback) plus Inter for body/labels (Korean: Pretendard, web fallback Noto Sans KR). Deck steps in pt on a 13.33in × 7.5in canvas: giant 130pt / 900 / −0.03em (typographic illustration, cropped at the edge); display 88pt / 900 (spot keyword or KPI hero); heading 44pt / 900 / −0.02em (top-left, columns 1–6); body Inter 24pt / regular / 1.35, max 6 lines, left-aligned; caption 14pt Inter medium, uppercase, +0.08em tracking (section labels and direct data labels). Numbers use tabular figures. Type is never timid — the giant crop is the point. ## Layout Principles 16:9 canvas, strict 12-column modular grid, margins 0.7in left/right, 0.6in top/bottom. Every content block snaps exactly to grid cells; only giant type escapes and crops off-frame. Composition is asymmetric: push the text block hard to one side (headline + body in columns 1–6) and set a giant spot keyword or solid color block opposite (columns 7–12). Content-slide titles are pinned top-left, columns 1–6. ## Depth & Elevation Completely flat. No shadows, gradients, glass, noise, or blur — ever. Depth comes only from color contrast and the overlap of rectangular blocks. Division is bold ink rule lines and whitespace, not elevation. ## Shapes Zero border-radius everywhere — every corner is a right angle. Only rectangular color blocks and rule lines; curves and rounded shapes are banned. Rules are 1pt/3pt solid ink. Images (where used) are black-and-white or duotone (black + one spot), square full-crop, snapped to grid cells. Arrowheads are filled triangles (0.18in). ## Component Stylings - **Cover**: warm-white (or inverted ink) canvas, a 130pt condensed title spanning the frame with the right-hand letters cropped off-edge; a spot-color rectangular block bottom-left with a 14pt uppercase caption. - **Content slide**: 44pt headline + 24pt body (≤6 lines) in columns 1–6; a giant 88pt spot keyword or solid block in columns 7–12. Left-aligned, asymmetric. - **Charts**: SVG data-ink minimalism — angular bars (3:2 width:gap), radius 0, snapped to the 12-col grid, baseline always 0. No gridlines, no legend, no y-axis; only a 3pt x baseline rule. Bars all achromatic (ink / inverted warm-white); exactly one emphasis bar in the slide's spot color. Direct 14pt uppercase tabular value labels above bars, item names 14pt uppercase below. - **Diagrams**: one language — 0-radius rectangular nodes, 3pt solid rule connectors with filled triangle arrowheads, achromatic square number badges (Archivo Black 20pt inverted numeral). Process (4–5 steps), timeline, 2–3 column comparison (3pt vertical rule dividers, no box), 2×2 matrix (3pt cross rule only), hierarchy/funnel all derive from it. One spot-color emphasis element; the rest achromatic. SVG only — no div-block bars. - **KPI cards**: borderless, grid-cell-snapped — 88pt Archivo Black spot numeral, a 3pt rule beneath, then a 14pt uppercase label. Deltas are filled triangles (▲▼) plus a value, encoded by glyph and weight, never a second color; 3 cards split 4+4+4 with 3pt vertical rules. ## Motion Minimal and decisive. PowerPoint transition is Push (left→right), 0.25s — no fade, no morph. Giant type may Wipe in. The static authority of the grid is the point; animation stays out of the way. ## Do's and Don'ts **Do:** use giant cropped condensed type as illustration; snap everything to the strict 12-col grid; keep one spot color per slide; divide with bold 1–3pt ink rules; render charts/diagrams as precise SVG with one spot emphasis and direct labels. **Don't:** use gradients, shadows, curves, or rounded corners; put two spot colors on one slide; set type timidly small; use emoji, icons, clipart, or centered body text; use 3D bars, legend boxes, gridlines, truncated y-axes, rainbow palettes, rounded bars, or div-block charts. ## Slide Anatomy - **Cover slide**: giant cropped condensed title across the frame, spot color block + uppercase caption bottom-left; warm-white or inverted ink canvas. No imagery beyond type and blocks. - **Content slide**: the workhorse — top-left 44pt headline + 24pt body in columns 1–6, a giant spot keyword or solid block in columns 7–12; asymmetric, left-aligned. - **Exhibit/chart slide**: one SVG chart fills the body zone, achromatic bars with a single spot emphasis, direct value labels, baseline 0; the headline states what the chart shows. - **Diagram slide**: process flow, 2×2 matrix, timeline, or funnel in the shared rule-line + rectangle + number-badge language, one spot emphasis. - **Statement / divider slide**: a single 88–130pt spot keyword cropped at the edge, one caption, otherwise empty canvas — the giant-type illustration standing alone. ## Agent Prompt Guide > Build this deck in the 'Swiss Editorial Bold' style: 16:9 slides on warm-white or inverted ink-black, a strict 12-column grid snapping every block, and oversized condensed heavy display type (Archivo Black, 96–140pt, −0.03em) cropped at the slide edge as typographic illustration. Body Inter 24pt, ≤6 lines, left-aligned. Exactly one spot color per slide — vermilion or electric blue — on giant type or a rectangular block; everything else ink/warm-white monochrome. Division is bold 1–3pt solid ink rules; zero radius, zero shadows, zero gradients, no curves. Charts/diagrams are precise SVG: angular bars snapped to the grid, baseline 0, no gridlines/legend/y-axis, one spot emphasis, direct uppercase tabular labels. Transitions Push 0.25s, no fade or morph. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `ppt-swiss-editorial-bold` — an authored spec, not an extraction from a live deck, so all confidence fields are `manual`. A **ppt-track** entry: the shadcn token mapping is a web-rendering convenience (pt-based type steps, 16:9 frames rendered in HTML), and both spot colors are exposed via `primary`/`accent` even though only one may appear per slide. The `dark` map treats the pack's allowed ink-black slide inversion as native. Display fonts are the commercial-adjacent Archivo Black / Archivo Expanded; the Google-Fonts fallback (Archivo Black) is the practical default. Trademark care: the style generalizes editorial-magazine conventions (Businessweek-adjacent) and must not reproduce any real publication's masthead, logo, or actual pages. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Swiss Editorial Bold — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', Arial, sans-serif; --font-display: 'Archivo Black', 'Archivo Expanded', 'Pretendard ExtraBold', sans-serif; --spacing: 8px; --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent); --ks-display-weight: 900; --ks-display-tracking: -0.03em; --background: oklch(0.955 0.007 88.6); --foreground: oklch(0.178 0 0); --card: oklch(0.955 0.007 88.6); --card-foreground: oklch(0.178 0 0); --popover: oklch(0.955 0.007 88.6); --popover-foreground: oklch(0.178 0 0); --primary: oklch(0.666 0.224 34.3); --primary-foreground: oklch(0.955 0.007 88.6); --secondary: oklch(0.916 0.010 87.5); --secondary-foreground: oklch(0.341 0.009 88.7); --muted: oklch(0.916 0.010 87.5); --muted-foreground: oklch(0.621 0.015 88.7); --accent: oklch(0.511 0.274 263.5); --accent-foreground: oklch(0.955 0.007 88.6); --destructive: oklch(0.666 0.224 34.3); --destructive-foreground: oklch(0.955 0.007 88.6); --border: oklch(0.178 0 0); --input: oklch(0.178 0 0); --ring: oklch(0.666 0.224 34.3); --chart-1: oklch(0.666 0.224 34.3); --chart-2: oklch(0.178 0 0); --chart-3: oklch(0.457 0.012 87.5); --chart-4: oklch(0.621 0.015 88.7); --chart-5: oklch(0.511 0.274 263.5); } .dark { --background: oklch(0.178 0 0); --foreground: oklch(0.955 0.007 88.6); --card: oklch(0.218 0 0); --card-foreground: oklch(0.955 0.007 88.6); --popover: oklch(0.218 0 0); --popover-foreground: oklch(0.955 0.007 88.6); --primary: oklch(0.700 0.210 34.3); --primary-foreground: oklch(0.178 0 0); --secondary: oklch(0.278 0.008 84.6); --secondary-foreground: oklch(0.871 0.013 86.8); --muted: oklch(0.278 0.008 84.6); --muted-foreground: oklch(0.621 0.015 88.7); --accent: oklch(0.620 0.240 263.5); --accent-foreground: oklch(0.955 0.007 88.6); --destructive: oklch(0.700 0.210 34.3); --destructive-foreground: oklch(0.178 0 0); --border: oklch(0.955 0.007 88.6); --input: oklch(0.955 0.007 88.6); --ring: oklch(0.700 0.210 34.3); --chart-1: oklch(0.700 0.210 34.3); --chart-2: oklch(0.955 0.007 88.6); --chart-3: oklch(0.621 0.015 88.7); --chart-4: oklch(0.457 0.012 87.5); --chart-5: oklch(0.620 0.240 263.5); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Order/Chaos

Issue 01 — Editorial Deck
01 / 24

Section — The Grid

The grid is strict so the type can be loud.

  • Every block snaps to the 12 columns
  • Only giant type breaks the frame
  • One spot color per slide, never two
Bold
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-swiss-editorial.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 `