Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Swiss International Style with Tailwind v1.0.0

Use this resource to style a web page in the Swiss typographic style

New

  • 595 downloads
  • 114 likes
  • 248 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install swiss-international-style

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent restyles a page or builds a new one with Tailwind CSS around six principles: grid first, mobile first, whitespace as structure, hierarchy through opacity, one accent, narrow columns. You get a restrained, readable and consistent page with dark mode, focus states and careful typography (ellipses, curly quotes, tabular numbers).

Mostly picked by

Updated November 2, 2026

Restrained web page in the Swiss typographic style: light grotesque type, 12-column grid, stone background and a single red accent.

Details

Works in
Install guides
Generates with
Your agent's model
Uses
  • Tailwind CSS
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: principles, type scale, stone palette, grid, responsive rules, dark mode and pitfalls
  • references/design-system.md: full color token table and CSS variables
  • references/components.md: buttons, cards, navigation, forms and badges in Tailwind
  • references/tailwind-config.md and references/prompting.md: a paste-ready configuration and an audit checklist for an existing page

Good fit for

  • Giving a showcase site or landing page a restrained, editorial identity
  • Cleaning up a busy interface while keeping a single accent color
  • Setting a consistent design system before building out several pages

Not for

  • A colorful, playful or heavily illustrated look
  • A page that does not use Tailwind CSS
  • A full accessibility audit: the skill covers the visual side only

Tags

  • swiss design
  • tailwind
  • typography
  • grid
  • dark mode

About

You say

"Apply the Swiss style to my home page, with cobalt as the accent color, and check the mobile layout."

Restrained web page in the Swiss typographic style: light grotesque type, 12-column grid, stone background and a single red accent.

Skill published by zeke under the MIT license.

Show more

Prerequisites

You bring
The page or web project to style and An accent color, if you do not want the default red
Dependencies
Tailwind CSS

How to use it

  1. Install the skill in your agent's skills folder.
  2. Name the page to restyle and, if you like, the accent to use (red, cobalt, golden or forest).
  3. Review the result at 320 px and 1440 px, then ask for adjustments.

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/components.md11.3 KB
  • references/design-system.md8 KB
  • references/prompting.md6 KB
  • references/tailwind-config.md3.3 KB
  • SKILL.md13 KB

Origin and licence

Modified by PalateKit

Author
zeke
Source
github.com/zeke/swiss-design-skill/tree/285009f3dc4ba311f59bb757973274de2c9446c3/swiss-design
Licence
MIT

Notice

Version modifiée de « swiss-design » (zeke, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Does the skill need another tool?

No. It points to Vercel's interface guidelines for accessibility, but only as an optional complement. It works with its own files.

Can I change the font or the accent color?

Yes. The skill offers a fallback font chain and four accents. Ask the agent for another one, keeping a single accent per project.