Swiss Design (International Typographic Style)

Swiss Design (International Typographic Style)

"Form follows function. The grid is absolute. Typography is the primary visual element."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Mathematical Grids: Everything aligns to a strict underlying grid. Asymmetry is preferred over centered text.
2. Sans-Serif Typography: Helvetica is the king, but any clean, neutral sans-serif works. Flush left, ragged right text alignment.
3. Objective Photography: If images are used, they should be objective, documentary-style photos, not stylized illustrations.

Visual DNA

• Colors: Very limited. Usually just black, white, and ONE highly saturated accent color (often primary red, blue, or yellow). The Industrial Chic palette works perfectly.
• Typography: Helvetica Neue, Inter, or Roboto. Huge contrast in font sizes (e.g., massive 6rem headers paired with 1rem body text).
• Layout: Do NOT center text. Ever.

Web Implementation

• Use CSS Grid extensively. Let columns dictate the layout.
• CSS Example:

body {
  background-color: #f4f4f4;
  color: #111;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

.swiss-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 40px;
}

.swiss-header {
  grid-column: 1 / 11; /* spans across multiple columns, leaving right side empty */
  font-size: 6vw;
  font-weight: 700;