PlotaPath
Component sheet
Every shared component and every state, rendered live from the components the app actually uses. Facilitator reference, not part of the student journey.
Buttons
Amber is reserved for the single primary action on a screen. Minimum height is the --tap token, 48px, so buttons stay reachable with a thumb.
Variants
States
Disabled is used when there is nothing to submit yet — an empty chat answer, or the delete button until DELETE is typed.
Chips
Tappable answers. Used for quick picks, chat suggestions and reactions. Pressed state must not rely on colour alone, so it also carries a weight and border change.
Default and selected
The chat's mandatory option
DIS-4 requires an I'm not sure option on every question, so it ships with the chip row rather than as an afterthought.
Cards
Eyebrow
Standard card
A raised surface on the ink-800 background.
Flat
Flat card
For grouped links inside a page, so panels do not stack.
Pillar markers
Each pillar has a colour and a shape and a name. Colour alone would fail the colour-vision requirement this app takes seriously, so shape carries the same meaning.
- Discover — circle, var(--pillar-discover)
- Reality — rounded square, var(--pillar-reality)
- Experience — leaf, var(--pillar-experience)
- Path — triangle, var(--pillar-path)
Route progress
Journey progress as a route rather than a bar, per the brief. Announced as a progressbar; the visual is decorative.
Empty
- Discover
- Reality
- Experience
- Path
0 of 14 · Discover
Partway — Discover done, Reality current
- Discover
- Reality
- Experience
- Path
6 of 14 · Experience
Complete
- Discover
- Reality
- Experience
- Path
14 of 14 · Path
Trail route
The amber line across the interest map. Traveled portion draws forward over a faint
dotted track. With prefers-reduced-motion the route still shows how far it
has been travelled, it just arrives without the draw.
Not started
Part-drawn, then complete
Interest map
The payoff screen. Pins carry the student's own quoted answers, and no score ever reaches the browser.
With pins, nothing selected
Tap a pin to see which of your answers led to it.
Empty — before any answers
Pins appear here as your answers come in.
Tap a pin to see which of your answers led to it.
Chat bubbles
Each bubble carries a visually hidden "PlotaPath asked:" / "You said:" prefix, so a screen reader announces who said what rather than reading a column of speech.
Physical requirement
REA-5. Three severities, and the wording matters more than the styling: the page must not tell a disabled student a job is closed to them when it is not.
Colour vision
Needed for this workTested before starting a JIB electrical apprenticeship.
A fail on the Ishihara test can be overturned by the CAD test.
Work at height
Can usually be adjustedYou will work on ladders, in roof spaces and on scaffolding.
Adjustments are normal and expected here.
Site safety certification
Check with the employerA CSCS card is normally needed for construction sites.
Varies by employer.
Only four of the fifteen careers carry a needed for this work item: two for colour vision, one driving licence, one gas certification. Everything else is adjustable or simply not tested.
Feedback and states
Error
We could not save that. Check your connection and try again.
Offline
Empty
My path
Nothing saved yet
Pins you save will appear here. You can come back to them any time.
Tokens
Surface
- ink-900 · page
- ink-800 · surface
- ink-700 · raised
- ink-600 · border
Accent
- amber · action + route only
- sky · links + Discover
- reality
- experience
- path
Type
- Display — Bricolage Grotesque, 36–52px, leading 1.1
- Body — Figtree, 18px, leading 1.55, measure 34rem
- Small — 15px
- Minimum — 14px, never smaller
Motion
- Route draw — 400ms
- Slide — 220ms
- Quick — 120ms
- Easing — cubic-bezier(0.22, 1, 0.36, 1)