Nordic: Ruhiges SaaS-Designsystem

Web · Hell · Weich · SaaS · Produktivität

Nordic

Gedämpfte Blautöne, sanfte Grautöne und stille Zuversicht für Produktivitäts-Tools.

Nordic bringt skandinavische Zurückhaltung in die Software: fast weiße Seiten, ein gedämpftes Fjordblau für Aktionen, sanftes Meergrün und Honig als Sekundärtöne und Manrope in angenehmen Größen. Nichts schreit, deshalb bleiben lange Feature-Seiten und dichte Einstellungsscreens gleichermaßen augenschonend.

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 Nordic. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/nordic.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

background#FBFBFAoklch(0.988 0.001 106.423)
foreground#1D2125oklch(0.245 0.01 248.22)
card#FFFFFFoklch(1 0 0)
card-foreground#1D2125oklch(0.245 0.01 248.22)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1D2125oklch(0.245 0.01 248.22)
primary#3A5BA0oklch(0.481 0.118 263.376)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#EDF0F5oklch(0.954 0.007 260.732)
secondary-foreground#1D2125oklch(0.245 0.01 248.22)
muted#F1F2F4oklch(0.961 0.003 264.542)
muted-foreground#5C636Boklch(0.496 0.015 251.687)
accent#ECEEF2oklch(0.949 0.006 264.532)
accent-foreground#1D2125oklch(0.245 0.01 248.22)
destructive#B93A32oklch(0.533 0.165 27.691)
border#E2E5EAoklch(0.921 0.008 260.732)
input#D3D8DFoklch(0.88 0.011 256.7)
ring#3A5BA0oklch(0.481 0.118 263.376)
chart-1#3A5BA0oklch(0.481 0.118 263.376)
chart-2#5E9C8Foklch(0.647 0.068 179.163)
chart-3#C98A3Eoklch(0.683 0.119 68.299)
chart-4#9A6FB0oklch(0.61 0.107 313.712)
chart-5#C25E6Eoklch(0.607 0.129 11.672)

Dunkles Theme

background#131619oklch(0.198 0.008 248.212)
foreground#E9ECEFoklch(0.942 0.005 247.879)
card#191D21oklch(0.228 0.01 248.257)
card-foreground#E9ECEFoklch(0.942 0.005 247.879)
popover#191D21oklch(0.228 0.01 248.257)
popover-foreground#E9ECEFoklch(0.942 0.005 247.879)
primary#8EA9E0oklch(0.735 0.086 264.147)
primary-foreground#131619oklch(0.198 0.008 248.212)
secondary#22272Coklch(0.27 0.012 248.263)
secondary-foreground#E9ECEFoklch(0.942 0.005 247.879)
muted#1D2126oklch(0.246 0.011 254.046)
muted-foreground#959DA6oklch(0.692 0.016 251.217)
accent#242A30oklch(0.282 0.014 248.322)
accent-foreground#E9ECEFoklch(0.942 0.005 247.879)
destructive#F28A82oklch(0.743 0.128 25.246)
border#2A3036oklch(0.306 0.014 248.274)
input#333A41oklch(0.345 0.016 248.276)
ring#8EA9E0oklch(0.735 0.086 264.147)
chart-1#8EA9E0oklch(0.735 0.086 264.147)
chart-2#8CC7BAoklch(0.785 0.064 179.312)
chart-3#E6B46Eoklch(0.801 0.105 74.641)
chart-4#C3A2D6oklch(0.759 0.081 312.997)
chart-5#E6939Foklch(0.751 0.101 10.369)

Schriften

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

Schriftgrößen

display · 60/1.05 · -0.025emZwölf Boxkämpfer jagen Viktor
h1 · 40/1.1 · -0.02emZwölf Boxkämpfer jagen Viktor
h2 · 28/1.2 · -0.01emZwölf Boxkämpfer jagen Viktor
h3 · 20/1.3Zwölf Boxkämpfer jagen Viktor
body · 16/1.55Zwölf Boxkämpfer jagen Viktor
small · 13/1.45Zwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 8pxmd 10pxlg 12pxxl 16px

Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px

SchattenWeich, flach und breit, nur auf Karten und Sheets.

Layout

Maximale Breite: 1200px
Textbreite: 68ch
Spalten: 12
Spaltenabstand: 24px

Ideal für

SaaS für Produktivität und Zusammenarbeit
Tools für Notizen und Planung
Produkt-Marketing-Websites
Hilfecenter und Onboarding

Dos and Don’ts

Lass viel Weißraum um Screenshots.
Halte Icons dünn und einfarbig.
Stelle keine gesättigten Markenfarben neben die gedämpfte Palette.
Staple keine Schatten; eine weiche Stufe reicht.