Site color palette

Base palette plus darker and lighter variants (color theory). Includes white and all colors used on the site.

Greens

Forest and Sage families; primary backgrounds and surfaces.

Forest Dark

#152820

Deepest background, hover states

Forest

#203A31

Primary background

Forest Light

#2D5247

Lighter background, borders

Sage Dark

#2E4738

Card hover, depth

Sage

#3E5F4B

Surfaces / cards

Sage Light

#5A7D66

Highlight, subtle surfaces

Warm accents

Terracotta and Orange; CTAs and secondary actions.

Terracotta Dark

#5C3626

Secondary button hover

Terracotta

#7E4A35

Secondary accent

Terracotta Light

#9E6B52

Lighter accent

Orange Dark

#8C4A28

CTA hover

Orange

#BC6439

CTAs / primary accent

Orange Light

#D4845A

CTA highlight

Neutrals

Taupe, black, white — text, borders, contrast.

Taupe Dark

#6D5D52

Muted text (strong)

Taupe

#948070

Muted text & borders

Taupe Light

#B39A8A

Subtle borders, disabled

Black

#0D0D0D

Maximum contrast (e.g. focus rings)

Black Muted

#1A1A1A

Dark overlay

White Muted

#E8E4E0

Off-white (warm), secondary on light

White

#FFFFFF

Primary text on dark, buttons

All colors (order)

Color theory on this site

How each color (or variant) is used across the site for hierarchy, contrast, and consistency.

  • Forest — Page background (body), hero overlay base.
  • Forest dark — Available for footer, deep hover, or future dark sections.
  • Sage — Cards, header hover, quick-link cards, section surfaces.
  • Sage light/dark — Card image areas, icon wells; hover states.
  • Orange — Primary CTAs (hero, league cards, 404), nav “Log in”, link accents.
  • Orange dark/light — CTA hover (darker); highlights (lighter).
  • Terracotta — Secondary buttons (“Join as free agent”), borders.
  • Taupe — Secondary text, borders, footer links, captions.
  • Taupe light/dark — Subtle borders; stronger muted text.
  • White — Primary headings and body text on dark, button label text.
  • White muted — Reserved for light backgrounds or secondary text on light.
  • Black / black muted — Focus rings, overlays, or future light-mode text.

All tokens in src/styles/global.css. Header z-50; popups z-[100]+.