Swiss Poster Design System

A design system based on Swiss poster design from the 1950s through 1980s: grotesque type at extreme scales, layouts that break the grid, overlapping layers, diagonal energy, and cropped forms. Draws on Weingart, Troxler, Odermatt & Tissi, Hofmann, and Ruder.

Output contract for web/UI tasks

When the user asks for a page, component, landing page, or Tailwind/UI styling, return implementable HTML/Tailwind/CSS. Do not satisfy a web/UI task with a standalone SVG poster unless the user explicitly asks for an SVG, print asset, or static poster file.

Hard gates before final output:

• Start from an explicit grid grid-cols-12 structure, then let selected elements escape it.
• Use exactly one accent hue per project (default #C8102E). Opacity variants of that hue are allowed; extra accent hues, purple SaaS gradients, and multi-accent palettes are not.
• Make scale contrast extreme: pair viewport-scale text-[clamp(...)] display type with text-[11px] labels; target 10×+ size ratio and leading-[0.85], tighter custom leading, or leading-none at display scale.
• Prevent horizontal scroll. Any section with bleed, negative margins, absolute breakouts, wide vw elements, or cropped type needs overflow-hidden, overflow-x-hidden, or overflow-clip on the wrapper.
• Check the 320px boundary: default to col-span-12, fluid clamp() type, reduced offsets (md: and up for aggressive negative margins), no fixed-width elements that force sideways scroll, and 44px minimum touch targets.
• For dense poster HTML, annotate the reading contract: put data-critical="title", data-critical="body", data-critical="date", or data-critical="cta" on essential text, and keep decorative anchors aria-hidden="true"/pointer-events-none.
• For historically grounded, source-heavy, image-heavy, or diagrammatic posters, leave non-visible implementation evidence in markup: data-reference for the embodied historical move, data-source/data-beat for source-ledger items, and data-encoding/data-variable for real diagram mappings. These attributes are for auditability; do not show eval/provenance labels as visible poster copy.
• Respect non-design boundaries: do not apply this skill to Switzerland geography, tax/legal residency, Swiss German translation, or other non-poster meanings of “Swiss.” If this skill is loaded anyway for a non-design Swiss query, explicitly note that Swiss Poster design does not apply and answer normally only if appropriate. If the user asks for clean corporate Swiss minimalism and explicitly rejects poster drama, restrain the composition instead of forcing this style.