styles
← 갤러리

Monospace Docs

전면 모노스페이스 타이포·순백 배경·헤어라인 격자로 짠 라이트 모드 문서/레퍼런스 사이트 스타일 — 정보 밀도와 정렬 정밀함만으로 성립한다.

swiss-international monospacedocumentationhairline-gridlight-modeinformation-densecode-native
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

제목·본문·표·라벨을 전부 등폭 글꼴로 짠 문서·API 레퍼런스 미학. 순백 배경에 검정 텍스트, 아주 옅은 그레이 표면, 1px 헤어라인으로 그은 표·코드 블록·격자, 각진 모서리. 색·그림자·일러스트를 거의 쓰지 않고 위계는 보더·들여쓰기·등폭 정렬로만 만든다. 다크 터미널 계열과 달리 라이트·정적·문서 중심이며 네온 강조나 커서 깜빡임이 없다.

타입 스케일

h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
code Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen

폰트는 오직 하나의 모노스페이스 패밀리(IBM Plex Mono — Google Fonts 공개 웹폰트). 제목·본문·표·코드·라벨 전부 등폭. 웨이트 3단(400 본문·500 라벨·600 제목). 산세리프·세리프 본문 금지. 거대 디스플레이 타이포 금지 — 제목도 절제된 크기. 라벨은 종종 '// ' 주석, 제목은 '#/##' 마크다운 글리프를 접두로 둘 수 있다.

골든 예제 (exemplar)

# Configuration

Every option is read from config.json at startup. Values align by monospace cell.

key type default
port number 3000
host string "0.0.0.0"
json
{
  "port": 3000,
  "host": "0.0.0.0"
}

// see also: API Reference →

Do

  • 제목·본문·표·라벨을 전부 등폭 글꼴로 짠다
  • 구획은 그림자가 아니라 헤어라인 1px 보더로 나눈다
  • 깊이는 헤어라인과 옅은 그레이 배경(surface)으로만 표현한다
  • 강조색(블루)은 페이지당 1개·면적 4% 이하, 링크·활성 상태에만
  • 코드 블록·표는 헤어라인 격자에 등폭 정렬한다
  • 아이콘 대신 텍스트 글리프(→ ↳ § # ·)를 쓴다

Don't

  • 산세리프·세리프 본문 금지 — 전면 모노스페이스
  • border-radius > 2px 금지, soft/drop shadow 금지
  • 그라디언트·네온·glow·커서 깜빡임 금지(다크 터미널 팩과 혼동 차단 — 이 팩은 라이트·정적)
  • 강조색 2개 이상 또는 면적 4% 초과 금지
  • 거대 디스플레이 타이포 금지 — 제목도 절제된 크기
  • 이모지·둥근 카드 3개 그리드·스크롤 등장 애니메이션 금지

컴포넌트 노트

button
base: radius 0, 1px solid border, surface 또는 투명 배경, 등폭 라벨 타이포, padding 8px 16px
hover: surface 배경 채움 또는 링크 밑줄, 80ms linear. 이동·스케일 없음.
focus: 1px offset outline (ring, 블루)
disabled: opacity 0.4
primary_variant: 배경 primary(잉크) 채움, 글자 primary-foreground
card
그림자 없음. 헤어라인 border 또는 surface 배경 단차로만 구분. radius 0. 둥근 카드 3개 그리드 금지.
code_block
surface 배경, 1px 4면 헤어라인 보더, radius 0, 좌상단 작은 언어 라벨(등폭 메타).
table
헤어라인 그리드(모든 셀), 헤더 행 surface 배경, 등폭 정렬로 칸 맞춤.
input
1px 풀 보더, radius 0, 포커스 시 border가 accent(블루)로. 검색창은 상단 네비 우측.
nav
상단 고정, 흰 배경, 하단 1px 헤어라인. 로고는 등폭 텍스트, 우측 검색창. 사이드바 현재 항목은 surface 배경.
footer
색 반전 없음(흰 유지). 상단 1px 헤어라인, 등폭 메타 텍스트, '// ' 주석 스타일 카피라이트.