Canvas Design System
Main Site Tokens

Patterns & Templates

Reusable page-level patterns, background textures, and section variants used across the platform.

Page Backgrounds

Three background strategies depending on the app context.

Warm Cream
Default for main site.
--bg-page: #FEF7F1
Paper + Grid
Tips, Intervention, Podcasts.
bg-pattern-grid
Dot Pattern
Subtle texture layer.
bg-pattern-dots

Section Variants

section-light
#FFFFFF -- Standard content sections
.section-light
section-alt
gray-50 -- Alternating sections
.section-alt
section-dark
Ink (#2C2416) -- Footers, features
.section-dark
section-navy
Navy gradient -- Coach headers, CTAs
.section-navy
section-accent-green
Success tint -- Podcast hosts
.section-accent-green
section-accent-amber
Warning tint -- Tips subscribe
.section-accent-amber

Category Icon Gradients

Content card icons use gradient-filled containers per category.

lightbulb
Ideation/Energizer
lightbulb
Strategy/Sprint
lightbulb
Team/Alignment
lightbulb
Design/Creative
lightbulb
Feedback/Retro
lightbulb
Remote/Innovation
lightbulb
Default

App Switcher (Property Switcher)

Global navigation component for switching between Workshopr applications. Appears in the unified header.

Trigger Button
menu_book
Library expand_more
→ Click to open dropdown
Dropdown Structure
Learn
menu_book
Library
Browse exercises
check
tips_and_updates
Tips
Quick advice
podcasts
Podcasts
Audio content
Plan & Facilitate
calendar_month
Planner
Build agendas
smart_toy
Coach
AI assistant
style
Interventions
Response cards
App Colors Reference
App Phase Primary Color CSS Variable
Library Learn #E54D4D --mainsite-primary
Tips Learn #F87171 --tips-primary
Podcasts Learn #BE123C --podcasts-primary
Planner Plan #0284C7 --planner-primary
Coach Facilitate #7C4DFF --coach-primary
Interventions Facilitate #7C4DFF --intervention-primary
Training Reflect #10B981 --training-primary
info
CSS: unified-header.css contains all app switcher styles. Use data-property="coach" attribute on header to set active app color theming.

User Menu & Sign-in

Authentication states and user account dropdown in the unified header.

Logged Out State
login Sign In
Primary CTA button with app gradient
Logged In - Trigger
JD
Jane expand_more
Avatar + name + chevron
User Dropdown
Account Type Badges
Free Pro Team

Standard Page Template

Every page follows this PHP template structure.

<?php $page_title = 'Page Title'; require_once 'includes/data.php'; require_once 'includes/header.php'; ?> <div class="container"> <h1>Page Title</h1> <!-- content --> </div> <?php require_once 'includes/footer.php'; ?>