Academy (Training)
Workshopr Academy is the learning-management side of the platform — learning paths, microbits, ebooks, and practice sessions. It turns new facilitators into confident ones.
App Identity
Phase
Learn
Primary Color
#E54D4D
+ green accent (#10B981) for growth/progress
Font Stack
Fraunces + Inter
Migrated from Bitter + DM Sans in April 2026
Design Philosophy
Academy is a library of structured learning. It borrows from great self-paced courseware — clear progress, one thing at a time, bite-sized modules you can complete in a coffee break.
trending_up
Progress is the reward
Every surface makes progress visible: % completed, microbits remaining, learning path milestones. Green is the growth color — use it sparingly, deliberately.
menu_book
Book-like reading surfaces
Long-form microbits and ebook modules use narrow measure (~65ch), generous line-height (1.7), and Fraunces for headings. Paper-card backgrounds evoke field notebooks.
route
Paths, not menus
Learning paths are curated sequences. Use
ws_level_up_grid for the sequence view. Don't dump modules into an alphabetical list — that's a library, not a curriculum.Key Patterns
| Area | Pattern | Files |
|---|---|---|
| Learning path index | Hero + sequence grid + CTA to start. | /academy/learning-paths/ |
| Microbit reader | Narrow measure, progress bar, next/prev nav. | /academy/microbits/ |
| Ebook viewer | Chapter sidebar + reading pane. | /academy/ebook/ |
| Profile / progress | Grid of started/completed items, streak indicators. | /academy/training/index.php |
Do / Don't
Do: Use green only for progress and completion
Completion checkmarks, progress fills, "unlocked" indicators. Green earns its meaning through restraint.
Don't: Paint the page green
Green buttons for generic CTAs, green section backgrounds, green nav pills — dilutes the progress-signal and conflicts with Reflect phase (DNA/analytics).
Do: Keep reading surfaces narrow
65ch max-width on microbits and ebook pages. Long lines hurt comprehension.
Don't: Use full-width body text for learning content
Academy isn't a dashboard — don't treat its long-form pages like one.
File Reference
| Path | Purpose |
|---|---|
/academy/training/ | Training landing page + profile/progress |
/academy/learning-paths/ | Curated sequences of microbits |
/academy/microbits/ | Individual bite-sized lessons |
/academy/ebook/ | Full ebook reader (chaptered long-form) |
/css/academy/styles.css | Academy-specific styles |
/css/academy/training.css | Training landing styles |