Style Guide
Color palette, typography, spacing, and accessibility rules for Fidelity Finance Group.
Color Palette
Primary, secondary, accent, and neutrals with usage rules
Primary
Hex #0A2540
Use for headings, key backgrounds, and emphasis.
Secondary
Hex #0F766E
Use for buttons, links, and interactive elements.
Accent
Hex #C69214
Use for highlights and callouts sparingly.
Background
Hex #F5F7FA
Use for page backgrounds and panels.
Dark
Hex #1F2937
Use for footer and high-contrast text.
Muted
Hex #6B7280
Use for secondary text and labels.
Surface
Hex #FFFFFF
Use for cards and panels.
Accessibility and Contrast
Primary on white meets AA/AAA
Text primary on surface meets AA/AAA
Secondary on white meets AA
Text secondary on surface meets AA
Typography and Spacing
Consistent hierarchy and rhythm across pages
Heading One
Heading Two
Heading Three
Lead paragraph for introductions and summaries.
Body text using Open Sans for readability at 16px base.
Usage Rules
- Use primary backgrounds for hero sections and CTA bands.
- Use secondary for interactive elements and highlights.
- Use accent sparingly for calls to action and highlights.
- Maintain heading hierarchy with one h1 per page.
- Ensure focus-visible ring is present for interactive elements.