Color System

TLDR: Primary teal (#2a9d90) for CTAs and links, secondary sage (#93A08D) for supporting elements, accent coral (#E36E4A) for alerts and highlights, cream base (#F9F6F0) for backgrounds, and charcoal neutral (#333333) for text. Maintain 4.5:1 contrast ratio for normal text.

---

The Happy Sasquatch color system is built on a carefully curated palette that balances warmth, professionalism, and clarity. Each color includes a full variant scale for flexibility across different contexts.

Primary Color: Teal

Our primary brand color, used for interactive elements, links, and key UI components.

Variant	Hex Value	CSS Variable	Usage
Lightest	#ebfaf8	--ifm-color-primary-lightest	Subtle backgrounds
Lighter	#c3efea	--ifm-color-primary-lighter	Light backgrounds
Light	#72dacd	--ifm-color-primary-light	Hover states
Base	#2a9d90	--ifm-color-primary	Primary CTAs, links
Dark	#258d81	--ifm-color-primary-dark	Hover on dark backgrounds
Darker	#1b655c	--ifm-color-primary-darker	Active states
Darkest	#0b2825	--ifm-color-primary-darkest	Text on light backgrounds

When to Use Primary

• Call-to-action buttons
• Hyperlinks
• Active navigation states
• Interactive elements
• Accent borders and highlights

Secondary Color: Sage Green

A muted, natural sage green for supporting elements and subtle accents.

Variant	Hex Value	CSS Variable	Usage
Ultra Light	#f2f3f1	--secondary-ultra-light	Very subtle backgrounds
Light	#d7dcd5	--secondary-light	Light accents
Semi Light	#a3ae9e	--secondary-semi-light	Muted elements
Hover	#abb5a6	--secondary-hover	Interactive hover
Base	#93A08D	--secondary	Secondary elements
Semi Dark	#566151	--secondary-semi-dark	Darker accents
Dark	#3e453a	--secondary-dark	High contrast elements
Ultra Dark	#191c17	--secondary-ultra-dark	Maximum contrast

When to Use Secondary

• Secondary buttons
• Supporting navigation
• Decorative elements
• Subtle borders
• Background sections

Tertiary Color: Pale Green-Gray

A soft, neutral green-gray for backgrounds and subtle visual elements.

Variant	Hex Value	CSS Variable	Usage
Ultra Light	#f7f8f6	--tertiary-ultra-light	Almost white backgrounds
Hover	#f2f4f0	--tertiary-hover	Interactive hover
Light	#d7ded3	--tertiary-light	Light backgrounds
Base	#D2DACD	--tertiary	Tertiary elements
Semi Light	#a3b398	--tertiary-semi-light	Muted elements
Semi Dark	#56674c	--tertiary-semi-dark	Darker accents
Dark	#3e4936	--tertiary-dark	High contrast
Ultra Dark	#191d16	--tertiary-ultra-dark	Maximum contrast

When to Use Tertiary

• Alternating row backgrounds
• Card backgrounds
• Decorative borders
• Subtle separators

Accent Color: Coral-Orange

A warm coral-orange for attention-grabbing elements and important callouts.

Variant	Hex Value	CSS Variable	Usage
Ultra Light	#fcede9	--accent-ultra-light	Warning backgrounds
Light	#f5cabd	--accent-light	Light highlights
Hover	#e98e72	--accent-hover	Interactive hover
Semi Light	#e78365	--accent-semi-light	Muted accent
Base	#E36E4A	--accent	Primary accent
Semi Dark	#9a3718	--accent-semi-dark	Darker accent
Dark	#6e2711	--accent-dark	High contrast
Ultra Dark	#2c1007	--accent-ultra-dark	Maximum contrast

When to Use Accent

• Important alerts and warnings
• Sale or promotional badges
• Error states
• Attention-grabbing callouts
• Special highlights (use sparingly)

Base Color: Warm Cream

Our primary background color that creates a warm, approachable feel.

Variant	Hex Value	CSS Variable	Usage
Hover	#ffffff	--base-hover	White
Ultra Light	#f8f4ed	--base-ultra-light	Subtle variation
Base	#F9F6F0	--base	Main background
Light	#e9dec8	--base-light	Darker background
Semi Light	#ccb37f	--base-semi-light	Muted tan
Semi Dark	#806633	--base-semi-dark	Darker tan
Dark	#5b4924	--base-dark	Brown
Ultra Dark	#241d0f	--base-ultra-dark	Dark brown

When to Use Base

• Page backgrounds
• Card backgrounds
• Section backgrounds
• Any area requiring a warm, neutral backdrop

Neutral Color: Charcoal

Our primary text color and neutral gray scale.

Variant	Hex Value	CSS Variable	Usage
Ultra Light	#f2f2f2	--neutral-ultra-light	Light gray backgrounds
Light	#d9d9d9	--neutral-light	Borders, dividers
Semi Light	#a6a6a6	--neutral-semi-light	Placeholder text
Hover	#3b3b3b	--neutral-hover	Interactive hover
Semi Dark	#595959	--neutral-semi-dark	Secondary text
Base	#333333	--neutral	Primary body text
Dark	#404040	--neutral-dark	Darker text
Ultra Dark	#1a1a1a	--neutral-ultra-dark	Headings, emphasis

When to Use Neutral

• Body text (base)
• Headings (ultra-dark)
• Secondary text (semi-dark)
• Placeholders (semi-light)
• Borders and dividers (light)

Accessibility Guidelines

Contrast Ratios

Ensure sufficient contrast between text and background colors:

• Normal text: Minimum 4.5:1 contrast ratio
• Large text (18px+ or 14px+ bold): Minimum 3:1 contrast ratio
• UI components: Minimum 3:1 contrast ratio

Recommended Pairings

Text Color	Background	Contrast Ratio	Use Case
--neutral	--base	10.3:1	Body text
--neutral-ultra-dark	--base	14.7:1	Headings
--ifm-color-primary-darkest	--base	12.1:1	Dark links
--base	--ifm-color-primary	4.5:1	Button text
--base	--accent	4.3:1	Accent buttons

Color Blindness Considerations

• Do not rely solely on color to convey meaning
• Use icons, patterns, or text labels alongside color indicators
• Test designs with color blindness simulators

CSS Usage Examples

/* Primary button */
.button-primary {
  background-color: var(--ifm-color-primary);
  color: var(--base);
}

.button-primary:hover {
  background-color: var(--ifm-color-primary-dark);
}

/* Accent callout */
.callout-warning {
  background-color: var(--accent-ultra-light);
  border-left: 4px solid var(--accent);
  color: var(--accent-dark);
}

/* Secondary section */
.section-alt {
  background-color: var(--tertiary-ultra-light);
}

/* Text styles */
.text-body {
  color: var(--neutral);
}

.text-muted {
  color: var(--neutral-semi-dark);
}