Navigation
Bottom nav bar, tabs, stepper and breadcrumb. The active state uses --btn/primary/default (→ lime in dark), and a gliding indicator slides between items when you tap — the same motion as the pagination control.
Bottom Nav Bar try it
Tap a tab — the top indicator glides across while the icon & label ease into the accent colour. A floating Scan button sits centre. Four-item (with Scan) and five-item variants.
Tabs
Underline tabs with a gliding ink bar, and pill tabs with a gliding pill — both slide between items on tap.
In dark
The accent re-themes to lime; the gliding indicators behave identically.
Progress Stepper
Multi-step flow — steps 1–2 done, 3 active, 4 pending.
Page Header & Breadcrumb
Token Reference
| Token | Value | Usage |
|---|---|---|
| --btn/primary/default | #352eff → #a1ff5b | Active tab/nav · gliding indicators · Scan (→ lime) |
| --main-text/default | #171717 | Inactive icon · label · title |
| --mav-muted | #7f7f7f | Inactive tabs · breadcrumb separators |
| --mav-bg-secondary | #e5e5e5 | Pill-tabs track · icon buttons |
| Motion | .42s cubic-bezier(.34,1.1,.35,1) | Gliding indicator (matches Pagination) |