Skip to main content

UI Style Change: Unified Prize & Voucher Color Palette Specification

Last Updated: 16/07/2026
Type: UI/UX Design System Specification — Color Palette
Scope: Lucky Spin Wheel Segments & Voucher Card Backgrounds (Mobile App & CMS Admin)

Reference Image:

1. Overview & Rationale​

Currently, the prize slices on the Lucky Spin wheel and the voucher card backgrounds lack a unified color coding system.

To improve scannability and build strong category associations (so users instantly recognize what category of prize they won), we define a strict Prize & Voucher Color Palette:

  • Points: Single color spectrum (lighter shades for low points, darker/richer shades for high points).
  • Healing World Ticket Vouchers: Light Gold.
  • Massage Vouchers: Earth Brown.
  • Nail Vouchers: Pink Pastel.
  • Hair Vouchers: Pastel Pink (vibrant yet soft pink, matching the brand sample).

2. Color Palette Specification (Hex Tokens)​

Here are the official hex color tokens to be used across the Mobile App (SVG wheel slices, voucher cards) and CMS Admin (color labels):

Prize CategorySub-category / RangeHex CodeVisual Preview / Description
Point (Light)Low Points (< 500)#FFE0B2Light Apricot / Creamy Orange
Point (Medium)Med Points (500 - 999)#FFA726Bright Amber Orange
Point (Dark)High Points (≥ 1000)#E65100Rich Deep Burnt Orange
Healing World TicketAll ticket vouchers#FFF9C4Light Gold / Champagne Gold
Massage VoucherMassage services#8D6E63Earth Brown / Warm Clay
Nail VoucherNail/Manicure services#F8BBD0Soft Pink Pastel
Hair VoucherHair/Styling services#FF8A80Vibrant Pastel Pink (Brand Specific)

3. Implementation Spec​

3.1 Lucky Spin Wheel Segment Coloring (React Native SVG)​

When rendering the segments of the wheel dynamically, map the prize items to their corresponding color tokens based on type and subtype:

// Segment color resolver utility
export const getPrizeColorToken = (prizeType: 'point' | 'voucher', value: number, category?: 'healing_world' | 'massage' | 'nail' | 'hair') => {
  if (prizeType === 'point') {
    if (value < 500) return '#FFE0B2'; // Low point
    if (value < 1000) return '#FFA726'; // Med point
    return '#E65100'; // High point
  }

  if (prizeType === 'voucher') {
    switch (category) {
      case 'healing_world':
        return '#FFF9C4'; // Light Gold
      case 'massage':
        return '#8D6E63'; // Earth Brown
      case 'nail':
        return '#F8BBD0'; // Pink Pastel
      case 'hair':
        return '#FF8A80'; // Vibrant Pastel Pink
      default:
        return '#FFF9C4'; // Default to Light Gold
    }
  }

  return '#FFFFFF'; // Fallback
};

3.2 Voucher Card Background Mapping​

The same coloring rule must be applied to the voucher cards in the "My Vouchers" list to maintain consistent visual language:

// Within VoucherCard.tsx
const cardColor = getPrizeColorToken('voucher', 0, voucher.category);

return (
  <View style={[styles.cardContainer, { backgroundColor: cardColor }]}>
    <VoucherDetails voucher={voucher} />
  </View>
);

Technical Checklist​

  • Add the color tokens into the global theme style file (theme.ts or colors.ts).
  • Implement the getPrizeColorToken helper function.
  • Update the Lucky Spin wheel renderer to apply segment backgrounds dynamically based on the prize type/category.
  • Update the VoucherCard background color styling to inherit category-specific colors instead of using a single hardcoded color.
  • Test contrast: verify that text labels (white or dark grey) remain readable on top of all the new background colors (specifically #FFF9C4 Light Gold, which needs dark text contrast).
  • Run build tests on both iOS and Android to check SVG color rendering.