Agence WagnerAgence Wagner
FRENDEELS
Back to designs
MinimalisteTypographiqueGéométriqueClassique
Preview

International Typographic Style Reference

International Typographic Style (also known as Swiss Style or Swiss Design) is a graphic design aesthetic that emerged from Switzerland and Germany in the 1950s. It prioritizes cleanliness, readability, and objectivity through mathematical grid systems, sans-serif typography, and asymmetric layouts. The core philosophy is "form follows function" -- every element serves a communicative purpose, and design is treated as a "smart and useful solution to a specific problem" rather than decoration or persuasion. The style avoids propaganda, commercial embellishment, and subjective expression in favor of universal clarity.

Visual Characteristics

Core Design Traits

  • Mathematical grid system -- all content is organized on a strict modular grid that governs alignment, spacing, and proportions across the entire composition
  • Sans-serif typography exclusively -- grotesque and neo-grotesque typefaces (Helvetica, Univers, Akzidenz-Grotesk) are the only permitted fonts, chosen for their neutrality and universal legibility
  • Asymmetric layouts -- deliberate rejection of centered, symmetrical compositions; content is placed off-center within the grid to create visual dynamism and directional movement
  • Left-aligned, ragged-right text -- body text is flush left with a natural right edge, avoiding justified text; this creates organic visual rhythm
  • Limited, restrained color palettes -- typically monochrome (black, white, grays) or a monochrome base plus one or two accent colors; color is functional, not decorative
  • Black-and-white photography -- photographs are preferred in monochrome for objectivity and documentary realism; color photography is avoided for its emotional subjectivity
  • Photographic collage and montage -- images are combined, cropped, and composed in structured arrangements rather than used as standalone illustrations
  • Simple geometric shapes -- circles, rectangles, and lines used as compositional elements and information separators, rendered in flat, solid colors
  • Simplified universal icons -- pictographic symbols designed for cross-cultural clarity, stripped to their most essential geometric forms
  • Generous whitespace -- open areas are treated as active compositional elements, not empty filler; whitespace provides breathing room and guides the eye
  • High information density with clarity -- complex data is organized so densely packed content remains readable through rigorous grid structure
  • No decorative ornamentation -- every visual element must serve a communicative or structural function; decoration is antithetical to the philosophy

Design Principles

  • Design is a solution to a communication problem, not an expression of personal style
  • Objectivity and neutrality are paramount -- the designer's personality recedes behind the content
  • Master technical skill and systematic methods before attempting creative expression
  • The grid is the invisible architecture that gives every design its structural integrity
  • Typography is information architecture -- typeface choice, size, weight, and spacing are the primary tools for organizing content hierarchy
  • Photographs should present reality objectively, not manipulate emotion
  • Universal clarity transcends language and cultural barriers
  • Consistency and standardization across all elements (spacing, sizing, alignment) create professional authority
  • Reduction to essentials -- remove everything that does not directly serve communication

Color Palette

Primary Palette (Monochrome Foundation)

The International Typographic Style is fundamentally monochromatic. The core palette is built on black, white, and carefully calibrated grays.

Color Name Hex Role / Usage
Pure Black #000000 Primary text, headlines, borders, graphic elements
Rich Black #1A1A1A Body text (slightly softer than pure black), dark backgrounds
Dark Gray #333333 Secondary text, subheadings, navigation
Medium Gray #666666 Tertiary text, captions, metadata
Silver Gray #999999 Muted labels, rules, dividers
Light Gray #CCCCCC Subtle borders, inactive elements, grid lines
Near White #F0F0F0 Section backgrounds, alternating rows
Off-White #F5F5F5 Page backgrounds (warmer alternative to pure white)
Pure White #FFFFFF Primary backgrounds, card surfaces, text on dark

Accent Colors (Used Sparingly)

When color is introduced, it is used as a single, deliberate accent against the monochrome base. These are the most historically authentic accent choices:

