skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

swiss-design

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

3|Updated Apr 20, 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/langgenius/due-date-hq-jwl --skill swiss-design-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiss-design
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/swiss-design
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill swiss-design-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Styling web pages consistently is hard: too many colors, bold headings, cramped spacing, and broken mobile layouts. This Skill provides a complete Swiss International Style design system with strict rules for typography, color, grid, and responsiveness so every page follows one coherent visual language. ## Core Features & Use Cases - Typography system: IBM Plex Sans with a defined type scale, light-weight headings, opacity-based hierarchy, and typographic details like curly quotes and tabular numerals. - Color and grid rules: Stone palette for light and dark mode, exactly one accent color per project, 8px spacing base, and a 12-column mobile-first grid. - Component patterns and audit checklist: Reference files with paste-ready Tailwind components (buttons, cards, forms, tables, nav), Tailwind v3/v4 configuration, and a pre-ship checklist for applying the system to existing pages. - Use Case: You have a landing page with mixed gray tones, bold headings, and a desktop-only layout. Ask the AI to apply Swiss design, and it collapses the palette to stone plus one accent, fixes the type scale, and makes the grid responsive from 320px to 1440px. ## Quick Start Apply the Swiss design system to my landing page using Tailwind CSS with 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 Swiss design style to a webpage with Tailwind CSS?▼

Use the stone color palette for backgrounds and text, IBM Plex Sans loaded from Google Fonts, light-weight headings, and a 12-column mobile-first grid. Add exactly one accent color such as Swiss red #C8102E and create hierarchy with opacity modifiers instead of extra hues.

What font and color palette does Swiss International Style use?▼

The primary font is IBM Plex Sans with fallbacks like Hanken Grotesk and Barlow. Colors come from the Tailwind stone scale, stone-50 to stone-950, paired with one accent color per project, defaulting to Swiss red #C8102E.

Does this design system support dark mode?▼

Yes, every color token has a paired dark variant using Tailwind's media strategy, which respects the system preference automatically. Light mode uses stone-50 backgrounds and stone-900 text, while dark mode swaps to stone-950 and stone-50 with identical opacity values.

Can I use more than one accent color in a Swiss design project?▼

No, the system allows exactly one accent color per project, used at full, 60, 20, or 10 percent opacity. If a second color feels necessary, use an opacity variation of the first accent instead of introducing a new hue.

Why should text hierarchy use opacity instead of different gray shades?▼

Opacity keeps text the same hue as the background relationship intact, so hierarchy survives dark mode swaps without retuning colors. Use text-stone-900 at 70 or 40 percent opacity rather than mid-scale values like stone-500.

What are the limitations of this styling skill?▼

It covers only visual styling: typography, color, grid, spacing, and components. It does not handle accessibility audits, form behavior, performance, or interaction quality, and it defers those concerns to the Vercel Web Interface Guidelines.

Related Skills

Explore More Design & Creative Skills→
GPTtangGPTtang
4

brand-guidelines

Apply Anthropic brand colors and typography to documents.

Community
Basic
markky21markky21

web-design-guidelines-validator

Validate React/HTML UI code for WCAG 2.1 AA accessibility compliance.

Community
Basic
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
bergsidebergside
2.3k

claymorphism

Standardize claymorphism UI patterns with token-based theming and WCAG 2.2 AA rules.

Official
Intermediate