Swiss Design
This is a complete Tailwind-based design system that enforces classic Swiss International Style: grotesque typography (IBM Plex Sans with careful fallbacks), stone color palette, opacity-based hierarchy instead of color variations, and strict grid discipline. It's opinionated in the best way: one accent color per project, 60-character line lengths for body text, 8px spacing increments, and mobile-first responsive rules baked in. The typography section alone is worth it, with proper ellipses, curly quotes, tabular numerals, and text balancing. If you've ever wanted to make a UI look clean without overthinking it, or if terms like "grotesque fonts" and "generous whitespace" appeal to you, this gives you a complete playbook. It's not minimalist for minimalism's sake, it's structured restraint with clear rules.
- skills.sh installs
- 999
- GitHub stars
- 163
- last updated
- Aug 21, 2026
Install
$ npx -y skills add zeke/swiss-design-skill --skill swiss-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
Swiss Design System
A design system rooted in the Swiss International Style of the 1950s–60s: grotesque typography, rigorous grid, bold geometric forms, generous whitespace, and restrained color.
Six Principles
- Grid first. Every layout lives on a 12-column grid with an 8px base unit.
- Mobile first, always. Design for the smallest viewport first, then expand. Every layout must work at 320px and at 1440px. Use
sm:,md:,lg:Tailwind prefixes systematically. - Whitespace is structure. Generous padding and margins are not waste — they are the design.
- Opacity, not hue, creates hierarchy. Never introduce a second color to indicate text weight or importance. Use opacity.
- One accent. Each project gets exactly one accent color, used sparingly at multiple opacities.
- Narrow columns. Body text never exceeds
max-w-[60ch]. Wider columns hurt legibility.
Typography
Primary font: IBM Plex Sans (Google Fonts)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/zeke/swiss-design-skill
- Categories
- Frontend Development, Code Review & Quality, Design & UI/UX
- First seen
- Jun 3, 2026
Recommended
More Frontend Development
a11y-auditalirezarezvani/claude-skillsAccessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML cod998skills.sh installs
server-side-renderingpatternsdev/skillsTeaches server-side rendering (SSR) for React applications. Use when you need faster initial page loads, better SEO, or dynamic per-request HTML generation.997skills.sh installs
tailwindcss-developmentlaravel/boostAlways invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids992skills.sh installs
d3-vizchrisvoncsefalvay/claude-d3js-skillCreating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations987skills.sh installs
validating-sldsforcedotcom/sf-skillsAudit Lightning Web Components for SLDS compliance and produce a scored quality report. Runs the SLDS linter, analyzes CSS for theming hook usage and pairing, c987skills.sh installs