Design System

Appearance

Navigation ​

Navigation components for site structure and user orientation. All navigation meets WCAG 2.1 Level AA with proper landmarks and keyboard navigation.

Tabs ​

Pill Tabs ​

Vertical Navigation ​

Pagination ​

Token Mapping ​

How tokens flow through the three-layer system: value → primitive → semantic → component.

Background
#09090b→zinc-950→--background→--sidebar-bg
Border
#27272a99→zinc-800/60→--border→--sidebar-border
Item text
#a1a1aa→zinc-400→--muted-foreground→--sidebar-item-text
Item hover text
#f4f4f5→zinc-100→--foreground→--sidebar-item-hover
Item hover bg
#27272a66→zinc-800/40→--accent→--sidebar-item-hover-bg
Active bg
#27272a66→zinc-800/40→--accent→--sidebar-active-bg
Active icon
#60a5fa→blue-400→--info→--sidebar-active-icon
Section title
#71717a→zinc-500→--muted-foreground→--sidebar-section
PrimitiveSemanticComponent
Link text
#71717a→zinc-500→--muted-foreground→--breadcrumb-text
Link hover
#d4d4d8→zinc-300→--foreground→--breadcrumb-hover
Current page
#e4e4e7→zinc-200→--foreground→--breadcrumb-current
Separator
#3f3f46→zinc-700→--border→--breadcrumb-separator
PrimitiveSemanticComponent

Accessibility Guidelines ​

✓
ARIA LandmarksNavigation uses nav element with aria-label for context.
✓
Current PageActive items marked with aria-current="page".
✓
Keyboard NavigationTab navigates between items, Arrow keys within groups.
✓
Focus ManagementClear focus indicators with 3:1 contrast ratio.