Roadmap

Features

• Full-width header card with a Tabler route icon, title with gradient emphasis, subtitle, status pips, and completion chip
• Vertical timeline rail with solid progress fill up to the focused milestone
• Dashed dim rail below for upcoming steps, faded at bottom edge
• Three progress-based states: completed (check node, green ring at 100%), in-progress (medium node, orange ring with percentage), upcoming (small hollow node)
• Separate focus concept — clicking a card focuses it (design-system-shaped pulse, directional rail tracer, elevated card) without changing status
• Figtree SVG progress rings with percentage centered inside, colored by status (green for completed, orange for in-progress)
• Action buttons on cards: "Continue" uses the active primary treatment; "Review" uses the active success treatment
• Header pips colored by status: green (completed), orange (in-progress), grey (upcoming)
• Header completion chip colored by overall progress: active design-system accent in progress, success when all complete
• Staggered fade-and-translate entrance for milestones
• Arrow key focus movement between milestones
• Dark/light theme toggle with smooth transitions
• Design-system switcher with 30+ brand themes
• Responsive layout down to 320px

Accessibility

ARIA labels

Every milestone button has an explicit aria-label

Active step

aria-current="step" on the focused milestone button

List semantics

<ol role="list"> with role="listitem" children

Theme toggle

role="switch" with aria-checked toggled by JS

Keyboard nav

ArrowUp/ArrowDown move focus between milestones

Step activation

Enter/Space and click activate a milestone

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Roadmap in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the roadmap 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.