Skip to content

Getting startedHow to read these docs

How to read these docs

The doc system is built around three navigation patterns. This page explains how each one works, and which one to use when.

3 navigation patternsRead this onceBookmark the search

The left rail

The left rail is the section-by-section table of contents. It is sticky; it stays in view as you scroll. Use it when you know the section you want but not the specific page.

The top nav

The top nav lists the eight sections at the top of every page. Use it when you want to switch sections without going through the rail.

On-this-page

The right column lists the H2 and H3 sections of the current page. The current section is highlighted as you scroll. Use it to jump within a long page.

Press + K (or Ctrl + K on Windows / Linux) to open the search palette. The palette is client-side, instant, and indexed across every page in the documentation.

  • / navigate the results
  • open the highlighted result
  • esc close the palette

The reading order

The pages in this site are in dependency order. Foundations come first because the components are built from the tokens. Components come before patterns because the patterns are made of components. Accessibility is a section, not a sidebar, because it is a commitment, not a feature.

  1. Why this system
  2. Foundations
  3. Components
  4. Patterns
  5. Accessibility
  6. Voice and tone
  7. Diagrams
  8. Resources