111k

Typography

Actual type scale, paragraph rhythm, emphasis rules, and prose standards extracted from the current Topoo documentation system.

Typography in Topoo docs is a fixed reading system extracted from the current live implementation.

Base font stack

  • Sans stack: Geist Variable, Geist, ui-sans-serif, system-ui, sans-serif
  • Mono stack: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

Preview + spec

Top-level docs pages use a clear title, then a muted description. This is the first reading anchor.

Typography

Type scale, paragraph rhythm, emphasis rules, and readable prose standards for the Topoo documentation system.

{"title": "text-3xl / font-semibold / tracking-tight","description": "text-base / muted foreground / max-width 80%"

Body prose is denser than stock Tailwind prose. The goal is readable structure with stable rhythm.

Topoo documentation pages prioritize density without losing readability. Paragraphs carry the same rhythm across product, execution, memory, and UI references.

{"fontSize": "15px","lineHeight": "24.375px",

Section headings step down in a controlled scale instead of jumping between unrelated sizes.

Heading level h2
Heading level h3
Step heading
{"h2": "20px / 28px / 500 / -0.5px / margin-top 3rem","h3": "18px / 28px / 500 / -0.45px / margin-top 2rem",

Lists keep the same reading density as paragraph text instead of shrinking into caption-sized content.

  • Left indent is fixed for readable scanning.
  • Each following item keeps a 0.5rem vertical gap.
  • Lists sit on the same rhythm as paragraphs.
{"listTopMargin": "1rem","leftIndent": "1.25rem",

Inline code is tighter than body prose so it reads as an annotation, not as a second paragraph style.

Use board, block, topic, and page as the canonical content model. Use bold for emphasis and keep links readable.

{"inlineCode": "12.8px / 20.8px / radius 8px / padding 0.2rem 0.35rem","strong": "font-weight 600",

Typography owns

  • heading scale
  • paragraph size and line-height
  • list spacing
  • inline code density
  • prose rhythm
  • readable emphasis

Typography does not own

  • board/block/topic/page structure
  • page routing
  • sidebar taxonomy
  • preview component behavior
  • overview grid composition

Those belong to schema, renderer contract, and layout rules.