# Swiss Design

> Opt-in Swiss International Style design system for clean editorial interfaces: grid discipline, grotesque typography, restrained color, generous whitespace, opacity hierarchy, and one accent color. Use only when the user explicitly asks for Swiss design, International Typographic Style, modernist editorial UI, grid-first composition, Helvetica-like typography, or this specific design system.

- **Type:** Skill
- **Install:** `agentstack add skill-tommylower-cortex-swiss-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tommylower](https://agentstack.voostack.com/s/tommylower)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tommylower](https://github.com/tommylower)
- **Source:** https://github.com/tommylower/cortex/tree/main/design/systems/swiss-design

## Install

```sh
agentstack add skill-tommylower-cortex-swiss-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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:

```css
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:

```html
Primary
Secondary
Tertiary
```

Accent defaults:

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

Pick one.

## Layout Pattern

```html

  
    
      
        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](https://github.com/tommylower)
- **Source:** [tommylower/cortex](https://github.com/tommylower/cortex)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-tommylower-cortex-swiss-design
- Seller: https://agentstack.voostack.com/s/tommylower
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.