Headings
Heading one, the page title
Heading two, a section
Heading three, a subsection
Heading four
Heading five
Heading six
Text
Body text is 16px with a line height of 1.5. Most reading happens here, so it gets the most room. A paragraph can hold a link, strong text, emphasis, inline code, a keyboard shortcut like ⌘ K, highlighted text, an abbr, and small print.
A second paragraph follows with the standard flow spacing. Paragraphs, lists, tables, and figures all share the same bottom margin, and the last child in a container drops it.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. Antoine de Saint-Exupéry
const fox = jump(over.lazyDog)
if (fox.isQuick && fox.isBrown) {
return "0123456789"
}- Unordered list item
- Another item with a nested list
- Nested item
- Nested item
- Third item
- Ordered list item
- Second step
- Third step
- Term
- A definition list pairs a term with its description.
- Another term
- Descriptions sit in the muted color.
Table
| Invoice | Customer | Status | Amount | Date |
|---|---|---|---|---|
| INV-0042 | Acme Corp | Paid | $1,200.00 | Sep 24, 2026 |
| INV-0041 | Globex | Pending | $860.00 | Sep 21, 2026 |
| INV-0040 | Initech | Overdue | $2,410.50 | Sep 12, 2026 |
| INV-0039 | Umbrella | Paid | $310.00 | Sep 3, 2026 |
Form
Disclosure
What is a details element?
A native disclosure widget. No JavaScript, keyboard accessible, and the summary gets a chevron.
Open by default
Add the open attribute to start expanded.
Third item
Stacked details share hairlines between them.
Dialog
Icons
Phosphor, regular weight, pasted as inline SVG with aria-hidden="true". They take the size and color of the text around them.
Inline in a sentence the icon sits on the baseline. In a button, put the label on the button and hide the icon.