Mono: Developer Docs Design System

Web · Light · Minimal · Developer tools

Mono

Plain white pages, Geist type and one cobalt blue, built for docs and dev tools.

Mono is a quiet system for developer products: white pages, Geist and Geist Mono, hairline borders and one cobalt blue for links and primary actions. Code blocks, tables and API references are the main event, not an afterthought.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Mono design system. Its spec is at https://codexdesign.io/design-systems/mono.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light 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)

Dark 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)

Fonts

Headings: Geist · 600
Body: Geist · 400
Monospace: Geist Mono

Type scale

display · 60/1.05 · -0.025emThe quick brown fox
h1 · 40/1.1 · -0.02emThe quick brown fox
h2 · 28/1.2 · -0.01emThe quick brown fox
h3 · 20/1.3The quick brown fox
body · 16/1.55The quick brown fox
small · 13/1.45The quick brown fox

Radius, spacing and shadow

Corner radiussm 4pxmd 6pxlg 8pxxl 12px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowNone: depth comes from borders and color.

Layout

Max width: 1280px
Text width: 72ch
Columns: 12
Gutter: 24px

Best for

Developer docs and API references
Dev tools and CLIs
Open-source project sites
Changelogs and technical blogs

Do's and don'ts

Do show a working code sample near the top of every page.
Do set every command, path and flag in Geist Mono.
Don't use blue for anything that isn't clickable.
Don't decorate with gradients, illustrations or glows.