Button Color Variations

Comparing options to resolve header/button color clash

Option A

Neutral Button Palette

All buttons use consistent gray/charcoal tones. Header carries all state color information.

Baseline State
🔵 Stable Since 8:30 AM
Low Capacity State
🟡 Low Capacity Since 6:15 AM

✓ Pros

  • No color clash possible
  • Clean, unified look
  • Header is clear focal point
  • Buttons feel consistent

✕ Cons

  • Loses quick color recognition
  • All buttons look the same
  • May be harder during crisis
  • Feels clinical/cold
Option B

Muted/Desaturated Buttons

Keep color coding but significantly desaturate so buttons don't compete with header.

Baseline State
🔵 Stable Since 8:30 AM
Low Capacity State
🟡 Low Capacity Since 6:15 AM

✓ Pros

  • Keeps some color association
  • Softer, less visually aggressive
  • Reduces clash without removing color
  • Calming aesthetic

✕ Cons

  • Colors may be too similar
  • Lower contrast for recognition
  • Could feel washed out
  • Text readability concerns
Option C

Dark Buttons, Colored Icons

Recommended

Dark charcoal buttons with bright colored icons. Color is accent only, not full fill.

Baseline State
🔵 Stable Since 8:30 AM
Low Capacity State
🟡 Low Capacity Since 6:15 AM

✓ Pros

  • No color clash - unified dark base
  • Color coding preserved via icons
  • High contrast for readability
  • Modern, professional look
  • Header clearly dominates

✕ Cons

  • Smaller color "target" area
  • Darker overall feel
  • May need brighter icons
Option D

Inverted When Matching State

Button matching current state becomes outlined/inverted to show "you're already here."

Baseline (OK inverted)
🔵 Stable Since 8:30 AM
Low Capacity (LOW inverted)
🟡 Low Capacity Since 6:15 AM

✓ Pros

  • Shows current state clearly
  • Keeps full color for other buttons
  • Visual feedback on active state
  • Familiar "selected" pattern

✕ Cons

  • Still has some color clash
  • More complex logic needed
  • Inverted button may confuse
  • Not all states map to buttons
Option E

White/Light Buttons

Clean white buttons with colored text/icons. Minimal, airy feel. Only HELP is filled.

Baseline State
🔵 Stable Since 8:30 AM
Low Capacity State
🟡 Low Capacity Since 6:15 AM

✓ Pros

  • Very clean, minimal look
  • No color clash possible
  • HELP button stands out clearly
  • Light, calming aesthetic
  • Easy on the eyes

✕ Cons

  • May lack urgency feel
  • Buttons could feel less "pressable"
  • Low contrast on some colors
  • Could feel too sterile
Option F

Outlined/Ghost Buttons (Dark Mode)

Dark background with outlined buttons. Color is border + text only. Only HELP is filled.

Baseline State
🔵 Stable Since 8:30 AM
Low Capacity State
🟡 Low Capacity Since 6:15 AM

✓ Pros

  • Very modern aesthetic
  • Colors pop against dark
  • No fill clash with header
  • HELP clearly stands out
  • Reduced visual noise

✕ Cons

  • Outlines may feel less "solid"
  • Harder touch targets visually
  • May need thicker borders
  • Dark mode may strain some users