patterns
App shell
Sidebar on the left, sticky header on top, main content flexes to fill. Collapsed sidebar stays visible as a 64px icon rail — never hover-only on touch surfaces.
Read the full specLive specimen — expanded sidebar
Mouse and keyboard can reach every interactive element. Click the icon button to see the collapsed variant below.
Search incidents, areas, people
Incidents overview
Last 24h · 12 new
Open
4
In progress
6
Resolved
24
Collapsed sidebar — 64px icon rail
Labels hide, icons stay. A tooltip pattern should reveal the label on hover and focus (not shown here; see the Tooltip component).
Search incidents, areas, people
Incidents overview
Last 24h · 12 new
Open
4
In progress
6
Resolved
24
Region tokens
Sizes are fixed tokens — do not invent new ones per surface.
- Sidebar, expanded240px · w-[240px]
- Sidebar, collapsed64px · w-16
- Header height56px · h-14
- Content vertical padding24–32px · py-6 lg:py-8
- Content horizontal padding16–32px · px-4 lg:px-8
- Content max-width1280px · max-w-xl (named)