Color Name Hex Role / Usage
Swiss Red #E30613 Primary accent, call-to-action, key data highlights (inspired by the Swiss flag and Swiss Federal Railways identity)
Signal Red #CC0000 Alternative primary accent, danger/alert states
Industrial Blue #0057A8 Information accent, links, institutional branding
Steel Blue #336699 Softer blue alternative, secondary interactive elements
Warm Yellow #FFCC00 Cautionary accent, attention-drawing highlights
Forest Green #006633 Positive/success states, environmental contexts

Extended Neutral Scale

For nuanced typographic hierarchy and subtle differentiation:

Level Hex Purpose
50 #FAFAFA Lightest background tint
100 #F5F5F5 Card backgrounds, alternating sections
200 #EEEEEE Subtle borders, divider lines
300 #CCCCCC Grid lines, disabled borders
400 #999999 Placeholder text, muted icons
500 #666666 Secondary body text
600 #555555 Tertiary headings
700 #333333 Primary body text
800 #1A1A1A Headlines, strong emphasis
900 #000000 Maximum contrast, display text

CSS Custom Properties

:root {
  /* Monochrome foundation */
  --swiss-black: #000000;
  --swiss-rich-black: #1a1a1a;
  --swiss-dark-gray: #333333;
  --swiss-medium-gray: #666666;
  --swiss-silver: #999999;
  --swiss-light-gray: #cccccc;
  --swiss-near-white: #f0f0f0;
  --swiss-off-white: #f5f5f5;
  --swiss-white: #ffffff;

  /* Accent colors (use one per composition) */
  --swiss-red: #e30613;
  --swiss-red-dark: #b8050f;
  --swiss-blue: #0057a8;
  --swiss-blue-dark: #003d75;
  --swiss-yellow: #ffcc00;
  --swiss-green: #006633;

  /* Semantic assignments */
  --swiss-text-primary: #1a1a1a;
  --swiss-text-secondary: #666666;
  --swiss-text-muted: #999999;
  --swiss-text-inverse: #ffffff;
  --swiss-bg-primary: #ffffff;
  --swiss-bg-secondary: #f5f5f5;
  --swiss-bg-dark: #1a1a1a;
  --swiss-border: #cccccc;
  --swiss-accent: #e30613;
}

Color Usage Guidelines

  • One accent color maximum per composition -- the power of Swiss Style comes from restraint; a single red or blue accent against a monochrome field creates maximum visual impact
  • Black text on white backgrounds is the default and most characteristic combination
  • White text on black backgrounds for inverted sections, creating stark, dramatic contrast
  • Never use gradients, color blending, or opacity effects -- all colors are flat solids at 100% opacity
  • Color is informational, not decorative -- it highlights, categorizes, or signals, never embellishes
  • Photographs should be black-and-white; if color photography is used, it should be desaturated or restrained
  • Avoid warm, saturated palettes -- the aesthetic is cool, neutral, and industrial
  • Gray values should be used to build typographic hierarchy (darker = more important, lighter = supporting)

Typography

Typeface Characteristics

International Typographic Style typography is defined by:

  • Neo-grotesque sans-serif typefaces -- Helvetica (1957), Univers (1957), and Akzidenz-Grotesk (1896) are the canonical choices
  • Neutral, objective letterforms -- no personality, no quirkiness; the typeface should be invisible and let the content speak
  • Multiple weights for hierarchy -- use Light, Regular, Medium, Bold, and Black weights of a single typeface family to create all necessary contrast
  • Left-aligned, flush-left/ragged-right setting -- never centered, never justified; the ragged right edge provides natural visual rhythm
  • Generous line-height -- typically 1.4-1.6 for body text, ensuring comfortable reading and an open, airy feel
  • Tight letter-spacing on headlines -- large display text is tracked tightly for density and impact
  • Wide letter-spacing on small text -- captions and labels use expanded tracking for legibility at reduced sizes
  • Strict size scale -- font sizes follow a mathematical ratio (often based on a modular scale) for harmonious relationships
  • Mixed case for body, uppercase for labels -- avoid all-caps for long text; use uppercase only for short labels, categories, or navigational elements

