Workshopr Planner App Guide - Canvas Design System

App Identity

Phase

Plan

Primary Color

#0284C7

Font Stack

Fraunces + Inter

Design Philosophy

The Planner is a workspace, not a webpage. It borrows from productivity tools like Notion and Linear -- clean, structured, and highly functional.

view_column

Three-column layout

The Studio uses a sidebar (activity library) + primary pane (agenda builder) + right rail (item details) pattern. This keeps the workspace organized and discoverable.

drag_indicator

Direct manipulation

Drag-and-drop for reordering, inline editing for titles and durations, click-to-expand for details. Every interaction should feel immediate, not modal.

linear_scale

Progressive disclosure

Start with the essentials (name, duration, drag items). Advanced features (AI suggestions, export, calendar) reveal as the agenda takes shape. Don't overwhelm an empty workspace.

density_medium

High information density

Unlike the marketing site, the Planner uses tighter spacing (16px gaps, 12px padding) and smaller text (13-14px body). It's a tool, not a brochure.

Color Tokens

Sky blue palette for the Plan phase. Clean, focused, professional.

Core Palette

Primary

--planner-primary

#0284C7

Dark

--planner-dark

#075985

Light

--planner-light

#BAE6FD

Very Light

--planner-very-light

#E0F2FE

Activity Type Colors

Each activity type has a distinct color for quick visual identification.

Exercise

Icebreaker

Break

Custom

Primary UI

/* Planner app tokens (defined in css/base/_variables.css) */
--planner-primary: #0284C7;
--planner-dark: #075985;
--planner-light: #BAE6FD;
--planner-very-light: #E0F2FE;
--planner-accent: #F0F9FF;
--planner-gradient: linear-gradient(135deg, #0284C7 0%, #075985 100%);

/* Activity type tokens (also in _variables.css) */
--planner-exercise-color: #2563EB;   /* Blue */
--planner-icebreaker-color: #22C55E; /* Green */
--planner-break-color: var(--gray-500); /* Gray */
--planner-custom-color: #9333EA;     /* Purple */

/* CSS load order (header.php, modern path):
   1. <link> css/base/_variables.css
      └─ @import platform-tokens.css  (source of truth)
   2. <link> css/planner-v2.css       (main styles, consumes tokens)
   3. <link> css/planner-new.css      (incremental overrides)
   4. Deferred: _history.css, _exercise-builder.css, run-mode.css */

Layout Patterns

The Planner uses a persistent three-column layout optimized for workshop building.

Planner Layout Structure

┌──────────────────────────────────────────────────┐
│  Top Bar (workshop name, duration, actions)       │
├─────────┬──────────────────────┬─────────────────┤
│         │                      │                 │
│ Sidebar │   Primary Pane       │   Right Rail    │
│ (240px) │   (flex-1)           │   (320px)       │
│         │                      │                 │
│ Activity│   Agenda Builder     │   Item Details  │
│ Library │   (drag-and-drop)    │   / Properties  │
│         │                      │                 │
└─────────┴──────────────────────┴─────────────────┘

Column	Content	Key Features
Sidebar	Exercise/icebreaker library by category	Category tabs, search, drag source
Primary Pane	Drag-and-drop agenda builder	Timeline ruler, day dividers, cumulative time
Right Rail	Selected item details	Description, materials, facilitator notes

Key Components

Planner-specific UI patterns built for workshop creation workflows.

Activity Card (Sidebar)

Planner-specific

Compact cards in the sidebar library showing exercise name, duration badge, and category color dot. Draggable to the agenda. Hover reveals a quick-add button.

Agenda Item Row

Planner-specific

Draggable rows in the primary pane showing item title, inline-editable duration, type icon, and drag handle. Active item has a blue left border. Supports multi-day agendas with day dividers.

Right Rail Detail Panel

Planner-specific

Contextual detail panel that slides in when an agenda item is selected. Shows full exercise description, materials, instructions, and facilitator notes. Uses sticky header for item title.

Top Bar

Planner-specific

Fixed header bar showing workshop name (inline editable), total duration, progress indicator, and action buttons (save, export, share). Uses planner primary color accent.

Duration Calculator

Shared + extended

Auto-calculates total workshop duration from individual items. Displayed in the page header and updates live as items are added/removed/reordered.

Do / Don't

Do: Use inline editing

Click-to-edit for titles and durations. No modal forms for simple changes.

Don't: Open modals for every edit

Modals break flow. Reserve them for complex actions (delete confirmation, share).

Do: Use compact spacing in tool UI

16px gaps, 12px padding, 13px text. The Studio is a workspace, not a landing page.

Don't: Use marketing-style spacing

48px gaps and 18px text waste precious screen real estate in a tool interface.

Do: Keep the three-column layout stable

Sidebar, primary pane, and rail widths should stay consistent across phases.

Don't: Collapse layout between phases

Users rely on spatial memory. Moving elements breaks their mental model.

Shared Components Used

Component	Usage	Customization
`ws_tabs()`	Sidebar category filters	Compact variant for sidebar
`ws_card_start()`	Activity cards, agenda items	Compact variant, draggable attribute
`ws_badge()`	Duration labels, category tags, day markers	Blue variant for planner badges
`ws_input()`	Plan name, custom item entry, search	Inline-edit mode (borderless until focus)
`ws_modal_start()`	Delete confirm, share workshop, export	Standard usage
`ws_empty_state()`	Empty agenda, no search results	Blue accent icon
`ws_toast*()`	Saved, duplicated, deleted notifications	Standard usage
`ws_tooltip()`	Drag handles, action buttons, phase info	Standard usage
`ws_activity_badge()`	Type badges on agenda items and sidebar cards	exercise / icebreaker / break / custom types
`ws_suggestion_card()`	AI suggestion panel results	Type-colored with add-to-agenda action
`ws_modal_footer()`	Export, share, cleanup, calendar modals	Cancel + primary, or left + cancel + primary
`ws_results_overlay()`	Cleanup results, operation outcomes	Overlay variant inside modals
`ws_checkbox_card_group()`	Cleanup options panel	Toggle switches with icon colors
`ws_radio_card_group()`	Export format picker	4-column grid with icons
`ws_chip_input()`	Calendar invite attendee list	Email type with person_add icon