Skill Wiki
Swiss Modernist
Müller-Brockmann on the web: mathematical baseline grids, neo-grotesque display set tight, ruled horizontal lines, asymmetric typographic compositions, one accent color in a sea of neutral.…
$ prime install @impeccable/persona-swiss-modernistProjection
Always in _index.xml · the agent never has to ask for this.
SwissModernist [persona] v1.0.0
Müller-Brockmann on the web: mathematical baseline grids, neo-grotesque display set tight, ruled horizontal lines, asymmetric typographic compositions, one accent color in a sea of neutral. Form follows function follows grid.
Loaded when retrieval picks the atom as adjacent / supporting.
SwissModernist [persona] v1.0.0
Müller-Brockmann on the web: mathematical baseline grids, neo-grotesque display set tight, ruled horizontal lines, asymmetric typographic compositions, one accent color in a sea of neutral. Form follows function follows grid.
School
swiss-modernist
Implies
- Font:
- Display: neo-grotesque, large and tight-tracked — e.g. Helvetica Now, Neue Haas Grotesk, Akzidenz-Grotesk, ABC Diatype, GT America, Söhne
- Body: same family as display, smaller weight contrast — e.g. Helvetica Now Text, Neue Haas Grotesk Text, ABC Diatype, Inter Display
- Color:
- Temperature: cool-neutral
- Palette: monochrome plus one chromatic accent — typically pure red (#e30613 Helvetica-poster red) or international-blue, no gradients
- Background: #ffffff with hairline #e5e5e5 rules, or inverted #0a0a0a with #ffffff text
- Density: measured — vertical rhythm 1.5 locked to 8px baseline grid, generous outer margins, tight inner letter spacing (-0.02em on display)
- Layout: 12-column or 16-column grid, asymmetric placement, hairline rule-lines (1px solid) demarcating sections, ample top/bottom space
- Imagery: high-contrast B&W photography, geometric shapes (circle/square/rectangle as content), no decorative illustration
- Motion: minimal — instant or 120ms linear, no spring physics, no parallax
Example Brands
- Linear (marketing site)
- Vitra design museum
- Lufthansa (historical identity)
- MoMA design store
- Braun product pages
- Massimo Vignelli's NYC subway map digital descendants
- Apple HIG documentation
Composition
- Must Include:
- @community/principle-typography-hierarchy
- @community/rule-typography-letter-spacing
- @community/rule-single-accent-color
- Must Avoid:
- @impeccable/persona-brutalist
- @impeccable/persona-warm-institutional
- Typography Required:
- Display: neo-grotesque (Helvetica Now | Neue Haas Grotesk | Akzidenz-Grotesk | Söhne)
- Body: same family as display (single-family discipline)
- Tracking: -0.02em on display
- Color Required:
- Background: #ffffff with #e5e5e5 hairline rules
- Palette: monochrome + ONE accent (no gradients)
- Accent: #e30613 Helvetica-poster red or international-blue
- Motion Prescriptions:
- @community/principle-typography-hierarchy
Loaded when retrieval picks the atom as a focal / direct hit.
SwissModernist [persona] v1.0.0
Müller-Brockmann on the web: mathematical baseline grids, neo-grotesque display set tight, ruled horizontal lines, asymmetric typographic compositions, one accent color in a sea of neutral. Form follows function follows grid.
School
swiss-modernist
Implies
- Font:
- Display: neo-grotesque, large and tight-tracked — e.g. Helvetica Now, Neue Haas Grotesk, Akzidenz-Grotesk, ABC Diatype, GT America, Söhne
- Body: same family as display, smaller weight contrast — e.g. Helvetica Now Text, Neue Haas Grotesk Text, ABC Diatype, Inter Display
- Color:
- Temperature: cool-neutral
- Palette: monochrome plus one chromatic accent — typically pure red (#e30613 Helvetica-poster red) or international-blue, no gradients
- Background: #ffffff with hairline #e5e5e5 rules, or inverted #0a0a0a with #ffffff text
- Density: measured — vertical rhythm 1.5 locked to 8px baseline grid, generous outer margins, tight inner letter spacing (-0.02em on display)
- Layout: 12-column or 16-column grid, asymmetric placement, hairline rule-lines (1px solid) demarcating sections, ample top/bottom space
- Imagery: high-contrast B&W photography, geometric shapes (circle/square/rectangle as content), no decorative illustration
- Motion: minimal — instant or 120ms linear, no spring physics, no parallax
Example Brands
- Linear (marketing site)
- Vitra design museum
- Lufthansa (historical identity)
- MoMA design store
- Braun product pages
- Massimo Vignelli's NYC subway map digital descendants
- Apple HIG documentation
Composition
- Must Include:
- @community/principle-typography-hierarchy
- @community/rule-typography-letter-spacing
- @community/rule-single-accent-color
- Must Avoid:
- @impeccable/persona-brutalist
- @impeccable/persona-warm-institutional
- Typography Required:
- Display: neo-grotesque (Helvetica Now | Neue Haas Grotesk | Akzidenz-Grotesk | Söhne)
- Body: same family as display (single-family discipline)
- Tracking: -0.02em on display
- Color Required:
- Background: #ffffff with #e5e5e5 hairline rules
- Palette: monochrome + ONE accent (no gradients)
- Accent: #e30613 Helvetica-poster red or international-blue
- Motion Prescriptions:
- @community/principle-typography-hierarchy
Relations
contradicts: [@impeccable/persona-brutalist, @impeccable/persona-warm-institutional]
Compatible
- minimal
- monochrome
- structured
- vercel-clean
- refined
Conflicts
- brutalist
- warm-institutional
- magazine-editorial
- notion-warm
Contradicts
- @impeccable/persona-brutalist
- @impeccable/persona-warm-institutional
Source
prime-system/examples/frontend-design/primes/compiled/@impeccable/persona-swiss-modernist/atom.yaml