Design and implement Swiss modern websites and product web apps using International Typographic Style: strict grids, typography-led hierarchy, asymmetrical composition, disciplined whitespace, restrained color, editorial clarity, and visual QA. Use for SaaS marketing, portfolios, product pages, documentation, dashboards, control planes, design systems, and demanding web-app rehab. NOT for neobrutalism, skeuomorphic UI, glassmorphism, retro desktop aesthetics, maximalist collage systems, or illustration-first playful brands.
Instrucciones de origen · Vista previa de solo lectura
name
swiss-modern-website-design
description
Design and implement Swiss modern websites and product web apps using International Typographic Style: strict grids, typography-led hierarchy, asymmetrical composition, disciplined whitespace, restrained color, editorial clarity, and visual QA. Use for SaaS marketing, portfolios, product pages, documentation, dashboards, control planes, design systems, and demanding web-app rehab. NOT for neobrutalism, skeuomorphic UI, glassmorphism, retro desktop aesthetics, maximalist collage systems, or illustration-first playful brands.
[{"skill":"web-design-expert","reason":"Apply broader web strategy around the Swiss-modern visual system"},{"skill":"design-system-generator","reason":"Turn the visual direction into tokenized implementation"},{"skill":"color-contrast-auditor","reason":"Keep restrained palettes readable and compliant"},{"skill":"mobile-ux-optimizer","reason":"Preserve Swiss clarity across smaller screens"}]
Swiss Modern Website Design
This bundle is intentionally mirrored under .codex/skills, .agents/skills, and .claude/skills in this repo.
Treat the content as one skill with multiple runtime mirrors, and keep the mirrors identical.
Use this skill when the right answer is not "minimal" in the generic sense, but typography-first, grid-disciplined, and compositionally exact.
Use templates/swiss-modern-tokens.css and templates/swiss-modern-layout.tsx as a starting system.
Decision Tree
flowchart TD
A["Incoming design request"] --> B{"Primary goal?"}
B -->|"clarity, authority, editorial precision"| C["Swiss-modern is a strong fit"]
B -->|"personality through texture, humor, nostalgia"| D["Swiss-modern may be partial only"]
B -->|"visual chaos, collectible energy, playful maximalism"| E["Do not force Swiss-modern"]
C --> F{"Content density?"}
F -->|"high"| G["Prioritize measure, rhythm, baseline spacing, table and form discipline"]
F -->|"medium"| H["Use poster-like hierarchy with tighter module control"]
F -->|"low"| I["Use sparse composition, but keep grid tension and strong type"]
C --> J{"Existing UI or net-new?"}
J -->|"existing"| K["Audit current fonts, radii, shadows, color count, width discipline"]
J -->|"net-new"| L["Start with tokens, grid, and type scale before components"]
Core Workflow
1. Establish style fit
Swiss-modern is appropriate when the product should feel:
intelligent
calm
exact
editorial
premium through restraint rather than decoration
Swiss-modern is a poor fit when the request depends on:
cartoon warmth
heavy skeuomorphism
novelty motion as primary differentiation
nostalgic OS metaphors
collage, sticker, or scrapbook energy
Read references/swiss-modern-principles.md when the stylistic boundary is unclear.
2. Lock the structural system before styling components
Do not start with hero gradients, card chrome, or button polish.
Set these in order:
content width strategy
column system
spacing cadence
type scale
alignment rules
accent-color policy
Read references/typography-and-grids.md for concrete web numbers and ratios.
3. Use preprocessing before redesigning an existing UI
That audit is intentionally heuristic. It catches the failure modes that most often break Swiss-modern execution:
too many font families
too many border radii
shadow-heavy UI
noisy palette spread
lack of width discipline
4. Choose the correct implementation depth
Use references/frontend-implementation.md when the user wants:
React, Next.js, or Tailwind implementation
a refactor plan for an existing site
a token system or CSS variable layer
practical rules for responsiveness without losing the grid
Use references/component-patterns.md when the user wants:
hero sections
navigation
pricing blocks
feature grids
forms
editorial sections
Use references/research-notes.md when the user wants justification, named source anchors, or historical grounding for why a Swiss-modern recommendation is defensible.
5. Build from templates, then specialize
Start from:
templates/swiss-modern-design-brief.md
templates/swiss-modern-tokens.css
templates/swiss-modern-layout.tsx
Do not reinvent the spacing system or type scale unless the brief demands it.
For maintenance or release checks, run:
bash scripts/validate_skill_bundle.sh
Design Rules That Matter
Typography leads
The headline is the primary visual engine.
A layout that works only because of cards, gradients, or illustrations is usually not Swiss-modern enough.
Prefer one primary sans family and one optional supporting family at most.
The grid must be visible in the results, not merely declared
Modules should align cleanly across sections.
Misaligned cards, drifting text blocks, and arbitrary max-widths destroy the style quickly.
Asymmetry is allowed only when it still feels measured.
White space is structural, not decorative
Space should clarify grouping and sequence.
Empty space must create pressure and direction, not dead air.
Color is restrained
Use neutrals as the body of the system.
Allow one active accent and one semantic support accent if necessary.
Avoid rainbow dashboards and multiple competing brand hues.
Motion is sparse
Use motion to reinforce reading order or state change.
Symptoms: endless pale gray, weak hierarchy, every section looks equally important Cause: confusing restraint with low contrast and low emphasis Fix: strengthen type scale, reduce palette further, increase black-to-white contrast, introduce one decisive accent
2. Grid In Name Only
Symptoms: arbitrary widths, inconsistent gutters, cards that do not snap to any rhythm Cause: using "clean" aesthetics without structural math Fix: define a real column system and spacing cadence first; refactor every major section to it
3. Poster Without Product Clarity
Symptoms: giant type and empty space, but unclear CTA sequence or feature explanation Cause: copying Swiss posters rather than adapting Swiss logic to interface goals Fix: preserve poster-like hierarchy while restoring product narrative, affordances, and interaction clarity
4. Accent Sprawl
Symptoms: red, lime, blue, amber, and violet all competing in the same layout Cause: importing dashboard semantics or marketing leftovers without palette discipline Fix: choose one accent family, push everything else into neutral or semantic-only roles
5. Soft UI Drift
Symptoms: big blurs, soft glass cards, excessive radius, dreamy gradients Cause: mixing current UI trend language with Swiss-modern structure Fix: remove blur-heavy chrome, tighten radii, flatten decorative depth, restore typographic authority
Worked Examples
Example 1: B2B AI landing page
Use Swiss-modern when the company wants to feel exact, credible, and quietly advanced.
Large typographic hero with short declarative copy
12-column desktop grid, 4-column tablet, 2-column mobile rhythm
one acid-lime or signal-red accent against neutral ink and paper
proof blocks aligned to the same modules as the hero, not floating cards
Example 2: Designer portfolio
Use Swiss-modern when the portfolio should feel editorial rather than expressive-chaotic.
project index driven by typography and spacing, not thumbnails first
a strict vertical rhythm for case-study sections
captions, metadata, and image placements aligned to one system
Example 3: Product dashboard refresh
Use Swiss-modern partially.
keep dense information architecture
remove ornamental card nesting and reduce visual chrome
tighten the type scale and establish hard alignment edges
use accent only for active state and critical highlights
Reference Files
references/swiss-modern-principles.md
Read for historical grounding, shibboleths, and anti-pattern detection.
references/typography-and-grids.md
Read for measure, leading, type scale, spacing cadence, and responsive grid decisions.
references/component-patterns.md
Read when building or critiquing actual site sections and components.
references/frontend-implementation.md
Read when translating the style into Tailwind, CSS variables, React, or a refactor plan.
references/research-notes.md
Read when the user wants historical grounding, durable principles, or justification for the style rules.
Quality Gates
The page can be described through alignment, measure, and hierarchy before color or motion.
One primary type family does most of the work.
Accent usage is scarce and intentional.
Section widths and gutters follow a repeatable rule.
Body text remains comfortably readable on both desktop and mobile.
Contrast is strong enough to avoid "premium but unreadable" failure.
Cards, borders, shadows, and radii do not overpower the typography.
Responsive collapse preserves hierarchy instead of stacking everything into sameness.
The result feels calmer and more exact after simplification, not emptier.
Activation Tests
Positive queries
"Design a Swiss modern landing page for an AI workflow startup."
"Refactor this marketing site to feel like International Typographic Style."
"Give me a typography-first website system with strict grids and restrained color."
"Make this portfolio feel editorial, asymmetrical, and Swiss."
"Create a Swiss-style design system for a documentation-heavy product."
Negative queries
"Make this site feel playful like a sticker collage."
"Turn this dashboard into glassmorphism with soft neon blur."
"Give me a nostalgic Windows 95 aesthetic."
"I want a maximalist Y2K fashion homepage with layered textures."
"Design a cartoonish kids app with rounded bubbly illustrations."
Not For
Do not use this skill when the user clearly wants:
neobrutalism
vaporwave or retro desktop styling
highly illustrative brand worlds
skeuomorphic product metaphors
ornamental motion or cinematic web experiments as the main point
