Workshopr Intervention Cards
37 tap-accessible cards for common facilitation challenges. A standalone microsite that also integrates into the Coach's Facilitate mode. Designed for quick access during live sessions.
App Identity
Phase
Facilitate
Primary Color
#7C4DFF
Font Stack
Bitter + DM Sans
info
The Intervention site uses Bitter (serif display) and DM Sans (body), distinct from the main site's Fraunces + Inter. This gives it a more editorial, "handbook" feel suited to quick-reference content.
Design Philosophy
Intervention cards must be scannable in seconds. A facilitator reaches for one when something goes wrong -- the design prioritizes speed and clarity over aesthetics.
bolt
2-second access
Every card must be reachable in two taps: category, then card. The homepage shows all 6 categories with card counts. No nested navigation, no search-first patterns.
style
Physical card metaphor
Cards use paper-like cream backgrounds (
--bg-page), subtle shadows, and rounded corners. The design evokes index cards or flash cards -- tactile, familiar, quick to flip through.
category
Category color coding
6 categories, 6 purple tints. Color appears as left-border on cards, category badges, and hero accents. Users build color associations: darker = more urgent situations.
print
Print-ready design
Cards are designed to be downloadable and printable. The layout, typography, and contrast work in both digital and physical formats. Print styles strip backgrounds and optimize for paper.
Color Tokens
Purple palette shared with the Coach (both Facilitate phase) but with distinct category tints.
Core Palette
Primary
--intervention-primary
#7C4DFF
Dark
--intervention-dark
#5B21B6
Light
--intervention-light
#DDD6FE
Very Light
--intervention-very-light
#EDE9FE
Category Tints (6 Purple Levels)
Darkest = most urgent situations. Lightest = softest, trust-building scenarios.
Energy & Engagement
#4C1D95
Conflict & Tension
#5B21B6
Participation
#6D28D9
Time & Pacing
#7C3AED
Focus & Clarity
#8B5CF6
Connection & Trust
#A78BFA
/* Intervention app tokens */ --intervention-primary: #7C4DFF; --intervention-dark: #5B21B6; --intervention-light: #DDD6FE; --intervention-very-light: #EDE9FE; --intervention-gradient: linear-gradient(135deg, #7C4DFF 0%, #5B21B6 100%); --intervention-shadow: 0 4px 14px rgba(124, 77, 255, 0.25); /* Category tints (dark = urgent, light = soft) */ --intervention-cat-1: #4C1D95; /* Energy & Engagement */ --intervention-cat-2: #5B21B6; /* Conflict & Tension */ --intervention-cat-3: #6D28D9; /* Participation */ --intervention-cat-4: #7C3AED; /* Time & Pacing */ --intervention-cat-5: #8B5CF6; /* Focus & Clarity */ --intervention-cat-6: #A78BFA; /* Connection & Trust */
Typography
The Intervention site uses a distinct font pairing for its editorial, handbook feel.
| Role | Font | Weight | Usage |
|---|---|---|---|
| Display | Bitter |
600-700 | Hero titles, card titles, section headings |
| Body | DM Sans |
400-600 | Card content, descriptions, navigation |
| Accent | Fraunces |
500-600 | Eyebrows, special callouts (inherited from platform) |
info
Unlike other apps that use Fraunces + Inter, the Intervention microsite uses Bitter + DM Sans. This creates a more "reference book" feel appropriate for quick-lookup content.
Card Anatomy
Each intervention card follows a consistent structure optimized for scanning.
Card Structure
┌─────────────────────────────────────┐ │ ┌────┐ │ │ │Icon│ Card Title │ │ └────┘ Category Badge │ │ │ │ Trigger: │ │ "When you notice..." │ │ │ │ Quick Response: │ │ "Try saying..." │ │ │ │ ┌─────────────────────────────────┐ │ │ │ Steps: │ │ │ │ 1. First action │ │ │ │ 2. Follow-up │ │ │ │ 3. Resolution │ │ │ └─────────────────────────────────┘ │ │ │ │ Pro Tip │ │ "Advanced advice..." │ └─────────────────────────────────────┘
| Element | Purpose | Style |
|---|---|---|
| Left border | Category color identification | border-left: 4px solid var(--cat-color) |
| Trigger | When to use this card | Italic, muted color, "When you notice..." format |
| Quick Response | Immediate thing to say/do | Bold, boxed, high-contrast for quick scanning |
| Steps | Detailed resolution process | Numbered list, contained in subtle card |
| Pro Tip | Expert-level advice | Amber-highlighted callout box |
Key Components
Category Grid
Intervention-specific
Homepage grid of 6 category cards. Each shows category icon, name, card count, and a sample card preview. Color-coded left border matches the category tint.
Card List View
Intervention-specific
Category page showing all cards as compact rows with title, trigger preview, and category dot. Click expands to full card detail.
Download CTA Section
Intervention-specific
Prominent download section for printable card deck. Email capture with preview image. Uses the intervention gradient as background.
Hero Section
Shared pattern
Split hero with text left, card preview image right. Stats row (37 cards, 6 categories, 2s access). Uses the cream paper background with subtle dot-grid pattern.
Integration with Coach
Intervention cards appear inside the Coach's Facilitate mode as a sidebar panel.
Standalone vs. Embedded
| Aspect | Standalone Microsite | Embedded in Coach |
|---|---|---|
| Layout | Full page, marketing hero | Sidebar panel, compact cards |
| Typography | Bitter + DM Sans | Inherits Coach fonts (Fraunces + Source Sans) |
| Navigation | Breadcrumbs, category pages | Accordion categories, search filter |
| Card detail | Full page | Modal overlay |
Do / Don't
Do: Lead with the Quick Response
The facilitator needs one actionable sentence first. Details come second.
Don't: Bury the response in theory
Long preambles defeat the purpose. Trigger, then response, then details.
Do: Use category colors consistently
Left borders, badges, and icons all match. Users learn to spot their category by color.
Don't: Mix category color with semantic color
Don't use red (#EF4444) for "conflict" category. All categories use purple tints.
Do: Design for print
Cards should look great printed on paper. Test contrast and readability at physical size.
Don't: Rely on hover states for critical info
Cards must work on tablets (common in live sessions) and in print. All info should be visible.
Font Migration Plan
warning
Planned for v1.7: Intervention currently uses Bitter (display) + DM Sans (body). These should migrate to the platform fonts Fraunces (headings) + Inter (body) for cross-app consistency.
Migration Steps
| Step | Action | Notes |
|---|---|---|
| 1 | Update intervention/css/intervention.css font imports | Replace Bitter/DM Sans Google Fonts imports with Fraunces/Inter |
| 2 | Update --font-display and --font-body overrides | Change to var(--font-heading) and var(--font-body) from platform-tokens |
| 3 | Adjust font-weight values | Bitter 600 ≈ Fraunces 500; DM Sans 500 ≈ Inter 500 |
| 4 | Visual QA | Check the "handbook" card layouts — line heights may differ with Fraunces serifs |