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
#E54D4D
Font Stack
Fraunces + Inter (shared)
info
The Intervention site uses the platform fonts Fraunces (serif display) + Inter (body), matching the rest of Workshopr for cross-app consistency. The editorial, "handbook" feel comes from layout, color, and paper-card metaphors rather than font choice.
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 red 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
Red palette (Learn red, #E54D4D). Intervention sits in the Facilitate phase but deliberately uses red — not facilitate purple — as its accent. Intervention pages locally override --phase-facilitate / --intervention-primary / --coach-primary to red.
Core Palette
Primary
--intervention-primary
#E54D4D
Dark
--intervention-dark
#C73E3E
Light
--intervention-light
#FEE2E2
Very Light
--intervention-very-light
#FEF2F2
Category Tints (6 Red Levels)
Darkest = most urgent situations. Lightest = softest, trust-building scenarios.
Energy & Engagement
#7F1D1D
Conflict & Tension
#991B1B
Participation
#B91C1C
Time & Pacing
#C73E3E
Focus & Clarity
#E54D4D
Connection & Trust
#F87171
/* Intervention app tokens */ --intervention-primary: #E54D4D; --intervention-dark: #C73E3E; --intervention-light: #FEE2E2; --intervention-very-light: #FEF2F2; --intervention-gradient: linear-gradient(135deg, #E54D4D 0%, #C73E3E 100%); --intervention-shadow: 0 4px 14px rgba(229, 77, 77, 0.25); /* Category tints (dark = urgent, light = soft) */ --intervention-cat-1: #7F1D1D; /* Energy & Engagement */ --intervention-cat-2: #991B1B; /* Conflict & Tension */ --intervention-cat-3: #B91C1C; /* Participation */ --intervention-cat-4: #C73E3E; /* Time & Pacing */ --intervention-cat-5: #E54D4D; /* Focus & Clarity */ --intervention-cat-6: #F87171; /* Connection & Trust */
Typography
The Intervention site uses a distinct font pairing for its editorial, handbook feel.
| Role | Font | Weight | Usage |
|---|---|---|---|
| Display | Fraunces |
500-700 | Hero titles, card titles, section headings |
| Body | Inter |
400-600 | Card content, descriptions, navigation |
| Accent | Fraunces |
500-600 | Eyebrows, special callouts |
info
Intervention uses the platform type stack (Fraunces + Inter). The "reference book" feel comes from the paper-card visual treatment and category color coding, not from a unique font choice.
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 | Fraunces + Inter | 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 reach for the semantic error red (#EF4444) for a "conflict" category — categories use the intervention red tints (#7F1D1D → #F87171), kept distinct from semantic alert colors.
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 Complete
check_circle
Shipped v1.7: Intervention now uses the platform fonts Fraunces (display) + Inter (body), replacing the former Bitter + DM Sans stack. Font variables live in
css/intervention/styles.css.