Layout

These rules cover how components sit together on a page. They are defaults, not a checklist; see the Guidelines overview for how to apply them.

Spacing

• Leave at least twice as much space between groups as between items in a group (e.g. 8px between items, 16px or more between groups).

Small screens

• Design for a 390px wide phone. Nothing should make the page scroll sideways.
• Let text wrap rather than scroll. Add wrap-anywhere (Tailwind) to table cells, inline code, and any flex child that holds a long word, address, or identifier. break-words is not enough there: a table cell or flex item still sizes to its longest word.
• Let a code block wrap with whitespace-pre-wrap wrap-anywhere. If horizontal scrolling is the better fit for the code, use overflow-x-auto with the fade from Interface, and keep the scroll inside the block so the page itself doesn't widen.
• Make a table fit by wrapping its cells. For a table with many columns, stack each row as a labelled group below the sm breakpoint instead.

Anchors

• Use scroll-margin-top to leave space above headings that are link targets, so they aren't hidden under sticky headers.