# Monospace Docs
전면 모노스페이스 타이포·순백 배경·헤어라인 격자로 짠 라이트 모드 문서/레퍼런스 사이트 스타일 — 정보 밀도와 정렬 정밀함만으로 성립한다.
- taxonomy: swiss-international · monospace, documentation, hairline-grid, light-mode, information-dense, code-native · complexity=medium
- page types: docs, landing, marketing, app
- best for: API·개발자 문서 사이트, 디자인 시스템 레퍼런스, 체인지로그·기술 스펙 페이지
- avoid for: 감성 소비자 마케팅 랜딩, 이미지·일러스트 중심 페이지, 장식적 브랜드 매니페스토
- provenance: authored (design-diversity 팩 'web-monospace-docs' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# Monospace Docs
## Overview
A documentation / API-reference aesthetic where every character is set in a single monospace family — headings, body, tables, labels alike. Pure-white ground, near-black ink, a faint grey surface, and a strict hairline grid. No shadows, no gradients, almost no color. Hierarchy comes from 1px rules, indentation, and the precision of monospace column alignment. If a page feels flat, that is correct — depth is a hairline, not a shadow. The target impression is "well-crafted API documentation." Unlike a dark terminal aesthetic, this is light, static, and document-first — no neon glow, no blinking cursor.
## Colors & Roles
Canonical mode is **light**. `background` pure white, `foreground` near-black (#171717). Surfaces — code blocks, table headers, hovered sidebar rows — separate with a barely-there grey `surface` (#f6f6f4, mapped to `card`/`secondary`/`muted`), never with shadow. `muted-foreground` (#737373) carries meta text, annotations, and `// ` comment prefixes. A single calm blue `accent` (#1a56db) is the only chromatic note — links and active state only, at most 4% of the page. `border` is a #e2e2df hairline. Dark mode is authored faithfully but derived (the pack ships no dark spec): an inverted achromatic grey ramp with a brightened blue accent for contrast.
## Typography Rules
One monospace family only — IBM Plex Mono (an open Google Fonts webfont), JetBrains Mono / ui-monospace as fallback. No sans, no serif, anywhere. Three weights: 400 body, 500 labels, 600 headings. H1 is restrained (`clamp(1.875rem, 3.5vw, 2.75rem)`, tracking −0.01em) — no oversized display type. Body is 15px at line-height 1.65. Labels/meta are 13px 500, often prefixed with `// `; headings may carry a `#` / `##` markdown glyph in the accent hue. Exploit the monospace grid: align tables and key-value lists by character cell.
## Layout Principles
Max width 1200px. Two columns: a fixed 240px sidebar (table of contents / nav) and a 720px content column. Measure runs 70–80 characters (a touch wide, since monospace is roomy). Below 900px the sidebar collapses to a top accordion and everything stacks to one column. Section rhythm is dense — 48px between sections, 1em between paragraphs. Every element aligns to a hairline grid; a left gutter may hold line numbers or a `§` anchor.
## Depth & Elevation
Completely flat. Shadows are absent — `shadow-opacity: 0`. Depth is expressed only by hairline borders and the faint grey surface. No gradients, glass, noise, or blur.
## Shapes
Zero border-radius on everything — buttons, cards, inputs, code blocks, tables, images. A 2px maximum is tolerated but 0 is the rule. Corners are square.
## Component Stylings
- **Button**: radius 0, 1px border, surface or transparent fill, monospace label, padding 8px 16px. Hover fills `surface` or underlines; 80ms linear, no movement. Primary variant fills ink (`primary`). Focus = 1px offset outline (blue `ring`).
- **Code block**: `surface` background, 1px border on all four sides, radius 0, a small language label at the top-left.
- **Table**: hairline grid on every cell, header row on `surface`, columns aligned by monospace cell.
- **Input**: 1px full border, radius 0; focus border goes to the blue accent. Search sits at the top-right of the nav.
- **Nav**: sticky top, white, 1px hairline bottom rule; monospace logo left, search right. Active sidebar row on `surface`.
- **Footer**: no color inversion (stays white). 1px hairline top rule, monospace meta text, `// ` comment-style copyright.
## Motion
None. The only permitted transition is link color (80ms linear). Hover states are limited to link underline and sidebar surface fill — no translate, scale, or fade. No scroll-reveal, no blinking cursor (the deliberate contrast with a terminal pack).
## Do's and Don'ts
**Do:** set everything in one monospace family; divide with 1px hairlines; express depth with hairlines + faint grey only; keep the blue accent to links/active state under 4% area; align tables by character cell; use text glyphs (→ ↳ § # ·) instead of icons.
**Don't:** use sans/serif body; use border-radius > 2px or any shadow; use gradients, neon, glow, or a blinking cursor; use more than one accent or exceed 4% area; use oversized display type; use emoji, rounded three-card grids, or scroll-entrance animation.
## Responsive Behavior
The two-column layout collapses at 900px: the sidebar becomes a top accordion and content stacks to a single column. Type scales gently via `clamp()` on H1 only; the dense rhythm and hairline grid are preserved on mobile.
## Agent Prompt Guide
> Build this in the 'Monospace Docs' style: everything in a single monospace family (IBM Plex Mono) on pure white with near-black ink and a faint #f6f6f4 surface. Zero border-radius, 1px hairline borders instead of shadows, hairline-ruled tables and 4-side-bordered code blocks with a language label. Two-column docs layout (240px sidebar + 720px content). One calm blue accent for links/active state only, under 4% area. No gradients, no shadows, no motion beyond an 80ms link-color transition. Reads like well-crafted API documentation.
## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-monospace-docs` (authored spec, not extracted from a live URL), so all tokens are `manual` confidence. Light values are culori conversions of the pack's hex; `destructive` is a derived standard red (the pack omits it). Dark mode is authored — the pack ships no dark spec — by inverting the achromatic ramp and brightening the blue accent. This is a **light** documentation grid, deliberately distinct from a dark terminal-core aesthetic: no neon, no glow, no cursor. Font is IBM Plex Mono, an open Google-Fonts webfont, so reproduction is exact.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Monospace Docs — theme.css (generated, do not edit) */
:root {
--radius: 0px;
--radius-selector: 0px;
--radius-field: 0px;
--font-sans: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
--font-display: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
--spacing: 8px;
--shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0.205 0 0) 0%, transparent);
--ks-display-weight: 600;
--ks-display-tracking: -0.01em;
--background: oklch(1 0 0);
--foreground: oklch(0.205 0 0);
--card: oklch(0.973 0.003 106.4);
--card-foreground: oklch(0.205 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.205 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.973 0.003 106.4);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.973 0.003 106.4);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.505 0.212 262.9);
--accent-foreground: oklch(1 0 0);
--destructive: oklch(0.577 0.215 27.3);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.912 0.004 106.5);
--input: oklch(0.912 0.004 106.5);
--ring: oklch(0.505 0.212 262.9);
--chart-1: oklch(0.505 0.212 262.9);
--chart-2: oklch(0.205 0 0);
--chart-3: oklch(0.556 0 0);
--chart-4: oklch(0.715 0 0);
--chart-5: oklch(0.912 0.004 106.5);
}
.dark {
--background: oklch(0.159 0 0);
--foreground: oklch(0.922 0 0);
--card: oklch(0.226 0 0);
--card-foreground: oklch(0.922 0 0);
--popover: oklch(0.226 0 0);
--popover-foreground: oklch(0.922 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.159 0 0);
--secondary: oklch(0.226 0 0);
--secondary-foreground: oklch(0.922 0 0);
--muted: oklch(0.226 0 0);
--muted-foreground: oklch(0.633 0 0);
--accent: oklch(0.655 0.156 262.5);
--accent-foreground: oklch(0.159 0 0);
--destructive: oklch(0.637 0.208 25.3);
--destructive-foreground: oklch(0.159 0 0);
--border: oklch(0.285 0 0);
--input: oklch(0.285 0 0);
--ring: oklch(0.655 0.156 262.5);
--chart-1: oklch(0.655 0.156 262.5);
--chart-2: oklch(0.922 0 0);
--chart-3: oklch(0.633 0 0);
--chart-4: oklch(0.439 0 0);
--chart-5: oklch(0.285 0 0);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
# Configuration
Every option is read from config.json at startup. Values align by monospace cell.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/monospace-docs.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `