App Theming
Each app overrides a small set of accent tokens while sharing the full design foundation. Import the shared token file, then layer app-specific accents.
/* Import shared tokens in any app */
@import '/design-system/platform-tokens.css';
/* Then use app-specific tokens for accents */
.btn-primary { background: var(--tips-gradient); }
.btn-primary:hover { box-shadow: var(--tips-shadow); }
Learn Phase
Main Site
Brand red -- the anchor color.
workshopr.io
--mainsite-primary
#E54D4D
--mainsite-dark
#C73E3E
--mainsite-light
#FEE2E2
--mainsite-very-light
#FEF2F2
Tips
Coral red -- lighter, approachable. Uses paper background + grid pattern.
/tips
--tips-primary
#F87171
--tips-dark
#EF4444
--tips-light
#FECACA
--tips-very-light
#FEE2E2
Podcasts
Crimson red -- deeper, richer. Audio studio aesthetic.
/podcasts
--podcasts-primary
#BE123C
--podcasts-dark
#9F1239
--podcasts-light
#FECDD3
--podcasts-very-light
#FFE4E6
Plan Phase
Planner
Cold sky blue -- focused, professional SaaS feel.
/planner
--planner-primary
#0284C7
--planner-dark
#075985
--planner-light
#BAE6FD
--planner-very-light
#E0F2FE
Facilitate Phase
Coach
Purple with a tri-color mode system for the facilitator workflow.
/coach
--coach-primary
--coach-dark
--coach-light
--coach-very-light
Mode Colors (4 purple tints)
Prep
#A78BFA
Facilitate
#8B5CF6
Synthesize
#7C3AED
Debrief
#6D28D9
Intervention
Purple with 6 category tints. Uses paper background + grid pattern.
/intervention
#4C1D95
#5B21B6
#6D28D9
#7C3AED
#8B5CF6
#A78BFA
Reflect Phase
DNA Coming Soon
Light emerald with 5 category tints.
Training
Standard emerald palette.
Token Naming Pattern
Every app follows this naming convention.
--{app}-primary /* Main accent color */
--{app}-dark /* Hover/pressed state */
--{app}-light /* Focus rings, highlights */
--{app}-very-light /* Subtle tint backgrounds */
--{app}-gradient /* 135deg gradient */
--{app}-shadow /* Colored shadow for CTAs */