Canonical Typefaces

Typeface Designer / Year Character
Helvetica Max Miedinger, 1957 The quintessential Swiss Style typeface; neutral, versatile, ubiquitous
Univers Adrian Frutiger, 1957 Systematic family with 21 variants; slightly more refined and less ubiquitous than Helvetica
Akzidenz-Grotesk Berthold, 1896 The proto-grotesque that inspired both Helvetica and Univers; slightly rougher, more authentic
Font Style Best For
Inter Neo-grotesque, screen-optimized, tall x-height Body text, UI -- the best modern Helvetica substitute for screens
Roboto Neo-grotesque with geometric underpinnings Body text, modern Swiss-inspired interfaces
IBM Plex Sans Corporate neo-grotesque, extensive weight range All-purpose, institutional contexts
Barlow Slightly condensed grotesque, efficient Data-dense layouts, navigation, labels
Archivo Grotesque with sharp details Headlines, body text, editorial Swiss layouts
Work Sans Geometric-grotesque hybrid, screen-optimized Body text, editorial contexts
DM Sans Geometric, low-contrast, clean Modern Swiss interpretation, headings and body
Chivo Grotesque, strong at large sizes Display text, headlines, poster-inspired layouts
Libre Franklin Franklin Gothic digital revival Headlines, strong typographic hierarchy
Source Sans 3 Adobe's clean neo-grotesque Body text, data-heavy layouts

Font Pairing Suggestions

The Swiss Style traditionally uses a single typeface family in multiple weights. However, for web implementations, these pairings capture the spirit:

Heading Font Body Font Character
Inter (700) Inter (400) Purest Swiss approach -- single family, weight contrast only
Archivo (700) Inter (400) Sharp headlines, smooth body text
Barlow (600) IBM Plex Sans (400) Condensed headings, generous body -- institutional feel
Chivo (700) Work Sans (400) Bold display impact with readable body text
DM Sans (700) DM Sans (400) Geometric consistency, single-family purity

Typography CSS Example

/* Import fonts -- single family approach (preferred) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Base typography */
body {
  font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--swiss-text-primary);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings -- same family, weight and size create hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  color: var(--swiss-black);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Display / poster text */
.swiss-display {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: none;
}

/* Uppercase label / category text */
.swiss-label {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--swiss-text-muted);
}

/* Caption / small text */
.swiss-caption {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--swiss-text-secondary);
  letter-spacing: 0.01em;
}

/* Paragraph spacing */
p {
  margin-bottom: 1.25em;
  max-width: 65ch; /* Optimal reading measure */
}

/* Links */
a {
  color: var(--swiss-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--swiss-red-dark);
}

Layout Principles

Grid System

The mathematical grid is the defining structural element of the International Typographic Style. Every element on the page is positioned according to the grid -- nothing floats freely.

  • Modular grid -- the page is divided into a matrix of uniform cells (columns and rows) that govern all placement
  • Column-based structure -- typically 3, 4, 6, or 12 columns with consistent gutters; the number depends on content density
  • Baseline grid alignment -- text line-heights and spacing are calibrated so all text across columns aligns to a shared horizontal baseline
  • Consistent gutters and margins -- gutter widths are mathematically related to column widths (often 1:3 or 1:4 ratio)
  • Asymmetric placement within the grid -- content is anchored to the left or left-of-center; right-side whitespace is deliberate and compositionally active
  • Grid-breaking is intentional -- if an element extends beyond its grid cell, it is a deliberate compositional decision, not an accident
  • Vertical rhythm -- all vertical spacing (between sections, paragraphs, headings) follows multiples of a base unit (e.g., 8px base = 8, 16, 24, 32, 48, 64px)

