Navigation
Jaunt has one navigation element: the footer pill at the bottom of every screen. It’s always the same element. It changes which icons sit inside it, and how wide it grows, depending on where you are.
Every footer on this page is the app’s real Footer. Tap the icons: the coral
moves to wherever you are. Tap the round switch button and the pill swaps over.
States
Section titled “States”| Where you are | Icons | Switch button |
|---|---|---|
| Everywhere except a jaunt | 3: Home, Dashboard, Account | Only if you have a jaunt to switch to |
| Inside a jaunt, still voting | 6: Jaunt, Dashboard, Where, When, Stay, Who | Yes |
| Inside a jaunt, voting closed | 5: Jaunt, Dashboard, How, Docs & Tix, Who | Yes |
Everywhere except a jaunt
Section titled “Everywhere except a jaunt”Three icons: Home, Dashboard, Account. Whichever page you’re on turns coral; the rest stay white. Account can’t turn coral, because it’s a real photo, not an icon. So it gets a coral ring around it instead when it’s active.
A returning member with at least one jaunt also sees the switch button, even on the plain Home screen. Tapping it doesn’t go anywhere. It swaps this same pill to the footer for the jaunt they last had open, so they can jump back into it from anywhere. A brand new member with no jaunt never sees this button: there’s nothing to switch to.
Inside a jaunt, still voting
Section titled “Inside a jaunt, still voting”Six icons: the Jaunt itself (its own mark, recoloured to work as a nav icon instead of the fixed-colour logo), Dashboard, the three polls (Where, When, Stay), then Who, plus the switch button. Same 20px gap as every other state. Nothing about this one is special. It’s just a longer version of the same pill.
Inside a jaunt, voting closed
Section titled “Inside a jaunt, voting closed”Five icons once voting closes: Jaunt, Dashboard, then How and Docs & Tix replace the three polls, then Who. The switch button spins once when tapped, and flips to the plain Home / Dashboard / Account view.
Behaviour
Section titled “Behaviour”- Exactly one icon is coral at a time: the page you’re on. It answers “where am I?”. It’s never decoration.
- One shared element. All the states are the same pill, not different components swapped in and out. So when it changes from 3 icons to 6, it eases to the new width over 300ms instead of jumping.
- The switch spins once, over 500ms, when tapped.
- Reduce motion: with the system setting on, the width changes straight away.
Anatomy
Section titled “Anatomy”| Part | Value |
|---|---|
| Pill | 48px tall. Footer fill, 1px Green border, fully rounded, 8px padding |
| Icons | Each in a 24px box. White, or coral when active |
| Gap | 20px, whatever the icon count. 12px on phones narrower than 345px, so six icons still fit |
| Tap target | About 44px per icon, padded out invisibly. Small enough not to crowd its neighbours, big enough for a thumb |
| Switch button | Its own 40px circle, 8px to the right of the pill, so 8px shorter than it. Same padded 44px tap target |
Do and don’t
Section titled “Do and don’t”One coral icon: where you are
Exactly one icon is coral, the page you're on. Don't add a second coral icon for decoration or a 'brand' icon.
Accessibility
Section titled “Accessibility”- Every icon has a tap area of about 44px, bigger than the 24px icon you see.
- Every icon has its name for screen readers (Home, Dashboard, Where, When, Stay, Who, How, Docs & Tix, Account), and the switch is “Switch footer”.
- The width change and the switch’s spin follow “reduce motion”.
Source
Section titled “Source”src/web/components/Footer.tsx