---
title: "Foundations"
description: "The rules that hold on every surface."
canonical: index.html
navigation-title: "Foundations"
---

<a id="foundations"></a>

# Foundations

The rules that hold on every surface. Read these first: every component and every pattern rests on them.

**[Colours](colours.md)**
The surfaces, the inks, the one accent and the status colours, each with its reason.

**[Type](type.md)**
The faces, the scale and when text is mono.

**[Spacing and layout](spacing.md)**
The steps between blocks and the page frame they stand in.

**[States](states.md)**
What a control does under the pointer, and what a page says when it has nothing to show.

**[Writing](writing.md)**
The standard every text follows, and the limits a check holds.

**[Accessibility](accessibility.md)**
Contrast, the keyboard and reduced motion, and what the checks cannot see.