Swiss International Style

# Swiss International Style

## Philosophy

Swiss International Style translates modernist clarity into interface systems: objective hierarchy, mathematical spacing, rigorous left alignment, and typography that behaves like an industrial standard rather than personal expression. The interface should feel like a timetable, poster grid, or transit information panel—lucid under pressure, spare without being empty, and persuasive through order rather than decoration.

### Values

- grid discipline over improvisation
- objective communication over stylistic flourish
- flush-left typographic hierarchy with measured rhythm
- contrast through scale, weight, and placement rather than ornament
- modular systems that feel reproducible across signage, print, and interface

### Anti-Values

- skeuomorphic texture
- centered ornamental composition
- rounded friendly softness
- decorative drop shadows and gratuitous gradients
- ambiguous hierarchy or inconsistent alignment

### Visual Character

- strict asymmetric grid with an oversized left rail used for section indices and metadata
- hairline black rules separating modules, rows, and headings with no decorative framing
- large neo-grotesk headlines set flush-left with tight leading and generous negative space around them
- small uppercase utility labels tracked wide and aligned to a consistent baseline grid
- a limited white-black palette punctuated by one urgent signal red used as vertical bars, dots, and action accents

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#111111` |
| secondary | `#F5F3EE` |
| accent | `#D62828` |
| background | `#ECE9E1` |
| surface | `#FCFBF7` |
| text | `#121212` |
| muted | `#6F6A63` |
| border | `#1A1A1A` |
| error | `#B00020` |
| success | `#1D6B3C` |
| warning | `#B26A00` |
| info | `#005F8C` |

### Typography

- **Heading Font**: Helvetica Neue, Arial, sans-serif
- **Body Font**: IBM Plex Sans, Arial, sans-serif
- **Mono Font**: IBM Plex Mono, monospace
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.35
- **Letter Spacing**: 0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","16px","24px","32px","48px","64px","96px"]

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 999px

### Shadows

- **Sm**: 0 0 0 rgba(0,0,0,0)
- **Md**: 0 0 0 rgba(0,0,0,0)
- **Lg**: 0 0 0 rgba(0,0,0,0)

### Surfaces

- **Treatment**: paper
- **Card Style**: outlined planes with wide internal margins and hairline separators instead of elevation
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 6px
- **Style**: solid
- **Character**: hairline and precise, used as structural dividers; accent bars are thick and vertical

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(0.2, 0, 0, 1)
- **Philosophy**: snappy

### Responsive

- **Breakpoints**: [1200,1024,768,480]
- **Column Progression**: 12 → 8 → 4 → 1 with left metadata rail collapsing into top index rows

## Rules

### Composition

Build compositions on a disciplined modular grid with a persistent metadata rail at the left, content blocks spanning controlled column widths, and strong flush-left alignment. Major zones should be separated by open space and hairline rules rather than nested boxes.

### Hierarchy

Hierarchy comes from scale jumps, weight changes, red signal markers, and the position of content within the grid. Headlines are oversized and terse; supporting data is compact, uppercase, and mono or utility-sized.

### Density

Medium information density with high legibility: generous margins, compressed leading in headlines, and tightly ordered tables. No decorative padding inflation inside controls; whitespace should feel intentional and architectural.

### Signature Patterns

- every major section begins with a narrow red vertical bar anchored to the left grid edge
- module boundaries are drawn with 1px horizontal hairline rules instead of rounded cards or shadows
- section index numbers live in an oversized left rail and remain visually detached from the main content block
- all utility labels are uppercase with aggressive letter-spacing and aligned on a common baseline grid
- tables, forms, and tabs use monochrome fields with black underlines or perimeter rules rather than filled controls

## Layout

### Grid

Desktop uses a 12-column asymmetrical grid: a fixed metadata rail plus flexible content columns. Key content spans 7–9 columns while summaries and controls occupy shorter bands. Tablet shifts to 8 columns with the metadata rail reduced; phone collapses to a single column with index markers becoming inline headers.

### Breakpoints

At 1024px reduce from 12 to 8 columns and tighten outer margins. At 768px stack the hero and operational panels vertically while preserving rule-based separators. At 480px convert all multi-column rows to a single column, make actions full-width, and allow tables to scroll horizontally inside ruled wrappers.

### Whitespace

Whitespace is structural: outer margins are large, inter-section spacing is 48–64px on desktop, and internal content uses an 8px baseline grid. Negative space should frame typography like poster composition rather than fill gaps evenly.

## Guidance

### Do

- Use red sparingly as a positional signal, not as a general decorative fill.
- Keep all major text flush-left and let rag create the visual rhythm.
- Separate information blocks with rules and spacing instead of extra containers.
- Use tabular mono text for schedules, codes, and numeric summaries.
- Let typography carry emphasis before reaching for color or iconography.

### Don't

- Do not center headlines or balance pages symmetrically.
- Do not introduce rounded corners, soft shadows, or glass effects.
- Do not use multiple accent colors or illustrative gradients.
- Do not wrap every region in thick boxes that destroy the open grid.
- Do not make controls look tactile; they should feel engineered and flat.