00 / ARCHETYPE #10 — ZÜRICH 1957

Typographic Precision.
Architectural Tension.

Swiss / International Typographic Style achieves visceral authority through uncompromising typographic scale contrast, disciplined 12-column scaffolding, structural hairline dividing rules, and intentional active negative space. Zero drop shadows. Zero rounded cards. Zero AI-slop.

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style.”
— Josef Müller-Brockmann

$ npx skills add kennedys0/taste-engine --skill taste-style-swiss-editorial

[ 01_TEST STUDIO LAB → ] [ 02_INSTALLATION MANUAL ↓ ]

01.1

48px–72px

Headline Contrast

01.2

12-COL

Asymmetric Grid

01.3

1px HAIRLINE

Structural Rules

01.4

0 EMOJI

Pure Lucide SVGs

[ 01 / LIVE INTERACTIVE POW ]

Swiss / Editorial Studio Lab

Interact with dynamic typographic scale ratios, calibrate asymmetric column rhythm, select signature Zurich Red vs Klein Blue signal colorways, and inspect structured editorial indices.

01.1 // Typographic Scale Synthesizer

DISPLAY CALIBRATOR

Display Headline Scale 56px (3.5rem)

Letter-Spacing Tracking -0.035em

SECTION 01.1 // DIE NEUE GRAPHIK INDEX: ZÜRICH 1957

FORM FOLLOWS RHYTHM.

“A design is finished not when there is nothing more to add, but when there is nothing left to take away. In Swiss typography, scale and structure communicate meaning.”

--taste-swiss-display-size: 56px;
--taste-swiss-tracking: -0.035em;

01.2 // Signal Accent Calibrator

ZÜRICH RED

The Swiss design canon limits color to a functional signal. Exactly one high-contrast accent highlights critical telemetry or interactive paths, preserving the integrity of the monochrome typographic plane.

01.3 // 12-Column Publication Index & Manifest

INDEXED SCAFFOLDING

Index	Publication Title / Reference	Classification	Grid Alignment	Status
01.01	Grid Systems in Graphic Design (Josef Müller-Brockmann)	Monograph	12-Col Modular	AUTHORITATIVE
01.02	The Bauhaus & Ulm School Pedagogical Lineage	Essay	Asymmetric 8:4	VERIFIED
01.03	Extreme Typographic Scale & Mathematical Ratio	Specification	Tight Tracking	WCAG AAA
01.04	Structural Hairline Dividing Rules & Shelving	Specification	1px Boundary	ZERO RADIUS

01.4 // Typographic Contrast & Form Input Matrix

AAA CERTIFIED

Interface Surface	Typography Foreground	Contrast Ratio	WCAG Level	Coupled Safety Rule
Gallery White Paper (`#FFFFFF`)	Deep Obsidian Ink (`#111111`)	18.5 : 1	PASS AAA	Authoritative contrast; sharp high-contrast letterforms
Pitch Obsidian Canvas (`#0D0D0D`)	Bone White Display (`#F5F5F5`)	17.8 : 1	PASS AAA	Polarity strictly flips; black text on dark background strictly banned
Zurich Signal Red (`#E3000F`)	Pure White Typography (`#FFFFFF`)	4.9 : 1	PASS AA	High-visibility focal signal for active states and primary CTAs
International Klein Blue (`#002FA7`)	Pure White Typography (`#FFFFFF`)	8.2 : 1	PASS AAA	Exceeds AAA requirements for medium and bold display elements

FORM CONTROL DEMO // ZERO-RADIUS SEARCH

[ 02 / PACKAGE DEPLOYMENT ]

Install Swiss / Editorial Archetype

Integrate Taste Engine's Swiss / Editorial pack into your AI coding assistant workspace or directly into Next.js, Vite, or vanilla web stacks.

Deploy as Standalone AI Coding Skill

Equip your agent with the dedicated Swiss / Editorial archetype. Works with Antigravity, Claude Code, and OpenAI Codex.

bash — universal agent skills cli

# 1. Install standalone Swiss / Editorial skill into your current agent workspace
npx skills add kennedys0/taste-engine --skill taste-style-swiss-editorial

