Hub

SWISS

SWISS

SWISS

International Typographic Style — Since 1957
01 — Manifesto

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 achieve superior implementation quality. The grid is not decoration; it is the architecture of communication.

MODULE: 12 COL
ALIGN: LEFT
RHYTHM: STRICT
WEIGHT: 400 / 800 / 900
ACCENT: 1 COLOR
GRID: VISIBLE
02 — Type Scale
  • 72Grid
  • 48Helvetica
  • 36Objective
  • 24Mathematical
  • 21Asymmetry
  • 18Hierarchy
  • 16Communication
  • 14Precision
  • 12Reduction
03 — Composition
4:3
Portrait
16:9
1:1
Accent
3:2
3:2
3:2
04 — Principles
01

Grid as Architecture

Deliver messages directly with crisp alignment and concise sentences. The grid gives every element a mathematical reason to exist where it does.

02

Scale over Color

Use placement and type size contrast for emphasis, not color. Restraint is the most powerful tool in the Swiss designer's practice.

03

Structure First

Classic information design that prioritizes structure over decoration. Content finds its voice through order, not ornament.

AI Request Prompt

Design a landing page in Swiss Poster style — strict grid information hierarchy with typographic drama.

COLOR TOKENS:
--paper: #f5f4ef
--ink: #111111
--red: #d41f18
--line: #1f1f1f
--panel-bg: #ffffff
--meta-bg: #fbfaf6
No other colors.

TYPOGRAPHY:
Heading: Archivo 800, uppercase, tracking -0.03em
Body: Archivo 400
Meta: Space Mono 400, 0.92rem
Scale: 0.92rem / 1rem / clamp(2rem, 6vw, 4.8rem)
Heading line-height: 0.9
Body line-height: 1.7

UI:
- All borders 2px solid var(--line), sharp 0px radius everywhere
- Hero split: 8-col title area (border-right + border-bottom) / 4-col meta sidebar (border-bottom, meta-bg)
- Below hero: 3 equal 4-col cells, each with border-right (last child none)
- Prompt box: 2px solid var(--line), white background
- CTA button: pill shape (border-radius 999px), --red background, white text, 1px solid var(--line) border

LAYOUT:
Container: width min(1100px, 94vw), margin 0 auto, padding 24px 0 76px
Grid: display grid, grid-template-columns repeat(12, 1fr)
Title cell: padding clamp(18px, 4vw, 36px)
Meta cell: padding 16px
Column cells: padding 16px
Prompt section: margin-top 22px, padding 15px

MOTION:
Column entrance: @keyframes snap — from opacity 0 translateY(8px) to opacity 1 translateY(0)
Duration: 0.5s ease both
Stagger: 0.08s interval per column (animation-delay)
No hover animations, no scroll-triggered effects.

RESPONSIVE:
- <= 840px: all grid children span 12 columns, border-right 0
- Desktop: 12-column grid preserved, max-width 1100px

FORBIDDEN:
- Rounded corners on panels or grid cells
- Gradients, glows, or box-shadows on content areas
- More than one accent color beyond --red
- Illustrations, icons, or decorative imagery
- Animations longer than 0.5s

OUTPUT:
1) Full color token list and typography scale
2) 12-column grid layout with exact span ratios (8:4 hero, 4:4:4 columns)
3) Responsive single-file HTML/CSS with @media breakpoint at 840px