Color Palette Preview
Color Swatches
Primary Colors
Primary Dark
#213229
Main dark color for text, backgrounds, borders
Primary Light
#EEF2F5
Main light color for backgrounds
Primary White
#ffffff
Pure white for cards and contrast
Accent Colors
Accent Urgent
#e2745d
Urgent actions, highlights, warnings
Accent Primary
#e2745d
Primary accent for general highlights
Accent Secondary
#1f7a4d
CTA green, secondary accent
Accent (Legacy)
#e2745d
Legacy accent color
Secondary Colors
Secondary Gray
primary-dark @ 64% opacity
Muted text color
Secondary Light
#999999
Neutral gray for subtle text
CTA Green Variants
20%, 10%, 5% opacity
Opacity variants for backgrounds
Component Previews
Buttons
Cards
Default Card
This is how cards look with the selected palette. The background uses primary white, text uses primary dark.
On Light Background
Cards on the primary light background show how the palette works in different contexts.
On Dark Background
Dark sections use primary dark background with white text for maximum contrast.
Typography
Hero XL Heading
Large hero headings use this size
Section Heading
Section headings use this size and weight
Body text uses primary dark for main content
Secondary text uses the muted gray variant for less emphasis
Accent Color Usage
Accent Urgent
Accent for urgent actions and highlights (legacy color)
Accent Primary
Primary accent color for general highlights
CTA Green
CTA green for call-to-action buttons
Accent as Border
Accent colors can be used for borders and highlights
Preview Mode
This is a live preview. Changes are applied globally via CSS variables and will persist across navigation. Your selection is saved in localStorage.
Navigate to other pages to see how the palette looks across the entire site. To reset, select the “Current” palette or clear your browser’s localStorage.