# 2. Or install the complete Taste Engine suite (all 10 styles + routing + anti-slop)
npx skills add kennedys0/taste-engine

Node Package Manager Installation

Install via npm or pnpm to bundle the style tokens and presets directly into your JavaScript build pipeline.

bash — package manager

# Install via npm
npm install @taste-engine/style-swiss-editorial

# Or install via pnpm
pnpm add @taste-engine/style-swiss-editorial

Load via Global Stylesheet CDN

Embed authentic Swiss typographic hierarchy, 12-column rules, and zero-radius geometry without build steps.

html — cdn link

Manual CSS Variable Import

Copy the raw Swiss / Editorial token definitions directly into your global stylesheet.

css — token definitions

:root {
  --taste-swiss-bg: #FFFFFF;
  --taste-swiss-ink: #111111;
  --taste-swiss-accent: #E3000F;
  --taste-swiss-muted: #6B7280;
  --taste-swiss-rule: 1px solid #111111;
  --taste-swiss-radius: 0px;
  --taste-swiss-font-heading: 'Space Grotesk', -apple-system, sans-serif;
  --taste-swiss-font-body: 'Inter', -apple-system, sans-serif;
}

[ 03 / SPECIFICATION MATRIX ]

Swiss Editorial Design Tokens

Comprehensive token mappings engineered for grid-driven hierarchy, structural hairline dividing rules, and razor-sharp geometry.

Token Name	Light Mode Default	Dark Mode Default	Architectural Role
--taste-swiss-bg	#FFFFFF	#0D0D0D	Paper white / obsidian canvas foundation
--taste-swiss-ink	#111111	#F5F5F5	Primary typographic ink (sharp authoritative grotesk)
--taste-swiss-accent	#E3000F	#EF4444	Singular signal accent (Zurich rail clock red)
--taste-swiss-muted	#6B7280	#9CA3AF	Secondary metadata, numbered indexes, captions
--taste-swiss-rule	1px solid #111111	1px solid rgba(255,255,255,0.20)	Structural horizontal and vertical hairline dividers
--taste-swiss-radius	0px	0px	Strictly zero border-radius; razor-sharp corners
--taste-swiss-font-heading	'Space Grotesk', sans-serif	'Space Grotesk', sans-serif	High-contrast display headline typography
--taste-swiss-font-body	'Inter', system-ui	'Inter', system-ui	Disciplined editorial body text
--taste-swiss-shadow	none	none	Zero drop shadows; depth is communicated via scale

[ 04 / DESIGN RATIONALE ]

Frequently Asked Questions

Clarifications on physical affordance, typographic scale contrast, zero drop shadows, and dark mode coupling.

Why does Swiss Editorial strictly forbid rounded corners and drop shadows?

International Typographic Style (born in Zürich and Basel in the 1950s) treats the surface as ink on paper. Rounded corners and decorative shadows introduce arbitrary softness that conflicts with mathematical grid discipline. Spatial depth is communicated purely through typographic scale, weight, and 1px structural dividing rules.

How does dramatic typographic scale contrast work without mobile bloat?

We employ strict fluid typography via CSS `clamp()`: display headlines scale smoothly from 56px–72px on large desktop down to 32px–40px on mobile viewports. Tight letter-spacing tracking (`-0.035em`) prevents word-wrapping blowout, maintaining authoritative tension down to 320px screens.

How does the Theme Coupling rule ensure instant readability?

In Swiss Editorial, dark and light modes represent an authoritative polarity inversion. In light mode, paper is pure white (`#FFFFFF`) and ink is deep black (`#111111`) delivering an 18.5:1 contrast ratio. In dark mode, canvas flips to obsidian (`#0D0D0D`) and typography flips to bone white (`#F5F5F5`). Primary buttons invert cleanly (black block with white text flips to white block with black text).

Can I install just the Swiss Editorial skill standalone in my agent?

Yes! Run `npx skills add kennedys0/taste-engine --skill taste-style-swiss-editorial` to install only this standalone package without pulling other styles.

Typographic Precision. Architectural Tension.