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.