teamai-test/.teamai/skills/common/web-design-engineer/references/style-recipes/vignelli-swiss-helvetica.md

vignelli-swiss-helvetica — Vignelli / Swiss International

• School: Information Architecture
• Vibe: Strict grid, Helvetica throughout, "six typefaces are enough"
• Best for: Wayfinding / transit systems, institutional identity, deeply ordered information
• Touchstone: 1972 NYC Subway map (Vignelli), Knoll catalogues, The Vignelli Canon

Palette

• Black #000000 and white #FFFFFF
• Plus one of: red #E2231A / yellow #F5C518 / blue #0033A0 / orange #FF6F00 (only one — never two accents)
• Cool gray #8A8A8A for secondary content

Typography

• Display & body: Helvetica or Helvetica Now exclusively. Weights: 400 / 500 / 700, no italic.
• Hierarchy by size, not weight or color
• Common scale: 72 / 48 / 32 / 24 / 16 / 12, all on the same baseline grid

Spacing: 8px baseline grid, 12-column layout, generous baseline-to-baseline spacing equal to or greater than the type size.

Radius: 0, always.

Shadow: none.

Motion: none, or instant. Swiss design is static by nature; if anything moves, it moves like signage being rotated into place.

Signature moves

• A bold horizontal or vertical color bar carries the section header in white Helvetica
• The grid is visible when it helps — column gutters sometimes drawn as faint lines
• Information sets (data, schedules, lists) get tabular layouts with strict baseline alignment
• Body copy is left-aligned in a single readable measure (~60–70 characters); never centered
• A single oversized number (chapter / section) sits at the top-left corner of each block

Avoid

• Serifs entirely
• Color combinations other than ink + ground + one accent
• Italic, drop shadows, gradients, any softness
• "Friendly" copywriting tone — Swiss is matter-of-fact

AI prompt seed

Transit-signage style composition, large directional arrow set in black on flat field of single accent color, condensed Helvetica destination labels, no decoration, 16:9 flat vector aesthetic.

Don't use when

• The brand needs warmth — Helvetica + grid reads as institutional / cold
• The content is emotional / storytelling — Swiss strips emotion out
• Modernity / freshness is the goal — Swiss design now reads as classical / archival

---

Same school — Information Architecture: pentagram · bloomberg-terminal · tufte-dataink · nyt-the-daily
Browse all 25 recipes: INDEX.md