Sidebar patterns.
Different sidebar shapes for different jobs. The app shell rail isn't the only sidebar in the product; settings, inbox list-panes, and doc nav all use distinct recipes built on the same tokens.
01 · Sub-panel · scoped navigation inside a page
Used inside a section route (Settings, Dashboard, Inbox). 200px wide on lg, collapses on mobile. Background is white, active row is arc-tint, items are sentence-case.
02 · List-pane · email/thread split view
Used in Inbox and Chargebacks. 280-320px wide, on Glacier so the selected row's white bg pops. Unread items are font-medium ink, read are normal ink-3. Time stamp is mono tabular at top-right.
03 · Doc sidebar · grouped link list
Used here on /brand/components and on the marketing docs (/help if it ships). Mono uppercase category labels, sentence-case items. Active is arc-tint with arc-colored label.
- sub-panel
- w-[200-220px] · bg-white · active bg-arc-tint
- list-pane
- w-[280-320px] · bg-glacier · active bg-white
- doc-sidebar
- w-[220px] · bg-glacier · grouped · mono category labels
- app-rail
- w-16 · bg-abyss · text-mesh-ink-3 (see App shell)
- common rule
- no hairline border between sidebar and content; let color contrast separate them