# 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.