Facilitator
The live-session surface. Facilitators run a workshop from here — timers, participant tracking, agenda progression, interventions on demand. Unlike other apps, Facilitator is designed to be glanced at mid-session, not studied.
App Identity
Phase
Facilitate
Primary Color
#7C4DFF
Font Stack
Fraunces + Inter
Design Philosophy
Facilitator UI is used while running a live session — attention is on people in the room, not the screen. Every design choice should reduce cognitive load and keep the next action obvious.
timer
Glanceable over detailed
Time remaining, current activity, next-up — these must be readable from across the room. Oversized type, high contrast, no decorative flourish.
bolt
One primary action always visible
"Advance to next item," "Start timer," "Add 5 min" — the expected next move is a single oversized button, never buried in a menu.
medical_services
Interventions are one tap away
When a group goes off the rails, the facilitator shouldn't hunt through menus. Intervention cards are in a persistent drawer, filterable by category, always reachable.
dark_mode
Dark surfaces for stage display
Live-mode / presenter view uses a dark palette with glassmorphism overlays — low-glare for projectors, no accidental bright flashes when a modal opens.
Key Patterns
| Area | Pattern | Files |
|---|---|---|
| Live mode (stage) | Full-screen timer + current activity + next-up. Dark palette, glassmorphism. | /planner/live/, /css/planner/live-mode.css |
| Facilitator dashboard | Session list, participant count, quick-start, recent sessions. | /facilitator/ |
| Intervention drawer | Persistent side drawer with category chips + card list. Purple gradient header. | /css/intervention-drawer.css |
| Participant view | Mobile-optimized participant-facing screens (prep, live timer, RSVP). | /css/facilitator/participant.css, /css/participant/ |
| Session summary | Post-session reflection prompts + metrics. | /css/facilitator/summary.css |
Do / Don't
Do: Use purple as the Facilitate phase signal
#7C4DFF for primary actions, accents, phase nav. Paired with dark purple gradient for hero/drawer headers.
Don't: Mix purple with Plan blue as accent colors
The handoff from Plan → Facilitate is a phase transition. A plan-mode blue accent inside facilitator UI muddles that.
Do: Oversize typography in live mode
Current activity title at 48px+, timer at 72px+. Readable from 10 meters away.
Don't: Apply live-mode sizing to the dashboard
The dashboard is used at a desk. Use the default platform type scale there.
Do: Surface the intervention drawer on every facilitator page
Facilitators might need a technique at any moment. The drawer trigger is always reachable (bottom-right floating button).
Don't: Hide interventions behind a "more" menu
Extra clicks cost attention mid-workshop. Flatten the path.
info
Phase mapping reminder: The Facilitator page (
/facilitator/) is in the Facilitate phase. The Coach page (/coach/) is in the Reflect phase — don't confuse them.File Reference
| Path | Purpose |
|---|---|
/facilitator/ | Facilitator dashboard + session views |
/planner/live/ | Live stage mode (run a session) |
/css/facilitator/facilitator.css | Dashboard/session styles |
/css/facilitator/participant.css | Participant-side views |
/css/facilitator/summary.css | Post-session summary |
/css/planner/live-mode.css | Dark stage-mode styling |
/css/intervention-drawer.css | Intervention drawer shared across apps |