Harbor: Enterprise-B2B-Designsystem

Web · Hell · Minimalistisch · SaaS

Harbor

Marineblau, Weißraum und verlässliche Struktur für seriöse B2B-Produkte.

Harbor wirkt verlässlich, ohne langweilig zu sein: eine kühle blaugraue Seite, Marineblau für die Hauptaktion, ein leuchtendes Blau für Fokus und Daten und Plus Jakarta Sans für eine moderne, aber nüchterne Stimme. Lange Feature-Seiten, Vergleichstabellen und Sicherheitsabschnitte fügen sich mühelos ein.

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

Tokens

Farben

Helles Theme

background#F6F8FBoklch(0.978 0.005 258.324)
foreground#0F1B2Doklch(0.221 0.039 258.275)
card#FFFFFFoklch(1 0 0)
card-foreground#0F1B2Doklch(0.221 0.039 258.275)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0F1B2Doklch(0.221 0.039 258.275)
primary#13294Boklch(0.283 0.069 258.854)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E6ECF5oklch(0.941 0.014 258.346)
secondary-foreground#13294Boklch(0.283 0.069 258.854)
muted#EDF1F7oklch(0.957 0.009 258.336)
muted-foreground#526077oklch(0.486 0.041 260.276)
accent#E3EAF4oklch(0.935 0.015 257.198)
accent-foreground#0F1B2Doklch(0.221 0.039 258.275)
destructive#B42318oklch(0.5 0.182 29.513)
border#D9E1ECoklch(0.907 0.017 256.285)
input#C8D2E0oklch(0.86 0.022 256.739)
ring#2F6FD6oklch(0.557 0.172 259.651)
chart-1#13294Boklch(0.283 0.069 258.854)
chart-2#2F6FD6oklch(0.557 0.172 259.651)
chart-3#18A0A0oklch(0.641 0.105 194.845)
chart-4#E0A43Aoklch(0.758 0.137 77.684)
chart-5#8A63D2oklch(0.591 0.165 297.305)

Dunkles Theme

background#0B1320oklch(0.186 0.029 259.81)
foreground#E6ECF5oklch(0.941 0.014 258.346)
card#111B2Coklch(0.222 0.037 260.614)
card-foreground#E6ECF5oklch(0.941 0.014 258.346)
popover#111B2Coklch(0.222 0.037 260.614)
popover-foreground#E6ECF5oklch(0.941 0.014 258.346)
primary#7FA8F0oklch(0.731 0.114 261.239)
primary-foreground#0B1320oklch(0.186 0.029 259.81)
secondary#1A2639oklch(0.267 0.04 259.345)
secondary-foreground#E6ECF5oklch(0.941 0.014 258.346)
muted#152034oklch(0.244 0.042 261.771)
muted-foreground#8F9DB3oklch(0.692 0.036 259.404)
accent#1D2A40oklch(0.284 0.045 260.568)
accent-foreground#E6ECF5oklch(0.941 0.014 258.346)
destructive#F97066oklch(0.709 0.17 26.471)
border#24324Aoklch(0.316 0.047 260.838)
input#2C3B55oklch(0.351 0.05 261.08)
ring#7FA8F0oklch(0.731 0.114 261.239)
chart-1#7FA8F0oklch(0.731 0.114 261.239)
chart-2#4FC3C3oklch(0.752 0.103 195.179)
chart-3#F0C26Eoklch(0.838 0.115 81.184)
chart-4#B79BF0oklch(0.746 0.123 298.536)
chart-5#E6ECF5oklch(0.941 0.014 258.346)

Schriften

Überschriften: Plus Jakarta Sans · 700
Fließtext: Plus Jakarta Sans · 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 4pxmd 6pxlg 8pxxl 12px

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

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

Layout

Maximale Breite: 1280px
Textbreite: 70ch
Spalten: 12
Spaltenabstand: 24px

Ideal für

B2B-SaaS und Enterprise-Software
Beratung und professionelle Dienstleistungen
Websites für Logistik, Versicherungen und Banken
Investoren- und Partnerseiten

Dos and Don’ts

Zeige das Produkt mit echten Screenshots, nicht mit abstrakten Illustrationen.
Belege Aussagen mit Kundenlogos, Zahlen und Case Studies.
Lass das leuchtende Blau nicht mit dem marineblauen Primär-Button konkurrieren.
Verstecke Preise oder den Vertriebskontakt nicht hinter mehreren Klicks.