Colors & Branding
Your website uses a carefully designed color palette that creates visual consistency and reinforces brand identity across all pages.
Quick Reference
| Color Type | Name | When to Use |
|---|---|---|
| Primary | Vibrant Pink (#ff005c) | Main call-to-action buttons, key highlights |
| Secondary | Magenta Pink (#fa198c) | Supporting accents, secondary buttons |
| Accent | Warm Orange (#fb8b47) | Gradients, special highlights |
| White | Pure White (#ffffff) | Light backgrounds, text on dark |
| Black | Pure Black (#000000) | Dark backgrounds, main text |
| Dark Gray | Charcoal (#1a1a1a) | Alternative dark backgrounds |
| Light Gray | Soft Gray (#f7f7f7) | Subtle backgrounds, dividers |
Brand Colors
Primary Pink
What it looks like: A bold, vibrant pink that commands attention.
When to use it: Use for your most important call-to-action buttons, key headlines you want to highlight, and accent elements that need to stand out.
Example: "Contact Us" buttons, pricing highlights, featured badges.
Secondary Magenta
What it looks like: A rich magenta-pink that complements the primary color.
When to use it: Supporting elements like secondary buttons, icon accents, or decorative borders.
Example: "Learn More" buttons, icon backgrounds, section dividers.
Accent Orange
What it looks like: A warm, inviting orange that adds energy.
When to use it: Primarily used in gradients combined with pink. Can highlight special offers or time-sensitive content.
Example: Gradient buttons, promotional banners, notification badges.
Background Presets
When building sections, you'll often choose a background color. Here are your options:
White Background
What it looks like: Clean, bright white space.
When to use it: Default choice for most content sections. Best for readability and a professional appearance.
Example: Product descriptions, service details, team bios.
Black Background
What it looks like: Solid black that creates dramatic contrast.
When to use it: Hero sections, testimonials, or when you want content to feel premium and bold.
Example: Homepage hero, customer quotes, footer areas.
Dark Gray Background
What it looks like: A softer alternative to pure black, less harsh.
When to use it: When you want a dark look but pure black feels too stark.
Example: Feature sections, pricing tables on dark themes.
Light Gray Background
What it looks like: Subtle, soft gray that's barely noticeable.
When to use it: Breaking up white sections without strong contrast. Creates visual separation.
Example: FAQ sections, alternating content blocks, form backgrounds.
Gradient Background
What it looks like: A smooth blend from orange to pink or gray to black.
When to use it: High-impact areas where you want to make a strong visual statement.
Example: Newsletter signup sections, promotional banners, feature highlights.
Text Colors
Dark Text (on Light Backgrounds)
What it looks like: Black or very dark gray text.
When to use it: Default for all body text on white or light gray backgrounds. Ensures maximum readability.
Light Text (on Dark Backgrounds)
What it looks like: White or very light gray text.
When to use it: Any text placed on black, dark gray, or gradient backgrounds.
Muted Gray Text
What it looks like: Medium gray text that's softer than black.
When to use it: Captions, metadata, supporting information that shouldn't compete with main content.
Example: Dates, author names, image captions, fine print.
Tips for Using Colors
- Limit accent colors - Use primary pink sparingly for maximum impact
- Maintain contrast - Always ensure text is readable against its background
- Be consistent - Use the same colors for the same types of elements throughout your site
- Consider accessibility - People with vision differences need good contrast to read your content