Color Palette

P01 Color Palette Reference

Palette: Navy + Parchment + Copper Quiet authority / premium / resilient

---

Core Colors

Role	Hex	RGB	Usage
Primary	#020532	2, 5, 50	Nav backgrounds, section titles, heavy dividers, dark hero overlays
Secondary	#091652	9, 22, 82	Links, icon fills, card borders, subtle headers, hover states
Accent (Copper)	#C47A3D	196, 122, 61	Primary CTA buttons, badges, callouts, underline highlights
Background	#FEF9F1	254, 249, 241	Page base, light sections, card interiors
Text	#111827	17, 24, 39	Body copy, long-form content

Extended Palette

Role	Hex	Usage
Copper Light	#D4945E	Hover state for copper CTAs, secondary badges
Copper Dark	#A86230	Active/pressed state for copper CTAs
Navy Mid	#374273	Muted UI elements, disabled states on dark backgrounds
Parchment Dark	#F0EBE4	Card backgrounds, alternating table rows, subtle section breaks
Stone	#9597A9	Placeholder text, captions, metadata
Success	#2D6A4F	Success states, confirmations
Warning	#E09F3E	Warning states (harmonizes with copper)
Error	#C1292E	Error states, destructive actions
Info	#1748A0	Informational callouts, tooltips

CSS Tokens

:root {
  --color-primary: #020532;
  --color-secondary: #091652;
  --color-accent: #C47A3D;
  --color-bg: #FEF9F1;
  --color-text: #111827;
 
  --color-accent-light: #D4945E;
  --color-accent-dark: #A86230;
  --color-navy-mid: #374273;
  --color-parchment-dark: #F0EBE4;
  --color-stone: #9597A9;
 
  --color-success: #2D6A4F;
  --color-warning: #E09F3E;
  --color-error: #C1292E;
  --color-info: #1748A0;
 
  --color-link: #091652;
  --color-link-hover: #C47A3D;
 
  --gradient-hero: linear-gradient(135deg, #020532 0%, #091652 65%, #C47A3D 130%);
  --button-cta-bg: #C47A3D;
  --button-cta-text: #0B1220;
}

Contrast Ratios (WCAG)

Pair	Ratio	WCAG AA	WCAG AAA
Text #111827 on BG #FEF9F1	~16.9:1	Pass	Pass
Copper CTA #C47A3D on dark #0B1220	~5.5:1	Pass	Fail
Secondary #091652 on BG #FEF9F1	~13.8:1	Pass	Pass
Stone #9597A9 on BG #FEF9F1	~3.2:1	Fail (use for large text only)	Fail