Tours
Product tours, coach marks, and guided highlights are one system with one entry point: a single factory function owns the skin, the motion, the highlight, and the accessibility behavior. Building a tour any other way is a defect, not a style choice.
Imported system. Adopted from the app's design system. The rules apply as written; the app builds this on driver.js with a createTour() factory; this site has no tours yet, so the contract is documented ahead of need.
The one rule
Never call the tour library directly, and never style its popover outside the shared skin. Always go through the factory and let it own everything below. The factory does not accept the options it standardizes (animation, stage rounding, progress counter).
What the system guarantees
| Aspect | Rule |
|---|---|
| Skin | A flat surface card: 1px line border, fully rounded edge, standardized padding, max-width around 320px, and no shadow. Buttons are the standard pills (primary action in brand, back in muted surface). |
| Motion | The popover bubbles in (scale from zero, back-out overshoot, fade) growing out of the edge that faces its target, and bubbles out on every close path before teardown. See UI motion. |
| Highlight | A perfect-rectangle stage cut-out with square corners. The highlight never rounds or glows. |
| Accessibility | prefers-reduced-motion disables the bubble on both ends: instant show, instant teardown. |
What each tour supplies
- Steps and copy. Each step declares which side of its target the popover sits on; that side drives the bubble's transform origin, so the popover always grows out of the thing it points at.
- Optional extras, additive only. Extra classes are appended to the shared skin, never replacing it. A click-spark celebration may be opted into for single-confirmation tours; on multi-step tours it fires only on the final button.
Conventions
- Guard before driving: a tour checks that its targets are mounted before it starts, and simply declines otherwise.
- Show once: first-visit tours auto-trigger shortly after the page settles (about 800ms) and gate themselves with a localStorage key so they never replay.
- No step counters: the "2 of 5" progress label is disabled product-wide.