Swiss Minimal
A Swiss and Bauhaus design kit for Astro and Tailwind 4: type-led, flat color, thick rules and one typeface, with a demo site that uses every component.
Visit site (opens in a new tab)Source on GitHub (opens in a new tab)Started October 2026
Swiss Minimal grew out of the look of Dial Hopping. It’s meant for any kind of site, whether that’s a portfolio, a blog, a directory, a nonprofit or a product site, and nothing in it assumes a subject.
The rules
- Type does the work. Big bold headings, small quiet labels, and nothing decorative.
- Flat. No shadows, gradients, rounded corners or glass in the interface.
- One typeface. Overused Grotesk carries everything except code, which is set in Source Code Pro.
- Thick rule, thin rule. A 2px rule starts each section, and a 1px rule separates rows.
- Color is rare. Each site picks one accent, either vermilion or verdigris, and uses it for the one thing that matters on a screen.
What’s in the kit
The kit is a folder you copy into an Astro project, alongside its fonts. It has the theme tokens in CSS, a set of Astro components (hero, slide-down menu, drawer, post list, dialog and more), and small plain JavaScript files for their behavior, with no React needed. Layout is done with Tailwind utilities, and the components use the kit’s own classes.
Built for agents too
The repository includes notes for AI agents as well as for people, covering how to change the kit, start a new site with it, or restyle an existing site. DESIGN.md holds the rules, COMPONENTS.md documents each component, and TOOLING.md has recipes for accessibility tests and date-tagged releases.
The demo site uses every component, and its tests scan each page with axe in both themes and both accents against WCAG 2.1 AA.
Browse
