Docs Docs-site design system

Docs-site design system

The shared look, structure, and cross-linking that make every project's documentation site feel like one continuous site with fairyfox.io.

Each project publishes its own documentation site, and this standard is what makes those sites feel like one continuous surface with fairyfox.io — so moving from the main site into a project’s docs, and back again, is seamless. Its canonical machine copy lives in the repository under hub/standards/docs-site/; this page is the readable summary.

A specification, not a theme package

The standard is written as a specification that each project implements in its own stack — Jekyll, a JavaScript app, a generated API reference, or hand-written HTML — rather than a CSS file to copy. The goal is a result a visitor cannot tell apart from fairyfox.io, not byte-identical source. Where a project’s tooling cannot match exactly, it matches what it can and keeps the unavoidable difference behind a clear, intentional boundary.

What it covers

The standard is split into focused files: the overview and principles, the exact design tokens (the dark and light palettes, typography, spacing, radii, shadow, and motion), the layout and structure (page anatomy and the sidebar/content documentation shell), the shared components (brand, navigation, buttons, cards, code, callouts, tables, badges, footer), navigation and cross-linking, content organization, accessibility to WCAG 2.1 AA, a compliance checklist, a guide to adopting and maintaining it, the domain and publishing model, and a precise measurements reference that pins every value. A read-only copy of the master stylesheet is bundled as the ultimate exact reference — to reimplement, not to link.

Seamlessness rests on three things. Every project publishes its docs under the same domain as the main site (served at fairyfox.io/<project>/); every site wears the same tokens, layout, and components; and the links run both ways — each project’s header offers the way back to fairyfox.io and to the project’s own node page, while the main site links into each project’s docs. Get those right and the boundary between the hub and a project disappears.

fairyfox.io is the master copy

The design system originates at fairyfox.io, and this site is the master copy. Changes to the theme here are made deliberately, through a separate manual review, and are never auto-applied to fairyfox.io by the update flow. The direction is one-way: the master is curated here, and projects adopt outward from it.