Official color palette and usage guidelines
Primary Colors
Brand Orange (Accent)
Our signature orange represents energy, warmth, and approachability.
| Color | Hex | RGB | Usage |
|---|---|---|---|
| Accent Orange | #FF6B35 | 255, 107, 53 | CTAs, buttons, highlights |
| Warm Orange | #F75C03 | 247, 92, 3 | Animations, alerts |
Brand Blue (Primary)
Blue conveys trust, expertise, and professionalism.
| Color | Hex | RGB | Usage |
|---|---|---|---|
| Primary Blue | #0066CC | 0, 102, 204 | Links, primary actions |
| Royal Blue | #4169E1 | 65, 105, 225 | Alternative primary |
| Dark Blue | #191970 | 25, 25, 112 | Hover states |
Text Colors
| Color | Hex | Usage |
|---|---|---|
| Text Dark | #333333 | Primary body text |
| Text Light | #666666 | Secondary text |
| Text Muted | #808285 | Captions, metadata |
Background Colors
| Color | Hex | Usage |
|---|---|---|
| White | #FFFFFF | Primary background |
| Light Gray | #F8F9FA | Section backgrounds |
| Off White | #F9F9F9 | Card backgrounds |
Design System (New Homepage)
For the redesigned homepage and new projects, use these specifications:
/* Primary Colors */
--primary-blue: #0066CC;
--accent-orange: #FF6B35;
/* Text */
--text-dark: #333333;
--text-light: #666666;
/* Backgrounds */
--bg-light: #F8F9FA;
--white: #FFFFFF;Color Usage Guidelines
CTAs and Buttons
- Primary CTA: Orange (#FF6B35) with white text
- Secondary CTA: Blue (#0066CC) or outline style
- Hover: Darken by 10%
Links
- Default: Blue (#0066CC)
- Hover: Dark Blue (#191970)
- Visited: Maintain same blue for consistency
Backgrounds
- Page: White or Light Gray (#F8F9FA)
- Cards: White with subtle border
- Sections: Alternate white and light gray
Accessibility
| Combination | Contrast Ratio | WCAG Level |
|---|---|---|
| Text Dark on White | 12.6:1 | AAA |
| Blue on White | 4.5:1 | AA |
| Orange on White | 3.1:1 | AA Large |
Important:
- Use Text Dark (#333333) for body copy
- Orange buttons need sufficient size (large text)
- Never use orange for small text links