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

51 lines
2.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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`](./pentagram.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`nyt-the-daily`](./nyt-the-daily.md)
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)