Heading one

Body text in prose sits on 28px lines, capped at about 70 characters. It can hold strong text, emphasis, an inline link, inline code, a key like ⌘K, sample output like 200 OK, small print, a footnote¹, and H₂O, all without making any line taller.

A second paragraph shows the 16px gap between blocks. Every block gets the same space above it, whatever comes before it.

Heading two

Headings get 32px above and 8px below, so each one groups with the text it introduces.

Heading three

Smaller headings get 24px above and 4px below.

Heading four

Heading four text.

Heading five

Heading five text.

Heading six

Heading six text.

Lists

• An unordered list item
• A second item with a nested list
  • Nested items get a lighter dot
  • A second nested item
    • Third level, lighter still
• A third item

1. An ordered list item
2. A second item with a nested list
   1. Nested items use letters
   2. A second nested item
      1. Third level uses roman numerals
3. A third item

Definition term

The definition sits right under its term, in muted text.

Another term

Terms after the first get 12px above.

Code

A code block uses a light fill. Long lines wrap instead of scrolling, so the block never adds a scrollbar.

:root {
  --ds-primary: light-dark(#ff5c00, #ff5c00);
  --ds-prose: 32rem; /* a long comment that wraps onto a second line on narrow screens */
}

Quote

Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects.

Quotes can hold more than one paragraph.

Table

Media

A divider follows. It has 32px above and below.

Text after the divider.