Skill: Swiss Design (International Typographic Style for the Web)

1. What this skill produces

A website that feels Swiss before any word is read: orderly, generous, left-aligned, restrained, confident. Quality through structure and typography, not through effects. The output is agency-grade and looks deliberately built — not generated. It should be impossible to mistake the result for "another modern AI-template landing page."

This skill is the descendant of Müller-Brockmann, Ruder, and Hofmann translated into 2026 web idioms used by award-winning Swiss and Swiss-influenced agencies (Mobiliar, seoagentur.de, Doppio, favorit.studio, eseagency.ch, Stink Studios).

Use this skill when the brief calls for: "Swiss style," "International Typographic Style," "editorial-clean," "minimalist-premium," "agency-grade," "Mobiliar-conservative-cousin," "Notion/Linear sensibility but more disciplined." Pair with a brand-specific style file when the project has its own palette and voice.

2. The Swiss canon — what we are translating to web

The International Typographic Style emerged in Basel and Zurich in the late 1940s. Its core principles, distilled from Müller-Brockmann's Grid Systems and Ruder's Typography, are:

Asymmetric balance on a strict grid. Symmetry is for ceremony; structure is for communication.
Sans-serif, Swiss neo-grotesque. Akzidenz-Grotesk, Helvetica, Univers — and their modern descendants.
Flush-left, ragged-right. Readability over decorative justification.
Generous, deliberate whitespace. Whitespace is active — it carries information about hierarchy and rest.
Objective photography over decoration. When images appear, they document; they do not embellish.
Color is functional. A single deliberate accent over neutral substrate.
Type carries the design. Decoration is forbidden; hierarchy comes from scale, weight, and spacing.

These are not aesthetic preferences. They are an information design discipline.

3. Absolute negative constraints (BANNED)

A design that contains any of the following has failed:

Banned typography

Inter, Roboto, Open Sans, Arial, system-ui, Lato, Poppins. The AI-default tells. Use proper Swiss neo-grotesque or modern descendants (see §5).
Decorative serif as body type. Editorial serif is permitted only for one display-scale moment per page (a hero, a pull quote).
Monospace as a "techy aesthetic" shortcut. Monospace is for code, metadata, numerals — never as primary headline type unless the brand explicitly demands it.
More than three weights across the entire site (typically Regular, Medium, Bold).
More than two type families (one neo-grotesque + at most one editorial serif for accent moments).

Banned color

Purple/blue gradients. The single most common AI-design fingerprint. Never appears in a Swiss design.
Three-stop gradients in any direction (the "wine→coral→wine" ribbon energy).
Multiple accent colors. One accent. Ever.
Saturation above 80% on supporting accents.
#000000 body type or #FFFFFF background as defaults — use ink (#111 or #1A1A1A) on warm/neutral paper (#F7F6F3, #FAFAF7, or pure #FFFFFF when the brand demands it).
Dark sections randomly inserted into a light page (the "let's add visual variety" anti-pattern). Commit to the substrate.

Banned layout

Centered hero blocks. Swiss design is left-aligned, ragged-right by canon.
Three equal cards in a row as a feature section. (Use a 2-column zig-zag, asymmetric grid, or single-column flow.)
Edge-to-edge sticky navbars with no breathing room.
100vh (use 100dvh to prevent iOS Safari viewport jump).
Forced equal-height cards via flexbox when content varies.
Symmetrical vertical padding on sections (bottom should usually be optically slightly larger than top).
Two-column "text + image" grids for every content section. Default is single-column flow with images embedded inline.
Width constraints on text elements (max-width on <p>, <h2>, etc.). Width belongs on the container; text fills it.

Banned components / decoration

Glassmorphism, neumorphism, claymorphism (anything *-morphism beyond restrained navbar blur).
Generic thin-stroke icon libraries (Lucide / Feather / Heroicons stock). Use Phosphor (Bold/Fill), Radix UI Icons, or hand-drawn SVG primitives standardized to one stroke width.
Drop shadows above 0.05 opacity. Heavy shadow-md / shadow-lg.
Rounded-full pill containers for cards or large blocks. Round shapes (pill, circle) are reserved for action items only — primary CTAs, button-arrow wrappers, interactive chips. Eyebrows, tags, badges, and other static labels stay flat (no frame, or square corners if filled). A pill-bordered eyebrow reads like a tiny button and competes with the actual CTA.
rounded-3xl on everything. Vary radius — softer on outer containers, tighter on inner elements.
Decorative icons-with-rounded-corners above every heading. (The templated AI-tell.)
Emojis. Anywhere. Including code, alt text, copy.

Banned 2026 AI-template fingerprints

shadcn/ui defaults verbatim — bg-zinc-950 dark cards with border-zinc-800, the "AI startup" aesthetic. Restyle if you must use shadcn primitives.
Tailwind UI hero patterns — centered hero with radial-gradient blur (the "Spotlight" template). Instantly readable as template.
Vercel deploy template aesthetic — Inter + linear gradient mesh + dark glass card.
Linear / Cal.com glass header — backdrop-filter: blur(16px); background: rgba(...,0.6) outside one restrained nav use.
Bento grid as default layout — 3×2 cards-of-varying-sizes is now an AI tell. Use only when content genuinely demands it.

Banned motion

Default linear or ease-in-out transitions. Slop tells.
window.addEventListener('scroll') for entry animations. Use CSS animation-timeline: view() (preferred) or IntersectionObserver (fallback). See §8 pattern #6.
Animations that run continuously without dampening (rotating logos, pulsing CTAs, blinking arrows).
Mounting all elements at once. Use staggered reveals.
Ignoring prefers-reduced-motion. Every animation must have a reduced-motion override (see §8).

Banned copy in design output

AI-marketing clichés: "Elevate," "Seamless," "Unleash," "Next-Gen," "Game-changer," "Delve," "Empower," "Revolutionize," "Transform your business."
Filler placeholders: "Lorem Ipsum," "John Doe," "Acme Corp."
Vague promises ("powerful tools," "great results"). Specific or silent.

4. Grid system (Müller-Brockmann web)

Container

Outer container: max-width 1200–1440px, centered with auto margins.
Side gutters: clamp(1rem, 5vw, 2.5rem).
Inner content (text-heavy): typically nested in a max-width: 720–860px reading column, left-aligned within the outer container (not centered).

Column grid

12-column grid is the Swiss default.
Use CSS Grid, not flexbox percentage math.
Gutters between columns: 16–32px depending on density.
Asymmetric occupation. Headline often takes columns 1–7; body takes 1–6; supporting visual takes 8–12. Never default to 50/50.

Vertical rhythm

Define a modular spacing scale as CSS variables:

--space-xs: 0.5rem;   /* 8px */
--space-sm: 1rem;     /* 16px */
--space-md: 1.5rem;   /* 24px */
--space-lg: 2.5rem;   /* 40px */
--space-xl: 4rem;     /* 64px */
--space-2xl: 6rem;    /* 96px */
--space-3xl: 8rem;    /* 128px */
--space-4xl: 12rem;   /* 192px */

Section spacing: --space-3xl to --space-4xl between major sections. Generous. The page should feel like a Swiss publication, not a feed.
Within a section: every gap (margin, padding, grid gap) comes from the scale. Never raw pixel values.
Optical bias: bottom padding of a section is usually slightly larger than top (e.g., `padding: var(--space-3xl) 0 var(--space-4

swiss-design