Workshopr Coach App Guide - Canvas Design System

App Identity

Phase

Facilitate

Primary Color

#7C4DFF

Font Stack

Fraunces + Source Sans 3

Design Philosophy

The Coach is a facilitator's trusted companion in high-stakes moments. Every design decision optimizes for calm confidence and quick access.

psychology

Calm under pressure

Live facilitation is stressful. The Coach uses generous whitespace, soft backgrounds (#F8FAFC), and muted borders to create a visually quiet environment. No bold distractions -- information surfaces when needed.

view_sidebar

Mode-driven navigation

Three modes (Prep, Facilitate, Reflect) each have distinct layouts and color tints. Users always know where they are through tab-based navigation and subtle background shifts.

smart_toy

AI as a gentle assistant

AI suggestions appear in clearly marked cards -- never aggressive pop-ups. AI-generated content uses a subtle left-border accent and a "sparkle" icon to distinguish it from user content.

timer

Time-aware interface

Live mode features timers, progress bars, and session clocks. These use semantic colors (green = on track, amber = watch, red = over) rather than the app's purple accent.

Color Tokens

The Coach uses a purple palette with four mode-specific tints. Import from platform-tokens.css.

Core Palette

Primary

--coach-primary

#7C4DFF

Dark

--coach-dark

#6D28D9

Light

--coach-light

#DDD6FE

Very Light

--coach-very-light

#EDE9FE

Mode Tints

Prep

#A78BFA

Facilitate

#8B5CF6

Synthesize

#7C3AED

Debrief

#6D28D9

/* Coach app tokens */
--coach-primary: #7C4DFF;
--coach-dark: #6D28D9;
--coach-light: #DDD6FE;
--coach-very-light: #EDE9FE;
--coach-gradient: linear-gradient(135deg, #7C4DFF 0%, #6D28D9 100%);
--coach-shadow: 0 4px 14px rgba(124, 77, 255, 0.25);

/* Mode tints */
--coach-mode-prep: #A78BFA;
--coach-mode-facilitate: #8B5CF6;
--coach-mode-synthesize: #7C3AED;
--coach-mode-debrief: #6D28D9;

Layout Patterns

Each Coach mode has a distinct layout optimized for its workflow.

Mode	Layout	Max Width	Key Pattern
Prep	Single column, scrollable	`1000px`	Collapsible info cards, AI briefing panel
Facilitate	50/50 split pane	`Full width`	Agenda left, scripts/resources right
Reflect	Single column, guided flow	`800px`	Sequential debrief questions, analytics

Key Components

Coach-specific patterns built on the shared component library.

AI Suggestion Card

Coach-specific

AI-generated recommendations appear in cards with a left purple border, sparkle icon, and subtle gradient background. Users can accept, dismiss, or regenerate.

<div class="ai-suggestion">
  <div class="ai-suggestion__icon">✨</div>
  <div class="ai-suggestion__content">...</div>
  <div class="ai-suggestion__actions">
    <button class="btn-accept">Use This</button>
    <button class="btn-dismiss">Dismiss</button>
  </div>
</div>

Session Timer

Coach-specific

Sticky timer bar in Facilitate mode shows elapsed/remaining time with semantic color states. Uses --color-success, --color-warning, and --color-error tokens.

On Track

Watch

Over Time

Mode Tabs

Shared + extended

Extends the shared ws_tabs() component with Coach-specific mode icons and color-coded active states. The active tab underline uses the mode's tint color.

Agenda Item Row

Coach-specific

Clickable agenda rows with duration badges, current-item highlight (purple left border), and completion checkmarks. Supports drag-reordering in Prep mode.

Plan Selector

Shared + extended

Dropdown for selecting which workshop plan to coach. Uses the shared ws_select() component with custom rendering for plan cards showing title, duration, and item count.

Do / Don't

Do: Use muted AI indicators

Purple left border + sparkle icon. AI content is clearly marked but doesn't fight for attention.

Don't: Use flashy AI badges

Avoid "AI POWERED" banners or glowing effects. The Coach should feel like a natural extension of the facilitator's thinking.

Do: Use semantic timer colors

Green/amber/red for time status. The facilitator needs instant visual feedback.

Don't: Use purple for time states

Purple is the app brand, not a signal color. Reserve semantic colors for meaning.

Do: Keep Facilitate mode distraction-free

Minimal chrome, no sidebar, focus on agenda + script content.

Don't: Add feature-rich toolbars in live mode

Live facilitation needs focus, not options. Progressive disclosure only.

Shared Components Used

Component	Usage	Customization
`ws_tabs()`	Mode navigation (Prep/Facilitate/Reflect)	Custom icons, mode-colored active underline
`ws_card_start()`	AI suggestions, session info, agenda sections	Purple left-border variant for AI content
`ws_progress()`	Session progress, time remaining	Semantic color states
`ws_badge()`	Duration labels, risk flags, mode indicators	Purple variant for coach-specific badges
`ws_modal_start()`	Plan selector, intervention card viewer	Standard usage
`ws_select()`	Plan picker, participant count	Custom option rendering for plans
`ws_toast*()`	Session saved, timer alerts, AI status	Standard usage
`ws_skeleton()`	AI content loading, session data fetching	Standard usage