skills.rest
The-Focus-AI
The-Focus-AIOFFICIAL
Explore all skills by this author →
WebsiteGitHub

swiss-design

Apply Swiss International Style design systems to web pages using Tailwind CSS.

Updated Jul 16, 2026
Search Tags:#typography#design system#tailwind css#dark mode#ui styling#responsive layout#swiss design
One-click install
npx skills add https://github.com/The-Focus-AI/walking-thoughts --skill swiss-design-the-focus-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiss-design
Source: https://github.com/The-Focus-AI/walking-thoughts/tree/main/.agents/skills/swiss-design
Command: npx skills add https://github.com/The-Focus-AI/walking-thoughts --skill swiss-design-the-focus-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Styling web pages with a coherent, disciplined visual system is hard: colors proliferate, headings get bold and heavy, body text runs too wide, and mobile layouts break. This Skill provides a complete Swiss International Style design system with concrete Tailwind CSS classes, so every styling decision follows consistent rules for typography, color, spacing, and responsive layout. ## Core Features & Use Cases - Complete design tokens: IBM Plex Sans typography scale, stone color palette with opacity-based hierarchy, single accent color system, and 8px-based spacing grid. - Component patterns: Paste-ready Tailwind markup for buttons, cards, navigation, forms, tables, badges, dividers, and hero sections in both light and dark mode. - Audit and migration workflow: Step-by-step checklist for converting an existing page to the system, including palette collapse, typography fixes, responsive breakpoints, and a pre-ship checklist. - Use Case: Ask the AI to restyle a landing page; it applies the 12-column grid, fluid type scale, stone palette with dark-mode variants, and one accent color, then verifies mobile behavior at 375px, 768px, and 1280px. ## Quick Start Restyle my landing page using the Swiss design system with IBM Plex Sans, the stone palette, and the default Swiss red accent.

Frequently Asked Questions about swiss-design

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

FAQPage Schema
How do I apply a Swiss design system with Tailwind CSS?▼

Load IBM Plex Sans from Google Fonts, use the stone palette for all backgrounds and text, apply a 12-column grid with 8px spacing units, and pick one accent color. The Skill provides paste-ready classes for typography, buttons, cards, forms, and navigation.

How do I create text hierarchy without multiple colors in CSS?▼

Use opacity modifiers on a single text color instead of different hues. Apply text-stone-900 for primary text, /70 for secondary, /40 for captions, and /20 for placeholders, swapping stone-900 for stone-50 in dark mode.

Does this design system support dark mode?▼

Yes, it uses Tailwind's media dark mode strategy so it respects the system preference automatically. Every color token has a paired dark: variant, and it requires setting color-scheme: light dark on the html element so scrollbars and form controls match.

What font does the Swiss International Style use on the web?▼

This system uses IBM Plex Sans from Google Fonts as the primary typeface, with Hanken Grotesk, Barlow, Host Grotesk, and DM Sans as fallbacks. Headings use font-light or font-normal weights, never bold.

Why does my dark mode page show light scrollbars and form controls?▼

The browser renders scrollbars and native inputs with its own defaults unless you declare color-scheme. Add color-scheme: light dark to the html element or a meta tag so native UI matches the dark stone-950 background.

When should I not use this Swiss design approach?▼

Avoid it when a project needs expressive, decorative, or multi-color branding, since the system enforces one accent color, rectilinear shapes, and restrained typography. It also defers accessibility and interaction behavior to the Vercel Web Interface Guidelines.

Related Skills

Explore More Design & Creative Skills→
pcatattackspcatattacks
14

design-system

Standardize UI components and styling with DaisyUI and Tailwind CDN.

Community
Intermediate
impact-initiativesimpact-initiatives

Web Interface Guidelines

Review web UI source files for Vercel Web Interface Guidelines compliance.

Official
Intermediate
langgeniuslanggenius

swiss-design

Applies Swiss International Style design system to web pages using Tailwind CSS.

Official
Intermediate
reason-machinesreason-machines
4

better-design-shadcn-themes

Install themed shadcn/ui components from 31 design systems via the shadcn CLI.

Official
Intermediate