Main Site
Workshopr.io's public-facing surface — homepage, library (exercises / icebreakers / workshops / collections / goals), about, contact, search, legal, and the shared global header/footer. This is the first impression and the content library users browse.
App Identity
Phase
Learn
Primary Color
#E54D4D
Font Stack
Fraunces + Inter
Design Philosophy
The main site is a content destination, not a tool. It leans editorial — warm paper backgrounds, wide margins, serif display type — optimized for browsing a library and telling a story about facilitation.
auto_stories
Editorial warmth
Cream backgrounds (
--bg-page: #FEF7F1), no pure whites or blacks. Fraunces sets the voice — confident serif headlines that say "library," not "app."
search
Browse before buy
The library is fully public — no login wall. Content cards, category grids, and faceted filters are the core UI. Sign-up only gates save/export/plan.
hub
Phase routing hub
Mainsite is the entry point that routes users to the four platform phases (Learn/Plan/Facilitate/Reflect). The global header's phase pills are the wayfinding.
Key Patterns
| Area | Pattern | Files |
|---|---|---|
| Global header/footer | Phase-aware header (blue/purple/red/green accent per page). Footer has newsletter + nav + social. | /includes/global-header.php, /includes/footer.php |
| Library listings | Category grid → content listing → detail page. Filterable by goal, duration, group size. | /library/exercises/, /library/icebreakers/, /library/workshops/ |
| Detail pages | Hero + metadata + body + related items. Uses ws_listing_card for related content. |
/library/*/detail/index.php |
| Hero sections | ws_hero() on landing/about/legal. Fraunces display + Inter subtitle. |
/index.php, /about/ |
| Search | Full-library faceted search with type filters (exercise/icebreaker/workshop). | /search/ |
Do / Don't
Do: Use Fraunces for page-level display
H1s, hero titles, section names. The serif is core to the brand voice.
Don't: Set Fraunces on body paragraphs
Long-form body text uses Inter. Fraunces as body is fatiguing and off-brand.
Do: Lead with `#E54D4D` as the brand accent
Primary CTAs, link hovers, emphasis underlines. This is mainsite's ownable color.
Don't: Reach for blue, purple, or green as primary
Those are reserved for Plan, Facilitate, and Reflect phases. Using them on mainsite muddles the phase wayfinding.
Do: Keep the library public
Anyone can browse exercises/workshops/icebreakers without an account. It's a content destination first.
Don't: Gate browse behind auth
Auth is required only for save/plan/share/favorite. Gating browse kills discovery.
File Reference
| Path | Purpose |
|---|---|
/index.php | Homepage (hero, featured content, phase routing) |
/library/* | Exercise, icebreaker, workshop, collection, and goal libraries |
/about/, /contact/, /legal/ | Standard marketing pages |
/search/ | Cross-library search |
/changelog/ | Platform-wide changelog (all apps) |
/includes/global-header.php | Phase-aware shared header (property: mainsite) |
/css/styles.css | Mainsite styles |