Mono: Developer-Docs-Designsystem

Web · Hell · Minimalistisch · Entwickler-Tools

Mono

Schlichte weiße Seiten, Geist-Schrift und ein Kobaltblau, gebaut für Doku und Dev-Tools.

Mono ist ein ruhiges System für Entwicklerprodukte: weiße Seiten, Geist und Geist Mono, Haarlinienrahmen und ein Kobaltblau für Links und Hauptaktionen. Codeblöcke, Tabellen und API-Referenzen stehen im Mittelpunkt, nicht am Rand.

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 Mono. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/mono.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#0B0C0Eoklch(0.154 0.005 264.432)
card#FFFFFFoklch(1 0 0)
card-foreground#0B0C0Eoklch(0.154 0.005 264.432)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0B0C0Eoklch(0.154 0.005 264.432)
primary#2450E6oklch(0.507 0.231 265.456)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#F2F3F5oklch(0.964 0.003 264.542)
secondary-foreground#0B0C0Eoklch(0.154 0.005 264.432)
muted#F4F5F7oklch(0.97 0.003 264.542)
muted-foreground#5D6470oklch(0.501 0.021 261.29)
accent#EEF0F3oklch(0.954 0.005 258.325)
accent-foreground#0B0C0Eoklch(0.154 0.005 264.432)
destructive#C7271Foklch(0.539 0.196 28.712)
border#E3E5E9oklch(0.922 0.006 264.531)
input#D4D7DDoklch(0.879 0.009 264.518)
ring#2450E6oklch(0.507 0.231 265.456)
chart-1#2450E6oklch(0.507 0.231 265.456)
chart-2#0F9F6Eoklch(0.622 0.133 162.239)
chart-3#D97706oklch(0.666 0.157 58.318)
chart-4#DB2777oklch(0.592 0.218 0.584)
chart-5#64748Boklch(0.554 0.041 257.417)

Dunkles Theme

background#0B0C0Eoklch(0.154 0.005 264.432)
foreground#EDEEF0oklch(0.949 0.003 264.542)
card#121316oklch(0.187 0.006 271.067)
card-foreground#EDEEF0oklch(0.949 0.003 264.542)
popover#121316oklch(0.187 0.006 271.067)
popover-foreground#EDEEF0oklch(0.949 0.003 264.542)
primary#6B8CFFoklch(0.671 0.174 269.263)
primary-foreground#0B0C0Eoklch(0.154 0.005 264.432)
secondary#1A1C20oklch(0.226 0.008 264.395)
secondary-foreground#EDEEF0oklch(0.949 0.003 264.542)
muted#16181Boklch(0.208 0.007 258.367)
muted-foreground#8E95A1oklch(0.668 0.02 261.32)
accent#1E2125oklch(0.246 0.009 255.592)
accent-foreground#EDEEF0oklch(0.949 0.003 264.542)
destructive#FF6B61oklch(0.71 0.183 26.597)
border#24272Coklch(0.272 0.01 260.702)
input#2D3036oklch(0.309 0.012 264.391)
ring#6B8CFFoklch(0.671 0.174 269.263)
chart-1#6B8CFFoklch(0.671 0.174 269.263)
chart-2#34D399oklch(0.773 0.153 163.223)
chart-3#FBBF24oklch(0.837 0.164 84.429)
chart-4#F472B6oklch(0.725 0.175 349.761)
chart-5#94A3B8oklch(0.711 0.035 256.788)

Schriften

Überschriften: Geist · 600
Fließtext: Geist · 400
Monospace: Geist 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

SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.

Layout

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

Ideal für

Entwickler-Doku und API-Referenzen
Dev-Tools und CLIs
Websites von Open-Source-Projekten
Changelogs und technische Blogs

Dos and Don’ts

Zeige oben auf jeder Seite ein funktionierendes Codebeispiel.
Setze jeden Befehl, Pfad und jedes Flag in Geist Mono.
Verwende Blau nur für Klickbares.
Dekoriere nicht mit Verläufen, Illustrationen oder Leuchteffekten.