Real Arvios tokens (sidebar navy gradient, gold active state, Inter font).
FM's ask is option A. Industry standard is option B. Currently shipped is C.
Why most modern apps avoid font-size cascades in sidebars
Sidebar items are peers, not headings. Visual weight should
communicate state (active, hover) — not importance
between items, since the user picks one. — Refactoring UI, ch. 4 (paraphrased)
- Headings teach hierarchy. Nav teaches choice. A document has h1 > h2 > h3 because each section contains the next. Sidebar items are siblings.
- Bigger ≠ more important in nav. Eye jumps to biggest text first. If "Overview" is huge and "Settings" tiny, user feels Settings is less reachable.
- Section captions do the grouping. Tiny 10–11px uppercase labels (Linear, GitHub, Vercel, Notion, shadcn) chunk items without competing with them.
- Hierarchy via spacing + weight + color, not size. Indent + muted color for children. Bold + foreground color for parents. Size changes reserved for caption only.
- Where cascade DOES work: file-tree explorers (VS Code), outline panels — places where items genuinely contain children of the same kind. Not app navigation.
Recommendation
Keep Option C (currently shipped) and tighten three things FM may be reacting to:
- Bump caption contrast:
text-sidebar-foreground/50 → /65.
- Add 8–10px more vertical breathing room above each section caption.
- Distinguish department labels from LOB items via a 1px hairline divider, not bigger type.
If FM still wants Option A after seeing this, it's a 4-line CSS change.
But every reference app we admire uses B / C.
References
- Refactoring UI (Schoger & Wathan) — "Establish a hierarchy"
- Nielsen Norman Group — "Left-Hand Navigation: Best Practices" (2020)
- Linear, Vercel, Notion, GitHub, shadcn/ui — flat 13–14px nav items + 10–11px uppercase captions
- Apple HIG — Sidebars: "Use a consistent type style across all sidebar items"