Swiss design

Skill tommylower/cortex/design/systems/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.From its SKILL.md

Install

npx -y skills add tommylower/cortex --skill swiss-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.5 KB, 820 tokens by cl100k_base, as published. Nobody here has run it

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:

<p class="text-stone-900 dark:text-stone-50">Primary</p>
<p class="text-stone-900/70 dark:text-stone-50/70">Secondary</p>
<p class="text-stone-900/40 dark:text-stone-50/40">Tertiary</p>

Accent defaults:

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

Pick one.

Layout Pattern

<section class="border-t border-stone-200 px-4 py-16 dark:border-stone-800 md:px-8 md:py-24 lg:py-32">
  <div class="mx-auto max-w-6xl">
    <div class="grid grid-cols-12 gap-4 md:gap-8">
      <div class="col-span-12 md:col-span-4">
        <p class="text-xs uppercase text-stone-900/40 dark:text-stone-50/40">Section</p>
      </div>
      <div class="col-span-12 md:col-span-8">
        <h2 class="text-4xl font-light text-stone-900 dark:text-stone-50">Clear hierarchy</h2>
        <p class="mt-6 max-w-[60ch] text-stone-900/70 dark:text-stone-50/70">Body copy stays narrow.</p>
      </div>
    </div>
  </div>
</section>

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.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design systems skills give in 820 tokens

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-07

Create a custom theme if neededin 54 of 528, across 10 files
Read the corresponding theme filein 54 of 528, across 10 files
Ask which theme to applyin 53 of 528, across 9 files
Show the theme showcasein 53 of 528, across 9 files
Maintain visual identity across all slidesin 50 of 528, across 6 files
Apply the specified colors and fontsin 47 of 528, across 3 files
Get explicit confirmationin 45 of 528, across 1 file
Generate a design system before codingin 19 of 528, across 6 files
Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
Check Python installation and install if missingin 17 of 528, across 4 files
Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

Use only when explicitly asked
Choose one accent color for the whole view
Use one text hue with opacity steps
Keep paragraphs at 60ch or less
Prefer light or regular headings over bold
Use tabular numbers for numeric rows

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.