Skip to main content

UI/UX Specification: Service-Specific Voucher Theme Designs & CMS Color Mappings

Last Updated: 16/07/2026
Type: UI/UX Layout & Visual Theme Specification
System: Mobile App (Voucher Cards) & CMS Admin (Branch Color Configuration)
Severity: 🔴 High — Upgrades the default voucher layout to feature service-specific themes, custom badges, and dynamic branch logo/thumbnails

Reference Images:

1. Core Visual Enhancements​

To establish a premium feel, the voucher card design must keep the existing layout structure but apply service-specific color themes, dynamic brand logos, branch thumbnails, and source badges.

1.1 Branch Thumbnail replacing Leaf Icon​

  • ❌ Old Design: Used a generic circular green leaf icon.
  • ✅ New Design: Replace the leaf icon with the Branch Thumbnail Image (Ảnh đại diện chi nhánh) inside the right-hand preview frame. This immediately tells the customer which branch/outlet the voucher is bound to. The code label (SKU/Code) sits directly underneath this thumbnail.

1.2 Acquisition Source Badge (Badge nguồn nhận)​

  • A rounded capsule badge (containing an icon + label text) must sit under the voucher description.
  • This displays the voucher origin: e.g., "Trúng từ vòng quay may mắn" (Won from lucky spin), "Tri ân khách hàng thân thiết" (Loyal customer reward), or "Voucher chúc mừng sinh nhật" (Birthday gift).

1.3 CMS-Managed Color Codes​

  • To make formatting dynamic, the CMS Admin page for Branch Configuration must expose a Color Picker field (branchColorThemeHex).
  • Saving a hex color here dynamically sets:
    • The background color of all voucher cards generated for this branch.
    • The corresponding prize segment color on the Lucky Spin Wheel (see prize-voucher-color-palette.md).

2. Service-Specific Theme Color Tokens​

Mobile app developers must apply the following specific color mappings when rendering vouchers belonging to the 4 main service categories:

2.1 Voucher Jjim Jil Bang (Xông hơi)​

  • Background: #A77D58 (Warm Taupe)
  • Primary Text: #FFFFFF
  • Logo/Icon Tint: #FFF6EA (Creamy White)
  • Source Badge Styling:
    • Background: rgba(120, 74, 34, 0.35) (Semi-transparent dark brown)
    • Text Color: #FFF6EA
  • Example Content: 🎁 Trúng từ vòng quay may mắn

2.2 Voucher Massage​

  • Background: #5C3C24 (Deep Earth Brown)
  • Primary Text: #FFFFFF
  • Logo/Icon Tint: #F6D7A7 (Soft Champagne)
  • Source Badge Styling:
    • Background: #F6D7A7
    • Text Color: #5C3C24
  • Example Content: 🌿 Tri ân khách hàng thân thiết

2.3 Voucher Nail​

  • Background: #FCD3DE (Pastel Pink)
  • Primary Text: #5C1D2E (Deep Rosewood)
  • Logo/Icon Tint: #8D2342 (Ruby Red)
  • Source Badge Styling:
    • Background: #F8AFC5 (Soft Rose)
    • Text Color: #5C1D2E
  • Example Content: 🎂 Voucher chúc mừng sinh nhật

2.4 Voucher Hair​

  • Background: #FFA07A (Light Salmon/Coral)
  • Primary Text: #4A1502 (Dark Mahogany)
  • Logo/Icon Tint: #4A1502
  • Source Badge Styling:
    • Background: #FF8F6E (Warm Coral)
    • Text Color: #4A1502
  • Example Content: 👤 Tri ân khách hàng thân thiết

3. Component Hierarchy Spec (React Native)​

// VoucherCard.tsx
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

const VoucherCard = ({ voucher }) => {
  const theme = getThemeColors(voucher.category); // Jjim Jil Bang, Massage, Nail, Hair

  return (
    <View style={[styles.card, { backgroundColor: theme.background }]}>
      {/* Top Section */}
      <View style={styles.topSection}>
        <View style={styles.leftContent}>
          {/* Logo and Brand Name */}
          <View style={styles.brandRow}>
            <Image 
              source={require('../assets/brand-logo.png')} 
              style={[styles.logo, { tintColor: theme.logoTint }]} 
            />
            <View>
              <Text style={[styles.brandTitle, { color: theme.text }]}>Golden Lotus</Text>
              <Text style={[styles.branchSubtitle, { color: theme.text, opacity: 0.8 }]}>
                {voucher.branchName}
              </Text>
            </View>
          </View>

          {/* Heading */}
          <Text style={[styles.headingText, { color: theme.text }]}>
            {voucher.title}
          </Text>

          {/* Source Badge */}
          <View style={[styles.badge, { backgroundColor: theme.badgeBg }]}>
            <Text style={[styles.badgeText, { color: theme.badgeText }]}>
              {voucher.sourceIcon} {voucher.sourceLabel}
            </Text>
          </View>
        </View>

        {/* Right Section: Branch Thumbnail + Code */}
        <View style={styles.rightContent}>
          <Image source={{ uri: voucher.branchThumbnail }} style={styles.thumbnail} />
          <View style={styles.codeContainer}>
            <Text style={styles.codeText}>{voucher.codeLine1}</Text>
            <Text style={styles.codeText}>{voucher.codeLine2}</Text>
          </View>
        </View>
      </View>

      {/* Dotted Divider line */}
      <View style={styles.dottedDivider} />

      {/* Bottom Section (HSD) */}
      <View style={styles.bottomSection}>
        <Text style={[styles.expiryText, { color: theme.text, opacity: 0.9 }]}>
          HSD: {voucher.expiryDate}
        </Text>
        <Image 
          source={require('../assets/arrow-right.png')} 
          style={[styles.arrowIcon, { tintColor: theme.text }]} 
        />
      </View>
    </View>
  );
};

Technical Checklist​

  • Add the branchColorThemeHex field to the Branch DB Model and CMS edit screens.
  • Create the theme resolution utility class returning theme objects based on voucher category.
  • Update VoucherCard.tsx layout structure:
    • Replace the vector leaf icon with the dynamic voucher.branchThumbnail image.
    • Crop thumbnail to fit a rounded-corner frame 64x64px.
    • Append the rounded acquisition source badge beneath the heading.
  • Check color contrasts: Verify readability of white text on #A77D58 (Jjim Jil Bang) and #5C3C24 (Massage), and dark text on #FCD3DE (Nail) and #FFA07A (Hair).
  • Render a dotted divider utilizing borderStyle: 'dashed' or an SVG dashed line.
  • Verify implementation on both iOS and Android platforms to ensure image cropping and layout spacing match the redesigned cards.