Section Organization

  • Navigation: Ultra-minimal. Logo/wordmark left-aligned, sparse text links right-aligned. No background color, no borders, no icons. A single thin rule below is optional.
  • Hero / Title area: Large-scale headline set flush-left, with supporting text in a lighter weight below. Generous whitespace to the right and below.
  • Content blocks: Strict multi-column layouts. Text and images placed in adjacent columns. Images are always rectangular, cropped to the grid cell.
  • Data / information sections: Tables, lists, and structured data rendered with minimal decoration -- hairline rules, not heavy borders. Alternating row shading in light gray is acceptable.
  • Photographic sections: Full-width or grid-aligned black-and-white photography. No rounded corners, no frames, no drop shadows.
  • Accent / highlight sections: Background shifts to black with white text, or a single accent-color block. Used sparingly for emphasis.
  • Footer: Minimal, structured. Information organized in tight columns following the page grid. Small type, muted color.

Responsive Approach

  • The grid system adapts by reducing column count at breakpoints (12 -> 6 -> 4 -> 2 -> 1)
  • Maintain strict left-alignment even on mobile -- centered mobile layouts break the Swiss Style principle
  • Typography scales using clamp() but the hierarchy (weight and size relationships) stays consistent
  • Whitespace proportions are preserved -- padding reduces proportionally but never collapses
  • Images maintain their grid-aligned aspect ratios; never allow images to exceed their grid cell

CSS / Design Techniques

Grid Foundation

/* Base grid system */
.swiss-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Common column spans */
.swiss-col-12 { grid-column: span 12; }
.swiss-col-8 { grid-column: span 8; }
.swiss-col-6 { grid-column: span 6; }
.swiss-col-4 { grid-column: span 4; }
.swiss-col-3 { grid-column: span 3; }

/* Offset for asymmetry */
.swiss-offset-1 { grid-column-start: 2; }
.swiss-offset-2 { grid-column-start: 3; }
.swiss-offset-4 { grid-column-start: 5; }

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .swiss-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    padding: 0 32px;
  }
  .swiss-col-8,
  .swiss-col-12 { grid-column: span 6; }
  .swiss-col-6 { grid-column: span 6; }
  .swiss-col-4 { grid-column: span 3; }
  .swiss-col-3 { grid-column: span 3; }
}

@media (max-width: 640px) {
  .swiss-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 20px;
  }
  .swiss-col-8,
  .swiss-col-6,
  .swiss-col-4,
  .swiss-col-3,
  .swiss-col-12 { grid-column: span 4; }
  .swiss-offset-1,
  .swiss-offset-2,
  .swiss-offset-4 { grid-column-start: auto; }
}

.swiss-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 48px;
  border-bottom: 1px solid var(--swiss-light-gray);
}

.swiss-nav__wordmark {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--swiss-black);
  text-decoration: none;
  letter-spacing: -0.02em;
  border-bottom: none;
}

.swiss-nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.swiss-nav__links a {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--swiss-text-secondary);
  text-decoration: none;
  border-bottom: none;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

.swiss-nav__links a:hover {
  color: var(--swiss-black);
}

.swiss-nav__links a.active {
  color: var(--swiss-black);
  font-weight: 600;
}

Hero / Title Section

.swiss-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 48px 80px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.swiss-hero__headline {
  grid-column: 1 / 9;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--swiss-black);
}

.swiss-hero__subtitle {
  grid-column: 1 / 6;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--swiss-text-secondary);
  margin-top: 32px;
}

.swiss-hero__accent {
  grid-column: 10 / 13;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

/* Red accent block -- a single geometric shape */
.swiss-hero__accent-block {
  width: 80px;
  height: 80px;
  background: var(--swiss-accent);
}

@media (max-width: 768px) {
  .swiss-hero {
    padding: 60px 20px 40px;
  }
  .swiss-hero__headline {
    grid-column: 1 / -1;
  }
  .swiss-hero__subtitle {
    grid-column: 1 / -1;
  }
  .swiss-hero__accent {
    display: none;
  }
}

Content Section with Asymmetric Layout

.swiss-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 48px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}

/* Text occupies 5 of 12 columns, offset from left */
.swiss-content__text {
  grid-column: 1 / 6;
}

/* Image occupies remaining columns */
.swiss-content__image {
  grid-column: 7 / 13;
}

