website_designs

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

Recommended Web Fonts (Google Fonts)

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>

This site is open source. Improve this page.