Color Palette
Current (Playful & Vibrant)
Primary Purple
hsl(280, 100%, 70%)
Accent Pink
hsl(340, 100%, 70%)
Bright Yellow
hsl(50, 100%, 60%)
Modern SaaS (Refined & Professional)
Primary Indigo
#4F46E5 (Indigo-600)
Accent Violet
#8B5CF6 (Violet-500)
Neutral Background
#F1F5F9 (Slate-100)
Typography
Current (System Font)
Heading Text
32px, Bold, System UI
Body text with regular weight and standard line height for readability.
16px, Regular, Line height: 1.5
Modern SaaS (Inter Font)
Heading Text
32px, Semibold, Inter, Tight tracking
Body text with regular weight and improved line height for better readability and modern feel.
16px, Regular, Inter, Line height: 1.6
Activity Card Design
Current Design
Build a Cardboard Castle
👶 4-10 years⏱️ 1-2 hours
Use cardboard boxes, tape, and markers to design and build a castle...
Critical ThinkingCreativity
Modern SaaS Design
Build a Cardboard Castle
👶4-10 years⏱️1-2 hours
Use cardboard boxes, tape, and markers to design and build a castle...
Critical ThinkingCreativity
Button Styles
Current Buttons
Modern SaaS Buttons
Spacing & Shadows
Current Approach
Tight padding (16px)
Heavy borders, bright backgrounds
Modern SaaS Approach
Generous padding (24px)
Soft shadows, subtle borders, clean backgrounds
Key Improvements
Visual Refinements
- • Softer, more professional color palette
- • Subtle shadows instead of heavy borders
- • Generous spacing (8pt grid system)
- • Smooth hover transitions
Typography & Accessibility
- • Inter font for better readability
- • Improved line heights (1.6 for body)
- • Better color contrast (WCAG AA)
- • Larger touch targets for mobile
The modern SaaS design maintains the playful, kid-friendly feel while adding professional polish and better usability.