Canvas Design System
Main Site Tokens

Planner Card

Agenda and palette card used inside the Workshop Planner. Two sizes — lg for the timeline canvas and sm for the draggable library palette. Each card takes a type (exercise, icebreaker, break, custom) that drives its accent color.

Large — Types

Timeline-canvas variant showing the three core activity types plus the custom accent. Type drives the eyebrow label and accent color; the duration pill uses the same accent.

EXERCISES

Abstraction Laddering

60m
ICEBREAKER

Two truths and a lie

10m
BREAK

Morning Coffee Break

15m
CUSTOM

Custom Check-in

20m 
<?= ws_planner_card('Abstraction Laddering', [
    'type'      => 'exercise',
    'duration'  => '60m',
    'size'      => 'lg',
    'draggable' => true,
    'actions'   => ['swap', 'delete'],
]) ?>

Large — States

Default, selected (accent-color border emphasis), and disabled (dimmed, non-interactive).

Default

EXERCISES

Abstraction Laddering

60m

Selected

EXERCISES

Abstraction Laddering

60m

Disabled

EXERCISES

Abstraction Laddering

60m 
<?= ws_planner_card('Abstraction Laddering', [
    'type'     => 'exercise',
    'duration' => '60m',
    'state'    => 'selected', // default | selected | disabled
]) ?>

Small — Palette

Compact card used in the planner library palette as a draggable source. Shows title and duration pill at rest; a swap icon slides in on hover (or focus-within) so facilitators can switch a palette item for another without leaving the canvas. Disabled cards never surface the hover affordance, and touch/coarse-pointer devices always show the icon.

Default — hover to reveal swap icon

Lightning Decision Jam

10m

Disabled — no hover affordance

Lightning Decision Jam

10m 
<?= ws_planner_card('Lightning Decision Jam', [
    'type'     => 'exercise',
    'duration' => '10m',
    'size'     => 'sm',
]) ?>

Small — All Types

Lightning Decision Jam

10m

Never Have I Ever

5m

Lunch

45m

Client Standup

15m

API Reference

Option Type Default Description
titlestring—Card title (required, first positional arg).
typestringexerciseexercise | icebreaker | break | custom. Drives eyebrow label and accent color.
durationstring | int''Duration label. Integer minutes are formatted as "60m".
sizestringlglg (timeline) or sm (palette).
statestringdefaultdefault, selected, or disabled.
draggableboolfalseShow drag handle (lg only).
actionsarray[]Array of action keys: swap, delete, edit (lg only).
hrefstring—If set, renders card as an <a>.
idstring—Element id.
classstring—Additional CSS classes.
attrsarray—Additional HTML attributes (e.g. data-*).

Design Guidance

Do

  • Use lg on the planner timeline, sm in the library palette.
  • Let the type token drive the color — do not hardcode accent colors in consumers.
  • Use selected to indicate the currently focused/editing card.
  • Use disabled for palette items already added to the agenda when they shouldn't be re-added.

Don't

  • Don't mix lg and sm cards in the same column — they target different regions.
  • Don't add the LG actions array to sm cards — the palette only surfaces a single hover-revealed swap affordance by design.
  • Don't override the duration pill color — it intentionally inherits the type accent.