swiss-design

Build layouts on a 12-column modular grid with an 8px base spacing unit, use flush-left grotesque typography, and limit hierarchy to three levels. Establish contrast through scale, weight, and opacity rather than multiple colors, and keep body text within 60 characters per line.

Swiss International Style is a 1950s design movement emphasizing objective communication through mathematical grids, grotesque typefaces, generous whitespace, and a single accent color. On the web it translates to grid-aligned layouts, hairline dividers, and typography-driven hierarchy without decoration.

Yes, the specification is framework-agnostic and works with plain CSS, UnoCSS, Tailwind, or any utility library. It defines universal tokens like CSS custom properties for surfaces, ink colors, and signal accents that map to any styling approach.

Run the Grayscale Test by applying filter: grayscale(1) to check whether priority survives without color, then use the Squint Test by defocusing your vision to confirm the primary message dominates. If hierarchy collapses, fix it with scale, weight, and spacing before adding color.

Avoid gradient headline text, nested cards, floating blur orbs, heavy drop shadows, centered long paragraphs, and emoji decorations. Replace them with solid high-contrast type, hairline 1px borders, flat surfaces, and left-aligned text constrained to narrow reading columns.