Imported from curiositech/some_claude_skills (.claude/skills/swiss-modern-web-designer/SKILL.md). Install upstream with npx skills add curiositech/some_claude_skills --skill swiss-modern-web-designer. Copyright stays with the author.

Swiss Modern Web Designer

Creates modern 2026 web applications with authentic Swiss International Typographic Style. Not recreating 1950s poster design—extrapolating Müller-Brockmann's mathematical grid principles to modern digital contexts: SaaS products, developer tools, fintech platforms, and enterprise software that communicates through clarity, not decoration.

When to Use

Use for:

• SaaS dashboards and developer tools (Stripe, Linear, Vercel style)
• Fintech and enterprise platforms requiring trust and precision
• Documentation and content-heavy sites needing clear hierarchy
• Landing pages that sell through clarity, not flash
• Design systems for B2B products
• API documentation and technical portals
• Marketing sites for professional/technical audiences

Do NOT use for:

• Bold/raw aesthetic → use neobrutalist-web-designer (hard shadows, thick borders)
• Windows retro → use windows-3-1-web-designer or windows-95-web-designer
• Glassmorphism/blur → use vaporwave-glassomorphic-ui-designer
• Decorative/maximalist → use web-design-expert with trend guidance
• Playful/friendly → NOT Swiss (consider claymorphism or similar)

Swiss Modern vs Similar Styles

Core Design System

The Four Pillars of Swiss Modern Web Design

mindmap
  root((Swiss Modern))
    Grid
      Mathematical precision
      12-column modular
      Baseline alignment
      Asymmetric layouts
    Typography
      Strict hierarchy
      Scale ratios
      Neo-grotesque sans
      Whitespace as punctuation
    Color
      Restrained palette
      Black + white + 1 accent
      Functional color only
      High contrast text
    Space
      Generous margins
      Calculated gutters
      Content breathing room
      Negative space as element

Color Palette

Swiss Modern uses extreme restraint. The palette is not decorative—it is functional.

Dark mode palette:

Color Rules:

• ✅ Maximum 3 colors: black, white, one accent
• ✅ Use gray scale for information hierarchy
• ✅ Color communicates function, never decoration
• ✅ Accent color reserved for actionable elements only
• ❌ NO gradients on UI elements (flat, solid fills)
• ❌ NO decorative color blocks without content purpose
• ❌ NO color as primary differentiator between content sections

The Sacred Grid

THE defining Swiss element — mathematical, modular, visible in the output:

.swiss-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--swiss-gutter);
  max-width: var(--swiss-max-width);
  margin: 0 auto;
  padding: 0 var(--swiss-margin);
}

/* Content spanning patterns */
.swiss-col-full   { grid-column: 1 / -1; }
.swiss-col-wide   { grid-column: 2 / 12; }   /* 10 of 12 */
.swiss-col-content{ grid-column: 3 / 11; }   /* 8 of 12 — reading width */
.swiss-col-narrow { grid-column: 4 / 10; }   /* 6 of 12 — focused content */
.swiss-col-half-l { grid-column: 1 / 7; }    /* Left half */
.swiss-col-half-r { grid-column: 7 / -1; }   /* Right half */
.swiss-col-third  { grid-column: span 4; }   /* One third */
.swiss-col-quarter{ grid-column: span 3; }   /* One quarter */

/* Asymmetric layout (the Swiss signature) */
.swiss-col-sidebar { grid-column: 1 / 4; }   /* 3 of 12 */
.swiss-col-main   { grid-column: 5 / -1; }   /* 8 of 12, column 4 is gutter */

Typography System

Typography is not a component of Swiss design — it IS Swiss design.

Font stacks (free, professional quality):

