3.2 KiB
3.2 KiB
Color Scheme Update - Pink & Blue Theme
Overview
The entire website theme has been updated to use Pink as Primary and Blue as Secondary colors, replacing the previous purple-pink scheme.
New Color Palette
Primary Colors (Pink)
- Primary:
#ec4899(Hot Pink) - Primary Dark:
#db2777(Deep Pink) - Primary Light:
#f472b6(Light Pink)
Secondary Colors (Blue)
- Secondary:
#3b82f6(Bright Blue) - Secondary Dark:
#2563eb(Deep Blue) - Secondary Light:
#60a5fa(Light Blue)
Accent Colors (Unchanged)
- Accent:
#14b8a6(Teal) - Accent Dark:
#0d9488(Dark Teal)
Updated Gradients
All gradients now flow from Pink → Blue:
- Primary Gradient:
linear-gradient(135deg, #ec4899 0%, #3b82f6 100%) - Secondary Gradient:
linear-gradient(135deg, #f472b6 0%, #60a5fa 100%) - Accent Gradient:
linear-gradient(135deg, #db2777 0%, #2563eb 100%) - Hero Gradient:
linear-gradient(135deg, #ec4899 0%, #db2777 30%, #3b82f6 70%, #2563eb 100%)
Files Updated
Core Design System
- ✅
app/globals.css- Root CSS variables and color definitions
Component Styles
- ✅
components/Hero.module.css- Hero section background, orbs, and button shadows - ✅
components/Pricing.module.css- Popular card gradient - ✅
components/CTA.module.css- CTA card shadow - ✅
components/Testimonials.module.css- Badge gradients - ✅
components/HowItWorks.module.css- Badge and step content gradients - ✅
components/FAQ.module.css- Badge, hover effects, and CTA box gradients
Page Styles
- ✅
app/contact/contact.module.css- Hero, social icons, focus states, quick links - ✅
app/about/about.module.css- Hero, values section, timeline, CTA section
Visual Changes
Hero Section
- Background gradient now flows from pink to blue
- Gradient orbs updated: Orb 1 (pink), Orb 2 (blue)
- Primary CTA button shadow uses pink glow
- Badge pulse animation uses pink shadow
Components
- All section badges now use pink-to-blue gradient backgrounds
- Card hover effects use pink shadows instead of purple
- Popular pricing card has subtle pink-to-blue gradient background
- CTA sections feature the new pink-to-blue gradient theme
Interactive Elements
- Focus states on form inputs use pink glow
- Button hover effects use pink shadows
- Gradient text elements flow from pink to blue
Color Usage Guidelines
When to Use Pink (Primary)
- Primary CTA buttons
- Important highlights and accents
- Active states
- Primary icons and badges
- Main brand elements
When to Use Blue (Secondary)
- Secondary buttons
- Supporting elements
- Complementary accents
- Gradient endpoints
- Alternative highlights
Gradient Direction
All gradients should flow from Pink (left/top) → Blue (right/bottom) at 135deg angle for consistency.
Browser Compatibility
All color updates use standard CSS properties and are compatible with modern browsers. The gradients use standard linear-gradient and radial-gradient functions.
Dark Mode
The color scheme works seamlessly with the existing dark mode implementation. The CSS variables ensure consistent theming across light and dark modes.
Last Updated: December 11, 2025 Theme Version: 2.0 - Pink & Blue