Income Protection Gaurd Style Guide

Design tokens, components, and accessibility standards to ensure consistent branding.

Brand Colors

Primary Ink
#003366
Primary Accent
#2A9D8F
Accent Warm
#E76F51
Neutral 200
#EDF2F7

All color combinations meet WCAG 2.1 AA for text and interactive elements.

Typography

Primary Font: Inter

Heading 1

Heading 2

Heading 3

Body copy example demonstrating readability, spacing, and color contrast.

Muted text for secondary information.

Buttons


Cards

Card with hover micro-interaction

Accessibility

  • Color contrast AA for text and controls
  • Keyboard focus outlines on interactive elements
  • ARIA labels for navigation and modals
  • Reduced motion support via prefers-reduced-motion