SWISS
DESIGN
SYSTEM

Clarity. Precision. Objectivity. The principles of Swiss Design have shaped modern visual communication since the 1950s.

Grid

This project uses two complementary grid systems that align with Swiss Design principles of mathematical precision and spatial harmony: a flexible 12-column layout grid and a fixed baseline grid paper overlay.

Column Grid System

Built with Tailwind CSS v4, the column grid provides a flexible, responsive 12-column layout system for content organization.

12-Column System

Tailwind's default grid provides column classes from grid-cols-1 through grid-cols-12, enabling precise layout control.

Responsive Breakpoints

  • 2xs: 375px (iPhone SE, small mobile)
  • xs: 425px (standard mobile phones)
  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
  • 2xl: 1536px

Container Setup

Uses Tailwind's .container utility class, centered with mx-auto and responsive padding via px-4 md:px-8.

Current Usage

  • Hero section: 12-column grid with 7:5 split
  • Card layouts: 1-2-3 column responsive grids
  • Gap spacing: gap-4 (1rem) or gap-8 (2rem)

Grid Paper System

A full-screen baseline grid overlay inspired by traditional Swiss Design graph paper, providing visual alignment guides for precise positioning and vertical rhythm.

Grid Specifications

  • Grid unit: 16px × 16px squares (matches gap-4 spacing)
  • Line color: Semi-transparent red (accent color at 15% opacity)
  • Coverage: Full viewport with 32px margin
  • Lines: Both horizontal and vertical

Usage

Use the "Show Grid Paper" toggle button to visualize the baseline grid. The 16px unit aligns with the column grid's gap spacing, ensuring consistent spacing and alignment across all elements. Both grid systems can be used simultaneously for comprehensive layout control.

Styles

Typography

The project uses Inter as the primary typeface. Inter is a modern sans-serif font designed for computer screens, featuring excellent legibility and a neutral appearance that aligns perfectly with Swiss Design principles—similar to classic typefaces like Helvetica and Univers.

Type Ramp

NameSizePoint SizeLine HeightWeightExample
Display96px72pt96px700Aa
H160px45pt64px700Aa
H248px36pt56px600Aa
H336px27pt44px600Aa
H430px22.5pt36px600Aa
H524px18pt28px600Aa
H620px15pt24px600Aa
Body Large18px13.5pt24px400The quick brown fox jumps over the lazy dog
Body16px12pt20px400The quick brown fox jumps over the lazy dog
Body Small14px10.5pt16px400The quick brown fox jumps over the lazy dog
Caption12px9pt12px400The quick brown fox jumps over the lazy dog

Alternate Fonts

Additional typefaces are available for specialized use cases, each bringing distinct characteristics to your designs.

Geist

Geist is a modern sans-serif typeface designed for clarity and readability. It offers a slightly warmer alternative to Inter while maintaining excellent legibility across all sizes.

Aa Bb Cc

The quick brown fox jumps over the lazy dog

Geist Mono

Geist Mono is a monospaced typeface ideal for code snippets, technical documentation, and designs requiring fixed-width characters. Each character occupies the same horizontal space.

Aa Bb Cc

The quick brown fox jumps over the lazy dog

{ "design": "swiss", "year": 1950 }

Color

The color system uses semantic tokens that automatically adapt between light and dark modes, maintaining consistency and accessibility across all interface elements.

Accent Color

#EB1600

Primary accent color

Used for interactive elements, emphasis, and calls-to-action. The red accent provides strong visual contrast while maintaining the clean, minimal aesthetic of Swiss Design.

Semantic Tokens

Background

Main surface

Foreground

Primary text

Muted

Subtle backgrounds

Accent

Interactive elements

Icons

Icons are provided by Lucide React, a beautiful and consistent icon library with over 1,000 icons.

Components

All UI components are built with shadcn/ui, a collection of re-usable components that you can copy and paste into your apps.

  • Style: "new-york" variant
  • React Server Components (RSC): Enabled
  • TypeScript: Enabled
  • Tailwind CSS variables: Using CSS variables for theming
  • Base color: Neutral
  • Icon library: Lucide React

Accordion

Alert

Alert Dialog

Aspect Ratio

16:9

Avatar

CNJMABMH

Badge

DefaultSecondaryAccentOutline

Breadcrumb

Buttons

Button Groups

Calendar

December 2025

Card

Swiss Design Principles
The foundation of modern design

Emphasizing cleanliness, readability, and objectivity in visual communication.

Grid Systems
Structured layouts

Mathematical precision and spatial harmony through systematic grids.

Carousel

1
2
3

Chart

Checkbox

Collapsible

Command

Dialog

Drawer

Dropdown Menu

Input & Label

Kbd (Keyboard)

Press⌘Kto open command menu
Save with⌘S

Navigation Menu

Pagination

Popover

Progress

Radio Group

Resizable Panels

Panel One
Panel Two

Scroll Area

Swiss Design Pioneers

Josef Müller-Brockmann

Armin Hofmann

Emil Ruder

Max Bill

Ernst Keller

Theo Ballmer

Richard Paul Lohse

Jan Tschichold

Adrian Frutiger

Max Miedinger

Select

Separator

Swiss Design

International Typographic Style

Minimalism
Grid Systems
Typography

Sheet

Skeleton

Slider

Switch

Table

DesignerYears ActiveNotable Work
Josef Müller-Brockmann1950s-1980sPoster Design
Armin Hofmann1950s-1990sBasel School of Design
Max Bill1940s-1990sConcrete Art

Tabs

Minimalism, grid systems, and sans-serif typography.

Textarea

Toggle

Toggle Group

Tooltip

Work

01

Typography Project

Exploring grid systems and typographic hierarchy

02

Poster Design

Minimalist approach to visual communication

03

Brand Identity

Clean, systematic visual language for modern brands

About

Swiss Design, also known as International Typographic Style, emerged in Switzerland in the 1950s. It emphasizes cleanliness, readability, and objectivity.

The style is characterized by the use of sans-serif typography (particularly Helvetica), grid systems, asymmetrical layouts, and photography instead of illustrations. Swiss Design pioneers believed that design should be clear, objective, and functional.

Key figures in the movement include Josef Müller-Brockmann, Armin Hofmann, Emil Ruder, and Max Bill. Their work continues to influence graphic design, web design, and visual communication today.

Principles

  • Minimalism
  • Grid-based layouts
  • Sans-serif typography
  • Objective photography

Influences

  • Bauhaus
  • De Stijl
  • Constructivism
  • New Typography

Contact

Interested in working together? Let's discuss your project.

Emailhello@swissdesign.com

Phone+41 123 456 789

LocationZürich, Switzerland