Design Philosophy
Workshopr's design sits at the intersection of warmth and professionalism. We build tools for facilitators -- people who guide human connection.
Design Direction: Warmth & Approachability
We chose this direction for three reasons:
groups
Our users are people-people
Facilitators value human connection. Cold, clinical interfaces feel wrong.
shield
Our tools support high-stakes moments
Live sessions, workshop planning, and coaching require confidence and clarity.
apps
We're a multi-app platform
Visual consistency across 8+ apps requires a strong shared foundation with room for per-app personality.
Core Principles
local_fire_department
Warm, not cute
Use warm neutrals and soft shadows, but keep typography and spacing precise. Ink text (
#2C2416) instead of pure black; cream backgrounds instead of pure white.
grid_on
Structured, not rigid
Cards and grids provide order; generous spacing provides breathing room. 12px radius cards, 24px gaps, clear visual hierarchy.
palette
Color has meaning
Phase colors orient users in the facilitator journey; accents signal actions and states. Red = Learn, Blue = Plan, Purple = Facilitate, Green = Reflect.
unfold_more
Progressive disclosure
Show what matters now, reveal complexity on demand. Coach mode tabs, collapsible sections, contextual actions.
view_quilt
Consistent surface, varied content
Cards share the same shell (radius, shadow, padding) but have different internal layouts. Content cards, collection cards, and metric cards all look cohesive.
What We Don't Do
Hard rules that keep the design system consistent.
close
No pure black text. Always use
--color-ink (#2C2416) for warmth.
close
No pure white backgrounds on the page level. Use
--bg-page (#FEF7F1) or --bg-page-alt (#FFFBF8).
close
No decorative gradients. Gradients are reserved for buttons, headers, and phase indicators.
close
No bouncy/spring animations. Transitions are smooth and fast (150-300ms, ease curve).
close
No thick borders for decoration. Use 1px borders or elevation, never 2px+ decorative borders.
Do / Don't Examples
Do: Warm ink color
color: #2C2416;
Subtle brown undertones create approachable text.
Don't: Pure black
color: #000000;
Too harsh, creates uncomfortable contrast.
Do: Cream page background
background: #FEF7F1;
Warm, inviting foundation for content.
Don't: Pure white page
background: #FFFFFF;
White is for card surfaces, not page backgrounds.
Do: Smooth 200ms ease
transition: all 200ms ease;
Responsive but not distracting.
Don't: Bouncy spring effects
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
Playful animations undermine professional trust.