Color Family

Red

Signal-driven hues for alerts, commerce urgency, and cinematic storytelling.

EnergeticAuthoritativeEmotive

Positioning DNA

Red is inherently emotional, so it should be choreographed carefully. The 500-700 steps scream urgency, while the 100-200 range works for subtle badges or KPI deltas. Use motion and copy to reinforce meaning whenever you deploy Red.

In editorial storytelling, pairing deep Red 900 backgrounds with serif typography instantly creates drama. Shift toward Red 400 when you need CTA buttons that still feel premium.

UX Applications

  • Mission-critical alert systems and error states
  • E-commerce countdowns or promotional badges
  • Editorial hero sections for cinematic campaigns

Sample Palette

Drop-in hex codes with usage notes

FAQ

How do I keep Red accessible?

Reserve Red 600+ for text on light backgrounds to maintain 4.5:1 ratios. For dark UIs, pair Red 400 chips on Slate or Zinc cards with bold lettering.

Can Red be used outside of errors?

Absolutely. Use desaturated Red 200-300 for analytics deltas, location markers, or editorial highlights without implying failure.