:root {
  /* Primary: Inter — the modern Helvetica for screen */
  --font-swiss-display: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --font-swiss-heading: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --font-swiss-body: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --font-swiss-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

Alternative stacks for differentiation:

Type scale (Perfect Fourth — ratio 1.333):

:root {
  --swiss-text-xs: 0.75rem;     /* 12px — captions, labels */
  --swiss-text-sm: 0.875rem;    /* 14px — secondary text */
  --swiss-text-base: 1rem;      /* 16px — body */
  --swiss-text-lg: 1.125rem;    /* 18px — lead paragraphs */
  --swiss-text-xl: 1.333rem;    /* ~21px — H4 */
  --swiss-text-2xl: 1.777rem;   /* ~28px — H3 */
  --swiss-text-3xl: 2.369rem;   /* ~38px — H2 */
  --swiss-text-4xl: 3.157rem;   /* ~50px — H1 */
  --swiss-text-5xl: 4.209rem;   /* ~67px — Display */
}

Spacing Scale (8px base, mathematical)

:root {
  --swiss-space-0: 0;
  --swiss-space-1: 0.25rem;   /* 4px */
  --swiss-space-2: 0.5rem;    /* 8px — base unit */
  --swiss-space-3: 0.75rem;   /* 12px */
  --swiss-space-4: 1rem;      /* 16px */
  --swiss-space-5: 1.5rem;    /* 24px */
  --swiss-space-6: 2rem;      /* 32px */
  --swiss-space-7: 2.5rem;    /* 40px */
  --swiss-space-8: 3rem;      /* 48px */
  --swiss-space-9: 4rem;      /* 64px */
  --swiss-space-10: 5rem;     /* 80px */
  --swiss-space-11: 6rem;     /* 96px */
  --swiss-space-12: 8rem;     /* 128px */

  /* Semantic spacing */
  --swiss-gutter: 1.5rem;          /* 24px — grid gutter */
  --swiss-margin: 2rem;            /* 32px — page margin */
  --swiss-section-gap: 6rem;       /* 96px — between sections */
  --swiss-max-width: 1200px;       /* Content max width */
  --swiss-reading-width: 65ch;     /* Optimal line length */
}

Modern Extrapolations

SaaS Dashboard: The Linear Paradigm

Swiss Modern for SaaS is information clarity through grid discipline:

• Hairline dividers (1px), not heavy borders
• Typographic hierarchy carries structure (no boxes needed)
• Numbers oversized; labels in small-caps uppercase
• Monochromatic with accent only on actionable elements
• Ample whitespace between data groups

Landing Page: Selling Through Clarity

• Massive whitespace above and below hero text (96-128px)
• One primary CTA, one text-link secondary
• Headline dominates through size (clamp 2.5-4.2rem), not color
• Social proof is understated (grayscale logos at 40% opacity)
• Content width narrower than grid (8 of 12 columns)

See references/page-templates.md for full wireframes and CSS for dashboards, landing pages, documentation sites, pricing pages, about pages, and blog layouts.

Responsive: Content Reflow, Not Redesign

See references/grid-system.md for full responsive CSS implementation.

Component Patterns

Swiss Modern components share these traits: hairline borders (1px), subtle shadows, generous padding, and minimal hover states. For complete CSS implementations of all components, consult references/component-library.md.

Key component rules:

• Buttons: Solid fill (primary) or hairline border (secondary), 6px radius, 150ms transitions
• Cards: 1px border, 8px radius, subtle shadow on hover — never hard offset shadows
• Navigation: Hairline bottom border, text-sm links, weight change for active state
• Inputs: 1px border, accent color + 3px ring on focus, uppercase small labels
• Tables: 2px solid header border, 1px row borders, uppercase small-caps column headers
• Modals: xl shadow, 12px radius, scale-in animation at 300ms

Anti-Patterns

Anti-Pattern: Decorative Color

Novice thinking: "Each section needs its own background color for visual interest" Reality: Swiss Modern uses whitespace and typography to create hierarchy, not color blocks Instead: Use a single background. Let type size, weight, and spacing do the work.

Anti-Pattern: Heavy Borders and Shadows

Novice thinking: border: 2px solid #000; box-shadow: 4px 4px 0 #000 Reality: That's neobrutalism. Swiss Modern uses hairline borders (1px) or none at all. Instead: border: 1px solid var(--swiss-silver) or rely on whitespace alone

Anti-Pattern: Tight Spacing

Novice thinking: "Whitespace is wasted space—pack the information in" Reality: Whitespace IS the design. Müller-Brockmann's grids were 40%+ empty space. Instead: Double your margins. Then add more. If it feels wasteful, it's getting close.

Anti-Pattern: Multiple Typefaces

Novice thinking: "Display font for headers, body font for text, accent font for callouts" Reality: Swiss design uses ONE typeface family. Hierarchy comes from size and weight, not font switching. Instead: Inter at 700 for heads, 400 for body, 600 for UI. One font, many expressions.

Anti-Pattern: Rounded Everything

Novice thinking: border-radius: 16px for a friendly feel Reality: Swiss Modern is precise, not friendly. Small radii (4-8px) or none. Instead: border-radius: 6px for subtle softening, 0 for austere precision

Anti-Pattern: Busy Hover States

Novice thinking: Scale transforms, color shifts, shadow additions on hover Reality: Swiss hover states are subtle—a color tint, an underline, a border change Instead: opacity: 0.8 or background: var(--swiss-mist) — minimal, purposeful

Anti-Pattern: Gradient Text or Backgrounds

Novice thinking: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) Reality: Gradients are decoration. Swiss Modern treats color as information. Instead: Solid colors. One accent. Black text on white background. Full stop.

Quick Decision Tree

