Tab Size Hierarchy Guide

Session 111.2 - Typography Scale for Tab Navigation

📏 Size Hierarchy

Level 1: Main Tabs (Command Hub)

Primary navigation for major features

Visual Characteristics:

• Largest size for maximum prominence
• 24px icons for strong visual anchors
• Wide padding for comfortable clicking
• Full floating effect with stronger shadow

Level 2: Sub-Tabs (Observatory, Skill Studio)

Secondary navigation within main features

Visual Characteristics:

• Medium size, clearly subordinate to main tabs
• Slightly smaller icons
• Moderate padding
• Floating effect with lighter shadow

Level 3: Sub-Sub-Tabs (Cost Dashboard sub-tabs)

Tertiary navigation for detailed sections

Visual Characteristics:

• Smallest size, clearly tertiary
• No icons (text only) to reduce visual weight
• Compact padding
• Subtle floating effect
• Thinner borders (1px vs 2px)
• Smaller gradient indicator (30% vs 40%)

🎨 Visual Weight Progression

Main Tabs (Level 1)
├─ 16px text + 24px icons = Strong presence
├─ 52px height = Maximum touch target
├─ 2rem horizontal padding = Wide clickable area
└─ Full shadow + 2px translateY = Strong elevation

Sub-Tabs (Level 2)
├─ 14px text + 20px icons = Medium presence  
├─ 44px height = Standard touch target
├─ 1.5rem horizontal padding = Moderate clickable area
└─ Medium shadow + 2px translateY = Moderate elevation

Sub-Sub-Tabs (Level 3)
├─ 12px text only = Minimal presence
├─ 36px height = Compact touch target
├─ 1rem horizontal padding = Tight clickable area
└─ Light shadow + 1px translateY = Subtle elevation

🎯 Usage Guide

When to Use Each Level

Level 1 (Main Tabs):

• Primary feature navigation
• Top-level sections (Chat, Skills, Memory, etc.)
• Always visible, never nested
• Maximum visual priority

Level 2 (Sub-Tabs):

• Secondary navigation within a feature
• Example: Observatory → [Approvals | Costs | Security Audit]
• Example: Skill Studio → [Marketplace | Builder | Test]
• Clear subordination to main tabs

Level 3 (Sub-Sub-Tabs):

• Tertiary navigation within sub-sections
• Example: Costs → [AI Infrastructure | Vitto Tasks | Routing | Budget]
• Minimal visual weight
• Most compact design

📐 Implementation Examples

Main Tabs (Level 1)

.main-tabs {
  // Container
  gap: var(--ux-spacing-2xs);
  padding: var(--ux-spacing-md) var(--ux-spacing-lg);
  border-bottom: 2px solid var(--ux-outline);

  .tab {
    font-size: var(--ux-text-md);    // 16px
    min-height: 52px;
    padding: var(--ux-spacing-md) var(--ux-spacing-xl);

    .icon {
      font-size: 24px;
    }
  }
}

Sub-Tabs (Level 2)

.sub-tabs {
  // Container
  gap: var(--ux-spacing-2xs);
  padding: var(--ux-spacing-sm) var(--ux-spacing-md);
  border-bottom: 2px solid var(--ux-outline);

  .tab {
    font-size: var(--ux-text-sm);    // 14px
    min-height: 44px;
    padding: var(--ux-spacing-sm) var(--ux-spacing-lg);

    .icon {
      font-size: 20px;
    }
  }
}

Sub-Sub-Tabs (Level 3)

.sub-sub-tabs {
  // Container
  gap: var(--ux-spacing-3xs);
  padding: var(--ux-spacing-xs) var(--ux-spacing-md);
  border-bottom: 1px solid var(--ux-outline);  // Thinner!

  .tab {
    font-size: var(--ux-text-xs);     // 12px
    min-height: 36px;
    padding: var(--ux-spacing-sm) var(--ux-spacing-md);
    border-width: 1px;                // Thinner borders
    
    // No icons at this level
    
    &::after {
      width: 30%;                     // Narrower indicator
      height: 2px;                    // Thinner indicator
    }
  }
}

🔍 Visual Comparison

╔═══════════════════════════════════════╗
║  MAIN TAB (16px, 52px, icons)         ║ ← Level 1
╚═══════════════════════════════════════╝
  ┌────────────────────────────────┐
  │  Sub Tab (14px, 44px, icons)   │     ← Level 2
  └────────────────────────────────┘
    ┌──────────────────────────┐
    │ Sub-Sub (12px, 36px)     │         ← Level 3
    └──────────────────────────┘

✅ Applied To

• Level 1: vitto-command-hub.component.scss (7 main tabs)
• Level 2:
  • observatory-panel.component.scss (3 sub-tabs)
  • skill-studio.component.scss (3 sub-tabs)
• Level 3:
  • cost-dashboard.component.scss (4 sub-sub-tabs)

🎓 Design Rationale

Why This Hierarchy Works:

1. Clear Visual Priority: Users immediately understand which level they're at
2. Information Scent: Size indicates depth in navigation tree
3. Cognitive Load: Smaller text at deeper levels = expected pattern
4. Touch Targets: All levels meet WCAG (36px+ height)
5. Scalability: Can add Level 4 if needed (10px, 32px)

Typography Math:

• Each level: -2px font and -8px height
• Consistent ratio maintains visual harmony
• Icons removed at Level 3 to reduce clutter

Created: Session 111.2
Status: ✅ Complete
Last Updated: 2026-02-17