Applying Swiss Design

Core principle: Clarity through reduction. Every element must earn its place. Remove until removing more would harm understanding.

Quick Start

Before finalizing any output, run the Swiss Test:

1. Reduction: Can I remove anything without losing meaning?
2. Grid: Does alignment create rhythm and relationships?
3. Hierarchy: Is there a clear reading order through size/weight/position?
4. Typography: Is type doing the structural work (not color or decoration)?

If any answer is "no," revise before shipping.

Instructions

Apply these four principles in order:

Step 1: Reduce

Strip to essentials. For each element, ask: "If I remove this, what do users lose?"

• If "nothing" or "beauty" → remove it
• If "they won't understand X" → keep it

See reduction.md for detailed guidance.

Step 2: Establish Grid

Create mathematical structure using a base unit (8px recommended).

• Derive all spacing from multiples of base unit
• Minimize alignment points (fewer = stronger grid)
• Apply consistently—no "just this once" exceptions

See grid.md for detailed guidance.

Step 3: Create Hierarchy

Control attention through contrast. Define exactly three levels:

• Primary: Main action or message (large, bold, prominent)
• Secondary: Supporting content (regular size, normal weight)
• Tertiary: Metadata, auxiliary info (smaller, lighter)

Use ONE lever strongly: size OR weight OR position. Not all three.

See hierarchy.md for detailed guidance.

Step 4: Apply Typography

Type carries content and creates structure. It's the only ornament needed.

• One typeface family, two weights (regular + bold)
• 4-5 sizes maximum, following a ratio (1.25× recommended)
• Line height: 1.4-1.6 for body, 1.2 for headings

See typography.md for detailed guidance.

Examples

Example 1: Interface Component

Input: Card with decorative elements

<div class="card shadow-lg rounded-xl border border-gray-200 p-6">
  <div class="flex items-center gap-2 mb-4">
    <UserIcon class="w-5 h-5 text-blue-500" />
    <h3 class="text-lg font-semibold text-gray-800">User Profile</h3>
  </div>
  <div class="divider border-t border-gray-100 my-4"></div>
  <p class="text-gray-600 text-sm">View and edit your profile below.</p>
</div>

Output: Reduced to essentials

<section>
  <h3>User Profile</h3>
  <!-- actual content -->
</section>

Example 2: CLI Output

Input: Decorated terminal output

╔═══════════════════════════════════╗
║  ⚠️  ERROR: Build failed  ⚠️      ║
╚═══════════════════════════════════╝

Output: Typography as structure

ERROR: Build failed

  src/app.js:42
  SyntaxError: Unexpected token

  > npm run build

Example 3: Documentation

Input: Verbose intro

## Overview

This section provides a comprehensive overview of the authentication
system. Authentication is a critical component of any web application,
and our implementation follows industry best practices.

## Getting Started

To get started with authentication, you'll need to configure...

Output: Direct to value

## Authentication

Configure in `config/auth.rb`:

Common Failures

Decoration creep: Adding elements "to look better" rather than aid comprehension. Each gradient, shadow, icon must justify its presence.

Hierarchy collapse: When everything is bold, nothing is. When there are twelve font sizes, there's no system.

Grid abandonment: "Just this once" exceptions accumulate into visual chaos.

Color as crutch: Using color to create hierarchy that should exist in type. If it doesn't work in grayscale, the structure is weak.

Philosophy

Swiss design is not a style—it's a discipline. The goal isn't to "look Swiss." The goal is to remove everything that doesn't serve comprehension.

Müller-Brockmann: "The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."

Success Criteria

Application of Swiss design principles is complete when:

• Every element serves comprehension (reduction applied)
• All spacing derives from a consistent base unit (grid applied)
• Clear primary → secondary → tertiary reading order exists (hierarchy applied)
• Type creates structure without decorative elements (typography applied)
• The Swiss Test passes on all four questions
• Output works in grayscale (color is not a crutch)