FounderWell Theme Demo

Brand colors and component showcase

Semantic Colors

Use these for standard UI patterns (buttons, alerts, badges)

Primary Badge

Secondary Badge

Accent Badge

Status Colors

Info: Support, Gratitude, Growth features

Success: Wellbeing, Challenges completed

Warning: Direction needed, Documents pending

Error: Action required

Full Opacity Brand Colors

Direct access to FounderWell brand colors for specific features

Dark Blue

Focus, Sessions

Blue

Support, Growth

Green

Wellbeing

Yellow

Direction

Magenta

Settings

Orange

Accents

Light Background Colors

Softer backgrounds for sections and content areas

WELCOME

Welcome sections and onboarding flows

EXIT WELL

Check-ins and assessment forms

SCALE WELL

Growth tracking and progress

LIVE WELL

Wellness content and guidance

BE WELL

Mental health and self-care

Component Examples

Session Card

1-on-1 Coaching Session

Scheduled for tomorrow at 2:00 PM with Sarah Thompson

Focus Business Strategy

Wellbeing Section

Your Wellbeing Journey

Check-ins Complete

This month

Wellbeing Score

8.5

↗︎ +1.2 from last month

Active Days

Out of 30

Form Example

CSS Classes Reference

Class	Color	Usage
`.bg-fw-dark-blue`		Focus, Sessions
`.bg-fw-blue`		Support, Growth
`.bg-fw-green`		Wellbeing, Challenges
`.bg-fw-yellow`		Direction, Documents
`.bg-fw-magenta`		Settings, Thoughts
`.bg-fw-orange`		Accents, Errors

Complete Documentation

See docs/THEME_COLORS.md for detailed usage guidelines and examples.