Is it a container element?
├── Card? → 1px border or none, generous padding, no shadow
├── Section? → No border, whitespace separation (96px+ gap)
├── Modal? → Subtle shadow, 1px border, centered
└── Nav? → Bottom border or floating, no background color

Is it interactive?
├── Button? → Solid fill or hairline border, subtle hover
├── Link? → Accent color, underline on hover
├── Input? → 1px border, accent ring on focus
└── Toggle? → Minimal, accent color when active

Is it typography?
├── Display? → Massive size (3.5rem+), tight tracking, max contrast
├── Heading? → Bold weight, negative tracking, clear hierarchy
├── Body? → 16px base, 1.6 line-height, 65ch max width
├── Label? → Small, uppercase, wide tracking, muted color
└── Code? → Monospace, subtle background, smaller size

Is it layout?
├── Full page? → 12-column grid, max-width container, auto margins
├── Content area? → 8 of 12 columns (reading width)
├── Sidebar layout? → 3/9 or 4/8 split, gutter column between
└── Feature grid? → Even columns, generous gutter, aligned baseline

CSS Variables Template

Copy-paste the complete variable system from references/component-library.md. The essentials:

:root {
  /* Color */
  --swiss-black: #000000;  --swiss-ink: #1a1a1a;
  --swiss-charcoal: #404040;  --swiss-stone: #6b7280;
  --swiss-silver: #d1d5db;  --swiss-mist: #f3f4f6;
  --swiss-snow: #f9fafb;  --swiss-white: #ffffff;
  --swiss-accent: #0066ff;

  /* Typography: Inter, one family */
  --font-swiss: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --font-swiss-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Scale: Perfect Fourth (1.333) */
  --swiss-text-base: 1rem;  --swiss-text-4xl: 3.157rem;

  /* Layout */
  --swiss-gutter: 1.5rem;  --swiss-max-width: 1200px;
  --swiss-reading-width: 65ch;  --swiss-section-gap: 6rem;

  /* Motion */
  --swiss-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --swiss-duration-normal: 150ms;
}

Full variables including dark mode: see references/component-library.md and references/dark-mode.md.

The Quick Test

If your component has:

• ❌ More than 3 colors in the palette → NOT Swiss Modern
• ❌ Borders thicker than 1px → NOT Swiss Modern (likely neobrutalism)
• ❌ Hard offset shadows → NOT Swiss Modern (that's neobrutalism)
• ❌ Multiple typeface families → NOT Swiss Modern
• ❌ Decorative elements without function → NOT Swiss Modern
• ❌ Tight, cramped spacing → NOT Swiss Modern
• ❌ Gradients on UI elements → NOT Swiss Modern

It should have:

• ✅ Mathematical grid alignment (content snaps to columns)
• ✅ Strict typographic hierarchy (clear size/weight steps)
• ✅ Generous, calculated whitespace (40%+ of viewport)
• ✅ One typeface family, many weights
• ✅ Restrained color (black + white + one accent)
• ✅ Hairline borders or whitespace separation
• ✅ Subtle, purposeful hover states
• ✅ Content-first, decoration-absent

Accessibility

Swiss Modern is inherently accessibility-friendly when done right:

1. High contrast — Black on white exceeds WCAG AAA (21:1 ratio)
2. Clear hierarchy — Size and weight steps are unambiguous
3. Readable measure — 65ch line length matches reading research
4. Focus states — Accent color ring provides clear focus indication
5. Reduced motion — Subtle transitions degrade gracefully

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.swiss-button:focus-visible {
  outline: 2px solid var(--swiss-accent);
  outline-offset: 2px;
}

.swiss-input:focus-visible {
  border-color: var(--swiss-accent);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

References

• references/component-library.md — Full CSS for all Swiss Modern components (tables, modals, badges, etc.)
• references/grid-system.md — Müller-Brockmann grid theory translated to CSS Grid, with responsive patterns
• references/typography-guide.md — Deep dive on type scales, font pairings, OpenType features, and variable fonts
• references/page-templates.md — Complete page layouts (landing, dashboard, docs, pricing, about)
• references/dark-mode.md — Swiss Modern dark mode: palette inversion, contrast ratios, and implementation

Pairs With

• typography-expert — For advanced type pairing and OpenType feature guidance
• design-system-creator — For generating full three-tier token architectures
• design-system-generator — Generate Swiss Modern tokens via swiss-modern trend preset
• web-design-expert — For brand direction alongside Swiss principles
• color-contrast-auditor — Verify accessibility with the restrained palette

Sources

Design principles rooted in:

• Josef Müller-Brockmann, Grid Systems in Graphic Design (1981)
• Emil Ruder, Typographie (1967)
• Jan Tschichold, The New Typography (1928)
• Massimo Vignelli, The Vignelli Canon (2010)
• Modern implementations: Stripe.com, Linear.app, Vercel.com, Resend.com