Mono: 개발자 문서 디자인 시스템

Web · Light · Minimal · Developer tools

Mono

문서와 개발 도구를 위한 민낯의 흰 페이지, Geist 서체, 코발트 블루 하나.

Mono는 개발자 제품을 위한 조용한 시스템입니다. 흰 페이지, Geist와 Geist Mono, 헤어라인 테두리, 링크와 주요 행동에 쓰는 코발트 블루 하나. 코드 블록, 표, API 레퍼런스가 부수적인 요소가 아니라 주인공입니다.

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/ko/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

개발자 문서와 API 레퍼런스
개발 도구와 CLI
오픈소스 프로젝트 사이트
변경 내역과 기술 블로그

Do's and don'ts

모든 페이지 상단 근처에 동작하는 코드 샘플을 보여 주세요.
모든 명령어, 경로, 플래그는 Geist Mono로 쓰세요.
클릭할 수 없는 것에 파란색을 쓰지 마세요.
그라데이션, 일러스트, 글로우로 장식하지 마세요.