---
version: alpha
name: "Mono"
description: "문서와 개발 도구를 위한 민낯의 흰 페이지, Geist 서체, 코발트 블루 하나. Mono는 개발자 제품을 위한 조용한 시스템입니다. 흰 페이지, Geist와 Geist Mono, 헤어라인 테두리, 링크와 주요 행동에 쓰는 코발트 블루 하나. 코드 블록, 표, API 레퍼런스가 부수적인 요소가 아니라 주인공입니다."
colors:
  primary: "#2450E6"
  on-primary: "#FFFFFF"
  secondary: "#0F9F6E"
  tertiary: "#D97706"
  neutral: "#5D6470"
  surface: "#FFFFFF"
  on-surface: "#0B0C0E"
typography:
  display-lg:
    fontFamily: "Geist"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Geist"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Geist"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Geist"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Geist"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Geist"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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

## Colors

- **primary (#2450E6):** 코발트 블루. 링크, 주요 버튼, 사이드바의 활성 항목에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#0F9F6E):** 에메랄드. 성공 상태, diff에서 추가된 줄, 두 번째 차트 계열에 씁니다.
- **tertiary (#D97706):** 앰버. 경고, 지원 중단 안내, 세 번째 계열에 씁니다.
- **neutral (#5D6470):** 서늘한 슬레이트 그레이. 설명, 줄 번호, 메타데이터에 씁니다.
- **surface (#FFFFFF):** 순백. 카드는 페이지와 같은 색이고 테두리로 구분합니다. 다크 모드는 거의 검은색입니다.
- **on-surface (#0B0C0E)**

## Typography

전체를 Geist로: 제목은 Semibold 600으로 60px 디스플레이에서 20px까지, 본문은 Regular 400 16px에 줄 높이 1.55. 코드, 명령어, 키, 버전 번호는 Geist Mono.

## Layout

콘텐츠는 1280px, 12컬럼 그리드에 거터 24px, 간격 단위 4px 위에 놓입니다. 문서 페이지는 왼쪽 사이드바, 72자 폭의 콘텐츠 컬럼, 오른쪽의 페이지 내 목차를 씁니다.

## Shapes

카드, 코드 블록, 입력창, 버튼은 8px 모서리. 옅은 회색 1px 테두리로 모든 것을 구분하며 그림자는 없습니다.

## Components

복사 버튼과 파일명 탭이 있는 코드 블록, 노트와 경고 콜아웃, 탭으로 나뉜 설치 명령어(npm, pnpm, bun), 키보드 단축키 칩, 커맨드-K 검색.

## Do's and Don'ts

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