Swiss: Minimalistisches Raster-Designsystem

Web · Hell · Minimalistisch · Kräftig · Portfolio

Swiss

Schwarz, Weiß und ein Signalrot auf einem strengen Raster.

Swiss folgt dem Internationalen Typografischen Stil: große Grotesk, ein striktes Raster, eckige Ecken und viel Weiß. Rot ist die einzige Farbe und taucht nur an wenigen, präzisen Stellen auf.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

Neu in 2026Planen, ausliefern und messen an einem Ort

Ein ruhiger Workspace für kleine Teams. Jede Zahl, die du brauchst, und nichts, was du nicht brauchst.

Kostenlos startenDemo buchen

Aktive Nutzer12,480

Umsatz$48.2k

Bindungsrate86%

Lade dein Team einGeschäftliche E-Maildu@firma.deRolleBearbeiter ▾Einladung senden

Letzte BestellungenKundeStatusBetragAda ParkBezahlt$1,240Lukas WeberAusstehend$380Mei ChenErstattet$96

In deinem Projekt verwenden

Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.

Dieses Projekt verwendet das Designsystem Swiss. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/swiss.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

background#FFFFFFoklch(1 0 0)
foreground#0A0A0Aoklch(0.145 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#0A0A0Aoklch(0.145 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0A0A0Aoklch(0.145 0 0)
primary#D70015oklch(0.553 0.225 27.269)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#F0F0F0oklch(0.955 0 0)
secondary-foreground#0A0A0Aoklch(0.145 0 0)
muted#F0F0F0oklch(0.955 0 0)
muted-foreground#595959oklch(0.464 0 0)
accent#EBEBEBoklch(0.94 0 0)
accent-foreground#0A0A0Aoklch(0.145 0 0)
destructive#B3000Foklch(0.482 0.197 27.345)
border#D4D4D4oklch(0.87 0 0)
input#BDBDBDoklch(0.798 0 0)
ring#D70015oklch(0.553 0.225 27.269)
chart-1#D70015oklch(0.553 0.225 27.269)
chart-2#0A0A0Aoklch(0.145 0 0)
chart-3#7A7A7Aoklch(0.58 0 0)
chart-4#1F4FD1oklch(0.484 0.207 264.286)
chart-5#E3A100oklch(0.753 0.156 79.154)

Dunkles Theme

background#0A0A0Aoklch(0.145 0 0)
foreground#F5F5F5oklch(0.97 0 0)
card#121212oklch(0.182 0 0)
card-foreground#F5F5F5oklch(0.97 0 0)
popover#121212oklch(0.182 0 0)
popover-foreground#F5F5F5oklch(0.97 0 0)
primary#FF3341oklch(0.65 0.236 23.908)
primary-foreground#0A0A0Aoklch(0.145 0 0)
secondary#1C1C1Coklch(0.226 0 0)
secondary-foreground#F5F5F5oklch(0.97 0 0)
muted#1A1A1Aoklch(0.218 0 0)
muted-foreground#A3A3A3oklch(0.715 0 0)
accent#222222oklch(0.252 0 0)
accent-foreground#F5F5F5oklch(0.97 0 0)
destructive#FF5A5Foklch(0.689 0.2 22.384)
border#2E2E2Eoklch(0.301 0 0)
input#3A3A3Aoklch(0.348 0 0)
ring#FF3341oklch(0.65 0.236 23.908)
chart-1#FF3341oklch(0.65 0.236 23.908)
chart-2#F5F5F5oklch(0.97 0 0)
chart-3#8A8A8Aoklch(0.633 0 0)
chart-4#5C85FFoklch(0.649 0.187 267.126)
chart-5#FFC02Eoklch(0.843 0.163 82.698)

Schriften

Überschriften: Archivo · 700
Fließtext: Archivo · 400
Monospace: JetBrains Mono

Schriftgrößen

display · 88/0.95 · -0.035emZwölf Boxkämpfer jagen Viktor
h1 · 56/1 · -0.025emZwölf Boxkämpfer jagen Viktor
h2 · 32/1.1 · -0.015emZwölf Boxkämpfer jagen Viktor
h3 · 20/1.25Zwölf Boxkämpfer jagen Viktor
body · 16/1.5Zwölf Boxkämpfer jagen Viktor
small · 13/1.4 · 0.01emZwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 0pxmd 0pxlg 0pxxl 4px

Abständexs 8pxsm 16pxmd 32pxlg 48pxxl 96px

SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.

Layout

Maximale Breite: 1440px
Textbreite: 60ch
Spalten: 12
Spaltenabstand: 16px

Ideal für

Agenturen und Studios
Architektur und Events
Portfolios
Entwickler-Doku mit Charakter

Dos and Don’ts

Mach die Überschrift zum größten Element der Seite.
Lass im Raster bewusst Spalten leer.
Runde keine Ecken ab und füge keine Schatten hinzu.
Verwende Rot nicht zur Dekoration.