Spectrum Tab Bar

Features

• Four labelled destinations — Home, Search, Activity, Profile — on a saturated bar that carries its own ink instead of borrowing the page surface
• A pale tile floats inside the active slot with an even gap on all four sides and slides between destinations on a 0.45s curve
• A cresting disc opens the composer, sized and seated like the tile so the two read as siblings
• The bar fill and its ink are the system selection pair, so every label clears 4.5:1 at every point of the bar on all fifteen design systems
• Unstamped, the bar renders its authored three-stop ramp; under a design system each stop resolves to that system selection fill
• Roving tabindex with Arrow/Home/End key navigation over the destinations, and aria-current="page" on the active link
• Fully respects prefers-reduced-motion

Accessibility

Navigation landmark

<nav aria-label="Primary"> wraps the slot list

Current slot

aria-current="page" on the active link

Decorative icons

All SVGs marked aria-hidden="true" and focusable="false"

Focus indicators

:focus-visible outlines on every link and control, never composed into a box-shadow list

Keyboard navigation

Roving tabindex with Arrow, Home and End keys

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Spectrum Tab Bar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.