Swiss Design

Swiss Design

Opt-in design system rooted in Swiss International Style: rigorous grids, clear typography, restrained color, and whitespace as structure.

Source: https://github.com/zeke/swiss-design-skill

Use Only When Asked

Use when the user explicitly asks for:

• Swiss design
• International Typographic Style
• modernist editorial UI
• grid-first composition
• Helvetica / Neue Haas / grotesque typography
• a clean poster-like product interface

Do not apply automatically to ordinary SaaS, dashboard, or marketing work.

Core Rules

• Grid first: start from a 12-column desktop grid and collapse to one column on mobile.
• One accent: choose one accent color for the whole view and use it sparingly.
• Hierarchy through opacity: use one text hue with opacity steps instead of multiple gray hues.
• Whitespace as structure: section rhythm should feel deliberate and generous.
• Narrow body text: keep paragraphs at 60ch or less.
• Mostly rectilinear: avoid pill-heavy layouts and oversized radii unless the product context requires them.

Typography

Recommended stack:

font-family: "IBM Plex Sans", "Hanken Grotesk", "Barlow", "Host Grotesk", "DM Sans", system-ui, sans-serif;

Cortex adaptation:

• Use normal letter spacing by default.
• Only tighten display headings when the project already permits negative tracking or the typeface needs optical correction.
• Prefer light/regular headings over bold headings.
• Use tabular numbers for numeric rows and comparisons.

Color

Base palette:

• light page: stone-50
• light surface: stone-100
• light border: stone-200
• dark page: stone-950
• dark surface: stone-900
• dark border: stone-800

Text hierarchy:

Primary
Secondary
Tertiary

Accent defaults:

• Swiss red: #C8102E
• cobalt: #003B8E
• golden: #F0B429
• forest: #2D6A4F

Pick one.

Layout Pattern

  
    
      
        Section
      
      
        Clear hierarchy
        Body copy stays narrow.
      
    
  

Preflight

Before calling the design done:

• Body text is 60ch or narrower.
• Only one accent color appears.
• Mobile falls back to one column without horizontal scroll.
• Text hierarchy uses opacity, not unrelated hues.
• Headings are not all bold.
• Buttons and links keep 44px touch targets.
• Every light color has an intentional dark-mode counterpart when dark mode exists.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: tommylower
• Source: tommylower/cortex
• License: MIT

Install and usage instructions live in the source repository linked above.