Pattern: How should we scale tab sizes to indicate navigation depth a...

Documentation for Sessions

🎨 Pattern: How should we scale tab sizes to indicate navigation depth a...

Date: 2026-02-17
Time: 18:42:10 UTC
Session: gspace1-111.2
Agent: angular
Confidence: 98%
Status: ✅ Documented

📋 Decision Context

Question:

How should we scale tab sizes to indicate navigation depth and information hierarchy?

Task: Establish clear tab size hierarchy for navigation depth in Vitto components

🎯 Decision Made

Chosen:

Three-level tab hierarchy: 16px/52px (main) → 14px/44px (sub) → 12px/36px (sub-sub)

Options Considered:

  1. Uniform sizing across all tab levels
  2. Two-level hierarchy (main + sub)
  3. Three-level hierarchy with clear progression
  4. Four-level hierarchy for maximum granularity

💭 Reasoning

A three-level tab hierarchy with progressive size reduction creates clear visual priority while maintaining accessibility. The mathematical progression (Level 1: 16px/52px, Level 2: 14px/44px, Level 3: 12px/36px) follows a consistent -2px font size and -8px height pattern. Key rationale: (1) Each level is visually distinct - users immediately know their depth in the navigation tree, (2) All levels meet WCAG 2.1 touch target minimums (36px+), (3) Typography scale creates natural information scent - larger = more important, (4) Icons removed at Level 3 to reduce visual weight and maintain hierarchy, (5) Border thickness also reduces (2px → 2px → 1px) for subtle reinforcement, (6) Gradient indicator width scales (40% → 40% → 30%) proportionally, (7) Transform distance reduces (2px → 2px → 1px) for proportional elevation. This system is scalable - we can add Level 4 (10px/32px) if needed, though three levels handle 95% of use cases. The progression avoids cognitive overload while providing clear wayfinding.

📁 Files Involved

🔗 Related

Auto-generated by MCP Smart Consolidation