Components
Sidebar
claude.ai app sidebar: 232–420px, three layout modes (docked, collapsed with hover peek, phone sheet), 32px rows on a 34px pitch with one roving tab stop, hover-revealed row actions, overflow fades, collapsible sections and project lists, resize handle, footer tray.
Docked
232×full on the sidebar colour (#fafafa | #1f1f1f) with a 1px seam. Titlebar 45 (28px hide toggle at 12,8, 20px icon). Rows 215×32 on a 34px pitch, radius 8, 14/21 w435 in primary ink; leading slot at x 12, label column x 44; hover = ghost hover; current = selected fill (15 % | 10 %), current + hover = 21.5 % | 14.5 %. Section labels 13/16 w520 primary with an always-visible 14px filled caret. Footer hairline 1px border-line; a 1px rule appears at the top of the list once it scrolls (no transitions). Tab enters the rows once; ArrowUp / Down / Home / End move between them (Shift+F10 opens a row's menu). Hover the end edge for the resize pill; drag between 232 and 420px.
Rows
Row actions are hidden until the row is hovered, keyboard-focused or its menu is open (always on touch); labels that do not fit fade out 24px before the edge (44 → 20px while hovered) and show the full title in a tooltip on the right.
Collapsed, compact and phone
Collapsed (user-hidden, or the viewport ≤ max(700, width + 329)px): a 28px trigger (radius 7) stays at (12,8); hovering or focusing it peeks a 232px popover-surface overlay (opacity 140ms, slide 180ms; Escape closes). Compact density: 26px rows, 13px labels, 16px icons. Phone (< 640px): a full-screen sheet with 44px rows that closes on Escape, the X, navigation or a left swipe.