.swiss-content__image img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  /* Black and white photography */
}

/* Reversed variant */
.swiss-content--reversed .swiss-content__text {
  grid-column: 7 / 13;
}

.swiss-content--reversed .swiss-content__image {
  grid-column: 1 / 6;
}

@media (max-width: 768px) {
  .swiss-content__text,
  .swiss-content__image,
  .swiss-content--reversed .swiss-content__text,
  .swiss-content--reversed .swiss-content__image {
    grid-column: 1 / -1;
  }
}

Data Table

.swiss-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 0.875rem;
}

.swiss-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--swiss-text-muted);
  padding: 12px 16px;
  border-bottom: 2px solid var(--swiss-black);
}

.swiss-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--swiss-near-white);
  color: var(--swiss-text-primary);
  vertical-align: top;
}

.swiss-table tbody tr:hover {
  background: var(--swiss-near-white);
}

/* No outer borders, no rounded corners, no shadows */

Inverted Section (Dark Background)

.swiss-section--dark {
  background: var(--swiss-black);
  color: var(--swiss-white);
  padding: 80px 0;
}

.swiss-section--dark h1,
.swiss-section--dark h2,
.swiss-section--dark h3 {
  color: var(--swiss-white);
}

.swiss-section--dark p {
  color: rgba(255, 255, 255, 0.75);
}

.swiss-section--dark .swiss-label {
  color: rgba(255, 255, 255, 0.5);
}

Accent Section (Single Color Block)

.swiss-section--accent {
  background: var(--swiss-accent);
  color: var(--swiss-white);
  padding: 80px 0;
}

.swiss-section--accent h1,
.swiss-section--accent h2,
.swiss-section--accent h3 {
  color: var(--swiss-white);
}

.swiss-section--accent p {
  color: rgba(255, 255, 255, 0.9);
}

.swiss-section--accent a {
  color: var(--swiss-white);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

Geometric Accent Elements

/* Red square -- a signature Swiss Style compositional element */
.swiss-square {
  width: 48px;
  height: 48px;
  background: var(--swiss-accent);
  flex-shrink: 0;
}

.swiss-square--large {
  width: 96px;
  height: 96px;
}

/* Horizontal rule -- thin, precise */
.swiss-rule {
  border: none;
  border-top: 1px solid var(--swiss-light-gray);
  margin: 48px 0;
}

.swiss-rule--bold {
  border-top: 3px solid var(--swiss-black);
}

.swiss-rule--accent {
  border-top: 3px solid var(--swiss-accent);
}

/* Vertical accent line */
.swiss-vline {
  width: 3px;
  background: var(--swiss-accent);
  align-self: stretch;
}

/* Circle element */
.swiss-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--swiss-black);
}

Button

.swiss-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--swiss-black);
  color: var(--swiss-white);
  border: none;
  border-radius: 0; /* Sharp corners -- no rounding */
  padding: 14px 40px;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.swiss-button:hover {
  background: var(--swiss-dark-gray);
}

/* Accent button */
.swiss-button--accent {
  background: var(--swiss-accent);
}

.swiss-button--accent:hover {
  background: var(--swiss-red-dark);
}

/* Outline / ghost button */
.swiss-button--outline {
  background: transparent;
  color: var(--swiss-black);
  border: 2px solid var(--swiss-black);
}

.swiss-button--outline:hover {
  background: var(--swiss-black);
  color: var(--swiss-white);
}

/* On dark backgrounds */
.swiss-section--dark .swiss-button--outline {
  color: var(--swiss-white);
  border-color: var(--swiss-white);
}

.swiss-section--dark .swiss-button--outline:hover {
  background: var(--swiss-white);
  color: var(--swiss-black);
}

Poster-Style Number / Statistic Display

.swiss-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 48px;
}

.swiss-stat {
  text-align: left; /* Always left-aligned, never centered */
}

.swiss-stat__number {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--swiss-black);
  margin-bottom: 8px;
}

.swiss-stat__label {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--swiss-text-secondary);
  line-height: 1.4;
}

