swiss-minimal-design

Applies Swiss International Typographic Style principles to grid-driven, type-led web interface design.

Updated Aug 10, 2026
One-click install
npx skills add https://github.com/narr07/permadi --skill swiss-minimal-design-narr07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiss-minimal-design
Source: https://github.com/narr07/permadi/tree/main/.roo/skills/swiss-minimal-design
Command: npx skills add https://github.com/narr07/permadi --skill swiss-minimal-design-narr07

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing interfaces that feel rigorous, neutral, and premium through restraint is hard without a clear system — most attempts at "minimal" end up as generic SaaS styling with softened corners and decorative filler. This Skill provides a concrete Swiss / International Typographic Style lens with measured tokens, composition recipes, and real-world teardowns so the grid and typography do the work instead of ornament. ## Core Features & Use Cases - Style lens with hard rules: Enforces a strict modular grid, one neutral grotesque typeface, flush-left text, border-radius: 0, black/white base with one primary accent, and hierarchy from scale, weight, and position only. - Drop-in starter tokens: Ships CSS theme variables, a 12-column grid utility, a 4-step clamp() type ramp, and webfont guidance (platform grotesque stack or Inter/Neue Haas). - Measured reference teardowns: Includes case studies of swissted.com, Grilli Type, Lineto, and Edenspiekermann with extracted colors, fonts, and composition patterns. - Use Case: When a user asks for a "Swiss", "minimal", "modernist", or "grid system" look for a design studio, type foundry, editorial portfolio, or serious product marketing site, apply this lens on top of the awesome-frontend-design method to produce an objective, ornament-free layout. ## Quick Start Apply the swiss-minimal-design lens to redesign my portfolio landing page with a strict 12-column grid, one grotesque typeface, and a single red accent.

Frequently Asked Questions about swiss-minimal-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a Swiss-style minimal website?▼

Start with a strict modular grid (e.g., 12 columns) and a baseline spacing unit, use one neutral grotesque at 2-3 weights with a clean type scale, set everything flush-left, and limit color to black on white plus one saturated accent. Remove all shadows, gradients, and rounded corners.

What fonts work for International Typographic Style web design?▼

The most authentic choice is no webfont at all — use the platform grotesque stack (Helvetica Neue, Arial, sans-serif). If you must load a font, use Inter or Neue Haas as a single family with 2-3 weights; decorative or display fonts break the neutrality.

Can I use rounded corners or shadows in Swiss minimal design?▼

No. Swiss style requires border-radius: 0 and forbids shadows, gradients, and decorative borders. Hierarchy must come from scale, weight, and grid position; softening these rules turns the design into generic SaaS styling.

How many accent colors should a Swiss-style layout use?▼

Use one, at most two, flat saturated primary accents — such as signal red #e8341c or electric green #30FF00 — on a black-and-white base. Color is applied decisively and sparingly, never decoratively or as tints.

When should I not use the Swiss minimal design lens?▼

Avoid it when the brand needs warmth, playfulness, or rich decoration — Swiss reads as austere and objective. It fits design studios, type foundries, editorial portfolios, and serious product marketing, not friendly consumer or entertainment products.