Visual reference

This page documents typography, code presentation and controls, with interactive examples.

Typography and reading hierarchy

The article body uses a serif face; navigation and controls use sans serif; commands, paths and identifiers use monospace. English body text uses bundled Source Serif 4, Chinese uses the system serif face, navigation uses Inter and system sans serif, and code uses bundled JetBrains Mono.

Page title and body specimenconst frame = 'ENU' · 00110010 · 20 Hz

Body text is 17 px with a line height of 1.85. Article hierarchy relies on type size, weight and whitespace, without horizontal section dividers.

Typographic roles

Content	Face	Treatment
Body and introduction	Serif	Regular weight, generous line height
Page title	Serif	Larger size, tighter tracking
Section headings, navigation and controls	Sans	Moderate weight, clear grouping
Paths, commands and identifiers	Mono	Preserve complete tokens
Supporting text and timestamps	Sans / Mono	Secondary ink color

Links, quotations and notices

Links use the body ink color and a fine underline. Quotations and notices use a single line on the left and a semantic color.

Commands should state the working directory and expected result. Reserve quotations for material that needs emphasis.

Writing guidance

Start with the reader's task, then provide the command and expected result. Introduce background where it becomes relevant.

Verification boundaries

A screenshot cannot establish interaction behavior. Check keyboard focus, copied text and touch targets through actual use.

Code blocks

Code blocks retain language labels, line numbers and copying. Long lines scroll within the block.

interface DocumentPage {
  title: string
  description: string
  verified: boolean
}

const page: DocumentPage = {
  title: 'XGC2',
  description: 'Usage and development',
  verified: true,
}

Code groups present equally useful alternatives. Text color and a fine underline identify the selected tab. Language labels and copy buttons alternate on hover or focus.

npm

npm run build

Python

python3 -m unittest discover -s tests -v

Diff examples use addition and deletion markers alongside color:

- description: 'Documentation in progress.'
+ description: 'XGC2 usage and development documentation.'

Mathematics

Inline equations can appear inside sentences, such as the differential-drive state $\mathbf{x}=[x,y,\theta {]}^{\mathsf{T}}$. Display equations present a complete model:

$$\left[\begin{array}{c}\dot{x}\\ \dot{y}\\ \dot{\theta }\end{array}\right]=\left[\begin{array}{c}v\cos \theta \\ v\sin \theta \\ \omega \end{array}\right].$$

Equations render at build time, without third-party scripts or remote fonts.

Basic controls

The controls below are interactive. Keyboard focus, pressed, selected and disabled states have explicit styles.

Buttons

Inputs

Search termInput only affects this interactive preview.Example language简体中文English当前选择：简体中文

Segments

Switches

Tabs

Controls use a single boundary. Text and position communicate state.

Motion and accessibility

Motion communicates chapter entry, reading position and control state. It never blocks scrolling or interaction.

• Chapters reveal once.
• Reading progress and the active heading track the article without covering it.
• prefers-reduced-motion disables unnecessary transitions and smooth scrolling.
• Every action supports keyboard focus; color is never the only state indicator.