/* Accent variant -- number in red */
.swiss-stat--accent .swiss-stat__number {
  color: var(--swiss-accent);
}

Photography Treatment

/* All images should be black and white */
.swiss-image {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.05);
}

/* Image with caption -- Swiss Style convention */
.swiss-figure {
  margin: 0;
}

.swiss-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.05);
}

.swiss-figure figcaption {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--swiss-text-muted);
  margin-top: 8px;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.swiss-footer {
  border-top: 1px solid var(--swiss-light-gray);
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.swiss-footer__brand {
  grid-column: 1 / 4;
}

.swiss-footer__brand-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--swiss-black);
  margin-bottom: 8px;
}

.swiss-footer__brand-text {
  font-size: 0.8125rem;
  color: var(--swiss-text-muted);
  line-height: 1.5;
}

.swiss-footer__links {
  grid-column: 5 / 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.swiss-footer__links h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--swiss-text-muted);
  margin-bottom: 16px;
}

.swiss-footer__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.swiss-footer__links li {
  margin-bottom: 8px;
}

.swiss-footer__links a {
  font-size: 0.8125rem;
  color: var(--swiss-text-secondary);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.15s ease;
}

.swiss-footer__links a:hover {
  color: var(--swiss-black);
}

.swiss-footer__copyright {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--swiss-text-muted);
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--swiss-near-white);
}

Design Do's and Don'ts

Do

  • Use a single sans-serif typeface family in multiple weights for all typographic needs
  • Build every layout on a strict mathematical grid -- no freeform placement
  • Align all text flush-left with a ragged right edge
  • Use black-and-white photography, processed with full grayscale and slightly elevated contrast
  • Limit your palette to monochrome plus one accent color at most
  • Employ sharp, 90-degree corners on all elements -- no border-radius
  • Use geometric shapes (squares, circles, lines) as compositional accents, not decoration
  • Create hierarchy through type size, weight, and gray-value contrast
  • Maintain generous, proportional whitespace as an active compositional element
  • Keep all interactive transitions minimal and functional (150ms, ease)
  • Use uppercase sparingly, only for short labels and category markers

Don't

  • Use serif, script, display, or decorative typefaces
  • Center-align body text or headlines (left-aligned is the Swiss rule)
  • Apply rounded corners, drop shadows, gradients, or any depth simulation
  • Use color photography without desaturation
  • Include decorative illustrations, clipart, or ornamental graphics
  • Use more than one accent color per composition
  • Apply textures, patterns, or background images
  • Create symmetrical, centered layouts -- asymmetry is fundamental
  • Over-decorate with borders, outlines, or heavy dividers
  • Sacrifice information clarity for aesthetic minimalism
  • Use animation or motion as decoration -- all movement must serve function
