Lantern Beacon Colors Reference

This document shows all available beacon color schemes for the Wave-to-Meet feature.

Color Schemes

When two users accept a wave, they are assigned a matching color. Both phones display the same color beacon to help them identify each other in person.

---

🟠 Amber (Warm Glow)

• Gradient: Amber-400 → Amber-500 → Orange-500
• Shadow: rgba(245, 158, 11, 0.8)
• Use case: Default Lantern branding color
• Vibe: Warm, welcoming, classic

Tailwind classes:

bg-amber-500
from-amber-400 via-amber-500 to-orange-500

---

🟣 Purple (Mystic Vibe)

• Gradient: Purple-400 → Purple-500 → Pink-500
• Shadow: rgba(168, 85, 247, 0.8)
• Use case: High contrast, playful
• Vibe: Mysterious, creative, energetic

Tailwind classes:

bg-purple-500
from-purple-400 via-purple-500 to-pink-500

---

🔵 Blue (Ocean Feel)

• Gradient: Blue-400 → Blue-500 → Cyan-500
• Shadow: rgba(59, 130, 246, 0.8)
• Use case: Calm environments
• Vibe: Cool, professional, trustworthy

Tailwind classes:

bg-blue-500
from-blue-400 via-blue-500 to-cyan-500

---

🟢 Green (Forest Calm)

• Gradient: Emerald-400 → Emerald-500 → Teal-500
• Shadow: rgba(16, 185, 129, 0.8)
• Use case: Natural, outdoor venues
• Vibe: Fresh, balanced, organic

Tailwind classes:

bg-emerald-500
from-emerald-400 via-emerald-500 to-teal-500

---

🌸 Pink (Rose Energy)

• Gradient: Pink-400 → Pink-500 → Rose-500
• Shadow: rgba(236, 72, 153, 0.8)
• Use case: Romantic, social settings
• Vibe: Playful, affectionate, bold

Tailwind classes:

bg-pink-500
from-pink-400 via-pink-500 to-rose-500

---

Implementation

Colors are randomly assigned when a wave is accepted:

const colors = ['amber', 'purple', 'blue', 'green', 'pink']
const matchColor = colors[Math.floor(Math.random() * colors.length)]

The matchColor is stored in the connection object and synchronized to both users via the backend.

---

Accessibility Considerations

Color Blindness

While colors are the primary matching mechanism, consider adding:

• Patterns: Different pulsing rhythms for each color
• Icons: Small icon overlays (🟠🟣🔵🟢🌸)
• Haptics: Unique vibration patterns

Low Light

All colors use:

• High brightness gradients
• Radial glow effects
• Drop shadows for depth
• Screen brightness boost (future feature)

High Light (Outdoor)

• Increase contrast
• Add white border overlay
• Consider sound/vibration fallback

---

Testing in Storybook

npm run storybook

Navigate to Components > LanternBeacon to preview all 5 color variants side-by-side.

---

Future: Custom Colors

For premium features or special events, consider:

• Gold: VIP/premium users
• Rainbow: Pride events
• Team colors: Sports venues
• Seasonal: Holiday-themed (red/green for December, etc.)

---

See WAVE_TO_MEET.md for full feature documentation.