🎨 Brand Colors

Our color palette reflects the playful, magical nature of bubblegum while maintaining accessibility and readability across all platforms.

✍️ Typography

Our typography system balances playfulness with readability, using custom fonts for brand moments and clean system fonts for content.

Typography Guidelines

• Candy Swirl Bold is a custom typeface developed exclusively for Bubblegum. It may not be redistributed or used without permission.
• Use Candy Swirl Bold sparingly - it should feel special and magical, reserved for brand moments and key headings
• Nunito handles all the heavy lifting for readability in body text and UI elements
• Maintain proper line height (1.4-1.6) for body text
• Use font weight to create hierarchy within the same font family
• Ensure text remains readable at all sizes and on all backgrounds

🎭 Visual Style & Personality

Design Principles

• Soft & Approachable: Rounded corners, gentle gradients, no sharp edges
• Playful but Professional: Fun without sacrificing usability
• Magical & Delightful: Subtle animations, gradient backgrounds, sparkle effects
• Clean & Organized: Plenty of white space, clear hierarchy
• Inclusive & Accessible: High contrast, readable fonts, clear navigation

Visual Elements

Interactive States Guidelines

Based on our Flutter app implementation:

GradientActionButton (Primary Actions):

• No Hover Effects: Uses press states instead of hover (mobile-first design)
• Press State: Tracks _isPressed boolean for visual feedback
• Opacity: 60% opacity for disabled state
• Border Radius: Fully rounded (height / 2)
• Haptic Feedback: HapticFeedback.mediumImpact() on tap
• Theme Colors: Uses theme.colorScheme.primary and theme.colorScheme.secondary

CompactButton (Secondary Actions):

• Hover Scale Effect: scale(1.05) with 200ms duration and Curves.easeOutCubic
• Hover Colors: Gradient overlay (15% to 8% opacity) for outlined variant
• Shadow Enhancement: Blur radius increases from 8px to 12px on hover
• Border Animation: Width changes from 1.0px to 1.5px on hover for outlined buttons
• Border Radius: Fixed 8px corners
• Hardcoded Colors: Uses #FF63CA and #AE5EFF for light mode, #E85BB8 and #8B4BC7 for dark mode
• Responsive Padding: 12px or 4px horizontal based on width constraints
• Haptic Feedback: HapticFeedback.mediumImpact() on tap

General Guidelines:

• Transition Duration: 200ms for all interactive states
• Disabled States: 60% opacity with no interactive effects
• Cursor States: SystemMouseCursors.click for enabled, basic for disabled

Celebration Animation

Animation Guidelines

• Duration: 200-300ms for most interactions
• Easing: Use smooth, natural easing functions
• Scale effects: Subtle (1.02-1.05) for hover states
• Fade transitions: For content changes and loading states
• Avoid: Jarring or overly dramatic animations

🖼️ Logo & Brand Marks

Logo Assets

We have two primary logo assets available in our Flutter app:

• bubblegum-full-logo.png: Complete wordmark with full branding
• bubblegum-logo.png: Simplified logo mark for compact spaces

Logo Usage Examples

Full Logo

Complete wordmark with Bubblegum branding

Icon Mark

Simplified mark for small spaces and dark backgrounds

Stylized Bubblegum Typography

The Bubblegum component renders our brand name using Candy Swirl Bold, our custom typeface:

Logo Specifications

• Primary Logo: Full wordmark with Candy Swirl Bold typography
• Icon Mark: Simplified bubble/gum icon for small spaces
• Minimum Size: 24px height for icon, 120px width for wordmark
• Clear Space: Minimum 1x the height of the logo on all sides
• File Formats: PNG assets optimized for mobile and web use

Logo Colors

Logo Don'ts

• Don't stretch or distort the logo
• Don't use on backgrounds with insufficient contrast
• Don't add effects, shadows, or outlines
• Don't use outdated versions
• Don't place on busy or distracting backgrounds

📱 Platform-Specific Guidelines

Mobile App (Flutter)

• Use the full color system with level-based colors for language proficiency levels (A1-C2)
• Implement proper dark/light theme switching
• Ensure touch targets are minimum 44px
• Use the surface container hierarchy for depth
• Apply consistent border radius throughout

Web (React/Next.js)

• Maintain color consistency with the app
• Use backdrop blur effects for modern appearance
• Implement responsive typography scaling
• Ensure accessibility compliance (WCAG 2.1 AA)
• Use CSS custom properties for theme switching

Social Media

• Profile Images: Use the icon mark with brand gradient background
• Cover Images: Incorporate brand colors and Candy Swirl typography
• Post Graphics: Maintain 70% brand colors, 30% content imagery ratio
• Stories: Use brand gradient overlays with white text

🎨 Color Accessibility

Contrast Requirements

• Normal Text: Minimum 4.5:1 contrast ratio
• Large Text: Minimum 3:1 contrast ratio
• UI Elements: Minimum 3:1 contrast ratio
• Brand Colors: All primary colors meet AA standards

Color Blindness Considerations

• Never rely on color alone to convey information
• Use icons, patterns, or text labels alongside color coding
• Test with color blindness simulators
• Provide alternative visual cues for important information

Dark Mode Considerations

• Increase brightness of accent colors for better visibility
• Use the designated dark theme color palette
• Maintain the same contrast ratios as light mode
• Test readability in various lighting conditions

🛠️ Implementation Guidelines

CSS Custom Properties

:root {
  /* Light Mode Colors */
  --color-primary-light: #FF63CA;
  --color-secondary-light: #AE5EFF;
  
  /* Dark Mode Colors */
  --color-primary-dark: #E85BB8;
  --color-secondary-dark: #8B4BC7;
  
  /* Common Colors */
  --color-tertiary: #00B8B8;
  --color-background-light: #F8F9FE;
  --color-text-light: #392D38;
  --color-background-dark: #1E1E2E;
  --color-text-dark: #FFFFFF;
  
  /* Typography */
  --font-display: 'Candy Swirl', cursive;
  --font-body: 'Nunito', sans-serif;
  
  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
}

🔄 Brand Evolution

Future Considerations

• Seasonal color variations for special events
• Accessibility improvements as standards evolve
• Platform-specific optimizations
• User customization options

This visual identity system is designed to grow with Bubblegum while maintaining our core personality: playful, approachable, magical, and always focused on making language learning delightful. Every visual choice should reinforce our mission of creating joyful, human-centered learning experiences.