Color Palette

The Alterspective color palette is designed to convey trust, professionalism, and approachability. Each color has specific use cases and accessibility requirements.

Primary Palette

Marine

#075156

Primary actions, links

Green

#2C8248

Success, secondary actions

Citrus

#ABDD65

Accents only (never with white text)

Navy

#17232D

Text, dark backgrounds

Pale Blue

#E5EEEF

Light surfaces, backgrounds

White

#FFFFFF

Primary backgrounds

Critical Warning

COLOR-001

Never use white text on Citrus

The Citrus color (#ABDD65) does not provide sufficient contrast with white text. This combination fails WCAG accessibility requirements.

❌ WRONG: White on Citrus

✗ Fails WCAG (1.58:1 ratio)

✓ CORRECT: Navy on Citrus

✓ Passes WCAG (6.7:1 ratio)

CSS Variables

Use these CSS custom properties in your stylesheets:

:root {
  --as-marine: #075156;
  --as-green: #2C8248;
  --as-citrus: #ABDD65;
  --as-navy: #17232D;
  --as-pale-blue: #E5EEEF;
  --as-white: #FFFFFF;
}