Back to Hub
Design Sample / Swiss Poster Go to Hub

SWISS POSTER GRID

A style that makes information alignment and typographic hierarchy extremely clear. When requesting AI, don't just say "Swiss style" — specify "strong grid, single red accent color, left-aligned typography" to get better implementation quality.

Deliver messages directly with crisp alignment and concise sentences
Use placement and type size contrast for emphasis, not color
Classic information design that prioritizes structure over decoration

AI Request Prompt

Build an information-focused landing page with a clean, grid-based Swiss typography layout.

Rules:
- Grid: 12-column based, divided by 2px black lines, alignment is top priority
- Color: Paper-tone background (#f5f4ef) + ink black (#111) + single red accent (#d41f18)
- Typography: Titles in uppercase bold sans-serif (Archivo, letter-spacing -0.03em), meta info in monospace (Space Mono)
- Layout: Hero 8:4 split, bottom 3 equal columns, left-aligned principle
- Spacing: Wide section gaps, neat internal content padding
- Decoration: Compose with typography and lines only — no illustrations/icons/gradients
- Motion: Nearly static, minimal snap entrance (0.5s ease, 0.08s interval)

Responsive:
- Mobile (~840px): 12 columns to single column stack, remove border-right
- Desktop: max-width 1100px

Restrictions:
- No rounded corners
- No gradients/glow/shadows
- No more than 1 accent color

Output:
1) Grid layout rules (12col split ratios)
2) Typography hierarchy (h1/meta/body/caption) and color tokens
3) Responsive HTML/CSS code