Swiss / International Typographic Style

---
name: swiss-international
description: Apply the Swiss / International Typographic Style visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Swiss / International Typographic Style, mentions international style, swiss design, helvetica style, or describes strict modular grid, massive type scale contrast, flush-left alignment — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Swiss / International Typographic Style Design System

The 1950s Swiss school translated to the web: strict grid, flush-left ragged-right type, one sans-serif family, huge scale contrast, generous whitespace, and a single red accent. Content is the interface.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Swiss / International Typographic Style.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (international style, swiss design, helvetica style, swiss typographic), or describes its traits: strict modular grid; massive type scale contrast; flush-left alignment; single red accent; no decoration.

## Design tokens

### Color palette

- Pure white ground: `#ffffff` (--color-bg)
- Near-black ink: `#111111` (--color-text)
- Captions and metadata: `#6b6b6b` (--color-text-muted)
- Swiss red, used surgically: `#e30613` (--color-accent)
- Rules and dividers, same as ink: `#111111` (--color-border)

### Typography

- Display / headings: Inter (fallback: Helvetica Neue, Helvetica, Arial, sans-serif) (ideal: Neue Haas Grotesk, premium — use Inter as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Helvetica, Arial, sans-serif) (ideal: Neue Haas Grotesk, premium — use Inter as the free substitute)
- Type scale: 1.5 ratio, base 16px — computed steps: 16px / 24px / 36px / 54px / 81px / 122px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1, letter-spacing -0.03em
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64, 96, 128 — Whitespace is the primary design material; sections separated by at least 96px, and asymmetric empty space is deliberate.
- Border radius: none 0px — No rounded corners anywhere.
- Border treatment: 1px solid #111111 — Horizontal rules only, used to structure content like a printed page. No boxes around things.

### Shadows

- none: `none` — The style is perfectly flat; hierarchy comes from scale and position

### Layout

- Max content width: 1440px
- 12-column modular grid, occasionally made visible as hairlines
- Asymmetric layouts: content weighted to one side with deliberate emptiness opposite
- Type aligns to the grid; images crop to grid modules
- Flush-left, ragged-right; never centered or justified body text

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 120ms / 200ms / 300ms
- Minimal: opacity and small translate only
- No decorative animation; motion only communicates state

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-muted: #6b6b6b;
  --color-accent: #e30613;
  --color-border: #111111;
  --radius-none: 0px;
  --border-default: 1px solid #111111;
  --font-display: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1;
  --leading-body: 1.5;
  --tracking-heading: -0.03em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Thin top bar, wordmark left, links right in 14px medium; 1px rule below; no background fill
- **Hero:** Headline at 96–160px filling most of the viewport width, small supporting paragraph in one grid column, no imagery required
- **Card:** No card chrome — a grid cell with a rule above, bold title, and body copy; hover underlines the title
- **Button (primary):** Black fill, white text, square corners, generous horizontal padding; red fill for the single most important action
- **Button (secondary):** 1px black border, black text, square corners
- **Form fields:** Bottom-rule-only inputs (1px black underline), floating small-caps label; focus thickens rule to 2px

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Oversized flush-left headlines set tight against a visible modular grid, with a single Swiss-red accent used sparingly — one element per viewport at most. Spend boldness here; keep everything else quiet.

## Do

- Build on a real grid and let it show — alignment is the aesthetic
- Push scale contrast further than feels safe: 16px body against 120px headlines
- Use red exactly once per view
- Let whitespace do the separating; remove boxes and borders around content

## Don't

- No drop shadows, gradients, or rounded corners
- Never center body text or headlines
- No more than one typeface family
- Don't fill empty space — asymmetric emptiness is intentional

## Accessibility notes

- Inherently high contrast (#111 on #fff passes AAA)
- Red #e30613 on white passes AA for large text only — don't use it for small body text
- Huge headline sizes need clamp() so they don't overflow small viewports

## Reference sites

- Swissted: https://www.swissted.com
- Grilli Type: https://www.grilli-type.com
- Museum für Gestaltung: https://museum-gestaltung.ch

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip swiss-international.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/swiss-international.json

Settings → Capabilities → Skills → Upload skill → swiss-international.zip