# The page

## Keep one shell

<!-- rule: layout -->

**Rule:** Use one shell layout throughout the product: either the rail alone or the rail with a bar above the page containing search and the reader’s menu.

**Why:** Readers learn where search and account controls are once.

**Do:** Use the same shell on every screen.

**Don't:** Move search or the account menu between pages.

## Choose content width

<!-- rule: width -->

**Rule:** Use the wide column for mostly tables and boards, and the centred column for mostly reading and forms.

**Why:** Tables need space, while reading needs a line length readers can follow.

**Do:** Show every table column at once in the wide column.

**Don't:** Put the same table in the centred column when its last column goes off-screen.

## Order page headings

<!-- rule: head -->

**Rule:** Put the way back first, then the page title and a short introduction, with everything else below.

**Why:** Readers should know which page they are on before choosing filters.

**Do:** Back link → title → introduction → filters.

**Don't:** Put filters above the title.

## Use one page title

<!-- rule: one-h1 -->

**Rule:** Give each page exactly one page title.

**Why:** Readers using heading navigation need one clear place to land.

**Do:** Use one h1 for the page.

**Don't:** Use multiple page titles or none.

## Follow heading levels

<!-- rule: outline -->

**Rule:** Use headings in order without skipping levels, and stop at h3: page, section, then group.

**Why:** Skipped levels hide structure, and a fourth level usually means the page should be split.

**Do:** Use a page heading, then section headings, then group headings.

**Don't:** Skip from the page heading to a group heading, or add a fourth heading level.

## Emphasize one action

<!-- rule: one-primary -->

**Rule:** Use one filled button for the main action and give all other actions less emphasis.

**Why:** Equal emphasis makes the main action unclear.

**Do:** Make Create token primary, with Import agents and Export less prominent.

**Don't:** Give all three actions equal emphasis.

## Limit card stacks

<!-- rule: stacking -->

**Rule:** Stack no more than six cards, and never put cards inside other cards.

**Why:** Too many cards make readers scroll past other content to find their target.

**Do:** Show up to six cards.

**Don't:** Show twelve cards or nest cards inside cards.

## Leave pages closed

<!-- rule: at-rest -->

**Rule:** Show the page uncovered until the reader chooses to open something.

**Why:** An overlay on arrival interrupts reading and can move keyboard focus.

**Do:** Let the reader open a menu or dialog.

**Don't:** Open one automatically when the page loads.

## Keep table density consistent

<!-- rule: density -->

**Rule:** Use compact rows in every table on the page, or use compact rows in none of them.

**Why:** Consistent row heights make tables feel like one page.

**Do:** Use compact rows in both tables.

**Don't:** Use compact rows in one table and roomy rows in another.

**Except:** Use the spacing required by the busiest table.

## Write a useful introduction

<!-- rule: lede -->

**Rule:** A page may open on its title alone; where there is an introduction, keep it to two sentences or fewer and add information the title does not give.

**Why:** Repeating the title wastes the reader’s time.

**Do:** Below “Payouts”, say “Payouts arrive within three business days.”

**Don't:** Write “This is the payouts page” below “Payouts,” or keep a line there because the page looks bare without one.