Aesthetic Relationship to International Typographic Style
Bauhaus Direct philosophical ancestor; "form follows function," geometric shapes, systematic design approach. The Bauhaus school's typography and layout experiments (particularly Jan Tschichold's "New Typography") laid the groundwork for Swiss Style.
Constructivism Early 20th-century Russian art movement; shared commitment to geometric abstraction, grid structures, and design as a tool for social communication rather than self-expression.
De Stijl Dutch movement emphasizing primary colors, geometric forms, and asymmetric composition. Piet Mondrian's grid paintings are a direct visual parallel to Swiss grid systems.
Minimalism Broader parent philosophy; Swiss Style is essentially minimalism applied to graphic design and typography -- reduction to essentials, elimination of ornament.
Flat Design Direct digital descendant; adopted Swiss Style's flat color, sans-serif type, and grid-based layouts for 2010s digital interfaces. Microsoft Metro and Apple iOS 7+ drew heavily from Swiss principles.
Corporate Swiss Style became the default visual language of international corporate identity in the 1960s-80s; its neutrality and professionalism made it ideal for global brands.
Corporate Memphis Inherits the flat color and systematic layout of Swiss-influenced corporate design, but adds figurative illustration (antithetical to Swiss Style's photographic objectivity).
Cyberminimalism Contemporary digital aesthetic sharing Swiss Style's reductive, grid-based, monochrome approach, applied to tech and digital-native contexts.
Neubrutalism Shares the visible grid structure and raw typography but deliberately subverts Swiss Style's polish with harsh borders, misalignment, and aggressive contrast.
Modernism The overarching artistic and philosophical movement within which Swiss Style exists; modernist principles of rationalism, universality, and functionalism are Swiss Style's foundation.
Suprematism Kasimir Malevich's geometric abstraction (squares, circles, crosses) directly prefigures Swiss Style's use of geometric shapes as pure compositional elements.
Plakatstil Early 1900s German poster art (Lucian Bernhard); reduced imagery to flat color shapes and bold sans-serif text -- a print-era precursor to Swiss Style's reductive clarity.
Precisionism American art movement celebrating industrial forms with clean lines and geometric simplification; shares Swiss Style's preference for objective, structural beauty.
Purism Le Corbusier and Ozenfant's post-Cubist movement; championed pure geometric form, rational composition, and the elimination of decorative excess.
Acid Design Contemporary graphic design trend that uses Swiss-influenced grids and typography but pushes into experimental, distorted, and psychedelic color territory.
Vectorheart Shares Swiss Style's commitment to flat vector graphics and geometric clarity, but applied to illustration and character design rather than typographic communication.

Quick-Start: Minimal Swiss Style Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>International Typographic Style</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    :root {
      --swiss-black: #000000;
      --swiss-rich-black: #1a1a1a;
      --swiss-dark-gray: #333333;
      --swiss-medium-gray: #666666;
      --swiss-silver: #999999;
      --swiss-light-gray: #cccccc;
      --swiss-near-white: #f0f0f0;
      --swiss-off-white: #f5f5f5;
      --swiss-white: #ffffff;
      --swiss-accent: #e30613;
      --swiss-accent-dark: #b8050f;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--swiss-white);
      color: var(--swiss-rich-black);
      font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* Navigation */
    nav {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 48px;
      border-bottom: 1px solid var(--swiss-light-gray);
    }

    nav a.wordmark {
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--swiss-black);
      text-decoration: none;
      letter-spacing: -0.02em;
    }

    nav ul {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    nav ul a {
      font-weight: 400;
      font-size: 0.875rem;
      color: var(--swiss-medium-gray);
      text-decoration: none;
      transition: color 0.15s ease;
    }

    nav ul a:hover { color: var(--swiss-black); }

    /* Hero */
    .hero {
      max-width: 1200px;
      margin: 0 auto;
      padding: 120px 48px 80px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      position: relative;
    }

    .hero h1 {
      grid-column: 1 / 9;
      font-size: clamp(3rem, 7vw, 5.5rem);
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -0.04em;
      color: var(--swiss-black);
    }

    .hero p {
      grid-column: 1 / 6;
      font-size: 1.125rem;
      color: var(--swiss-medium-gray);
      line-height: 1.6;
      margin-top: 32px;
      max-width: 65ch;
    }

    .hero .accent-block {
      grid-column: 11 / 13;
      grid-row: 1;
      width: 80px;
      height: 80px;
      background: var(--swiss-accent);
      justify-self: end;
      align-self: start;
    }

    /* Content section */
    .content-section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 48px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      align-items: start;
      border-top: 1px solid var(--swiss-near-white);
    }

    .content-section .label {
      grid-column: 1 / 4;
      font-weight: 500;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--swiss-silver);
      padding-top: 4px;
    }

    .content-section .text {
      grid-column: 4 / 10;
    }

    .content-section .text h2 {
      font-size: 1.75rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--swiss-black);
      margin-bottom: 16px;
      line-height: 1.2;
    }

    .content-section .text p {
      color: var(--swiss-dark-gray);
      line-height: 1.7;
      margin-bottom: 1em;
      max-width: 60ch;
    }

    /* Stats row */
    .stats {
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 48px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 48px;
      border-top: 3px solid var(--swiss-black);
    }

    .stat-number {
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--swiss-black);
    }

    .stat-number.accent { color: var(--swiss-accent); }

    .stat-label {
      font-size: 0.8125rem;
      color: var(--swiss-medium-gray);
      margin-top: 8px;
      line-height: 1.4;
    }

    /* Dark section */
    .dark-section {
      background: var(--swiss-black);
      color: var(--swiss-white);
      padding: 80px 0;
    }

    .dark-section .inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
    }

    .dark-section h2 {
      grid-column: 1 / 8;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--swiss-white);
      line-height: 1.1;
    }

    .dark-section p {
      grid-column: 1 / 6;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.7;
      margin-top: 24px;
    }

    .dark-section .btn {
      grid-column: 1 / 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--swiss-white);
      color: var(--swiss-black);
      border: none;
      border-radius: 0;
      padding: 14px 40px;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 0.8125rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.15s ease;
      margin-top: 32px;
      width: fit-content;
    }

    .dark-section .btn:hover {
      background: var(--swiss-near-white);
    }

    /* Footer */
    footer {
      max-width: 1200px;
      margin: 0 auto;
      padding: 48px;
      border-top: 1px solid var(--swiss-light-gray);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    footer .brand {
      font-weight: 800;
      font-size: 1rem;
      color: var(--swiss-black);
    }

    footer .meta {
      font-size: 0.75rem;
      color: var(--swiss-silver);
    }

    @media (max-width: 768px) {
      nav { padding: 20px; }
      nav ul { gap: 20px; }
      .hero { padding: 60px 20px 40px; }
      .hero h1 { grid-column: 1 / -1; }
      .hero p { grid-column: 1 / -1; }
      .hero .accent-block { display: none; }
      .content-section { padding: 48px 20px; }
      .content-section .label { grid-column: 1 / -1; }
      .content-section .text { grid-column: 1 / -1; }
      .stats { grid-template-columns: repeat(2, 1fr); padding: 48px 20px; gap: 32px; }
      .dark-section .inner { padding: 0 20px; }
      .dark-section h2 { grid-column: 1 / -1; }
      .dark-section p { grid-column: 1 / -1; }
      .dark-section .btn { grid-column: 1 / -1; }
      footer { padding: 32px 20px; flex-direction: column; gap: 8px; }
    }
  </style>
</head>
<body>
  <nav>
    <a href="#" class="wordmark">Konstrukt</a>
    <ul>
      <li><a href="#">Work</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Process</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <section class="hero">
    <h1>Form follows function</h1>
    <div class="accent-block"></div>
    <p>Objective communication through systematic design. Clarity, precision, and structure in every element.</p>
  </section>

  <section class="content-section">
    <div class="label">Approach</div>
    <div class="text">
      <h2>The grid is the invisible architecture</h2>
      <p>Every element is placed with mathematical precision on a modular grid. Nothing is arbitrary. Whitespace is an active compositional element, not empty space. The result is design that communicates with absolute clarity.</p>
    </div>
  </section>

  <section class="stats">
    <div>
      <div class="stat-number accent">1957</div>
      <div class="stat-label">Helvetica designed by Max Miedinger</div>
    </div>
    <div>
      <div class="stat-number">21</div>
      <div class="stat-label">Weights in Adrian Frutiger's Univers family</div>
    </div>
    <div>
      <div class="stat-number">12</div>
      <div class="stat-label">Column grid -- the foundation of all Swiss layouts</div>
    </div>
    <div>
      <div class="stat-number accent">1</div>
      <div class="stat-label">Accent color maximum per composition</div>
    </div>
  </section>

  <section class="dark-section">
    <div class="inner">
      <h2>Objectivity over persuasion</h2>
      <p>The designer's role is to organize information with clarity and precision. Typography, photography, and geometric form are the only tools required.</p>
      <a href="#" class="btn">Learn More</a>
    </div>
  </section>

  <footer>
    <span class="brand">Konstrukt</span>
    <span class="meta">Designed with International Typographic Style principles</span>
  </footer>
</body>
</html>
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.