Brand guidelines
Color
CoVet’s palette is calm and clear: blue carries action and identity, neutrals carry content, and gold appears sparingly as a warm accent. All pairings must meet WCAG AA.
Primary colors
Primary action — CTAs, links, interactive elements, feature titles
Secondary emphasis — hover states, secondary headings
Dark foundation — hero and footer backgrounds, dark-mode surfaces
Secondary colors
Warm accent — enterprise navigation, premium contexts
Eyebrow accent — section tags, workflow indicators
Neutrals
Headings on light backgrounds
Body copy on light backgrounds
Muted labels, disabled states
Borders, dividers
Body text on dark backgrounds
Alternate section backgrounds
Card surfaces
Default section backgrounds
Usage by context
| Context | Background | Text |
|---|---|---|
| Default sections | White #FFFFFF | Headings #000000 / Body #595959 |
| Alternate sections | BG #F2F4F8 | Headings #000000 / Body #595959 |
| Dark sections (hero, footer) | CoVet Dark #002D4F | Headings #FFFFFF / Body #E4E6E6 |
| CTA sections | CoVet Blue #00A3E8 | Headings #FFFFFF / Body #F2F4F8 |
| Testimonial sections | Gray Dark #393939 | Text #FFFFFF |
| Cards | Card #FAFAFA | Headings #00A3E8 / Body #595959 |
Accessibility & contrast
All color pairings must meet WCAG AA: minimum 4.5:1 contrast for body text, 3:1 for large text and UI components.
Approved high-contrast pairings
- White text on CoVet Dark (#002D4F) — primary dark backgrounds.
- White text on CoVet Blue (#00A3E8) — CTA buttons and blue sections.
- Gray Dark (#393939) text on white or light backgrounds — headings.
- Gray (#595959) text on white or light backgrounds — body copy.
Avoid
- CoVet Blue text on CoVet Dark backgrounds (insufficient contrast).
- Gold Light text on white backgrounds (fails AA).
- Light gray text on light backgrounds.
