DESIGN.md — ZalopayLegacy format

### Color — Brand Primaries

| Token | Hex | Usage |

| ----------- | --------- | ------------------------------------------- |

| primary | #007bff | Bootstrap primary (action surfaces) |

| blue | #0068ff | ZaloPay brand blue — signature voltage |

| blue-alt | #0768ff | Variant brand blue |

| green | #03ca77 | ZaloPay payment-confirm green |

| green-alt | #00de6a | Bright success green |

| red | #e31748 | ZaloPay brand red — promotions |

| orange | #faa828 | ZaloPay accent orange |

| indigo | #6356e4 | ZaloPay indigo accent |

| teal | #55b3f3 | ZaloPay teal (sky blue) |

| dark | #001f3e | ZaloPay deep-navy text/anchor |

### Color — Blue (Signature Ramp)

| Token | Hex | Usage |

| ----------- | --------- | -------------------------------------- |

| blue-25 | #f2f7ff | Faintest blue tint background |

| blue-50 | #e6f0ff | Light blue surface |

| blue-100 | #cce1ff | Pale blue |

| blue-200 | #99c3ff | Soft blue |

| blue-300 | #66a4ff | Mid blue |

| blue-400 | #3386ff | Bright blue |

| blue-500 | #0068ff | Brand blue (base) |

| blue-600 | #0053cc | Hover blue |

| blue-700 | #003e99 | Pressed blue |

| blue-800 | #002a66 | Deep blue |

| blue-900 | #001533 | Deepest blue |

### Color — Green (Success / Payment)

| Token | Hex | Usage |

| ----------- | --------- | -------------------------------- |

| green-25 | #f2fcf8 | Faintest mint background |

| green-50 | #e6faf1 | Light mint |

| green-100 | #cdf4e4 | Pale mint |

| green-200 | #9aeac9 | Soft mint |

| green-300 | #68dfad | Mid mint |

| green-400 | #35d592 | Bright mint |

| green-500 | #03ca77 | Brand green (payment OK) |

| green-600 | #02a25f | Hover green |

| green-700 | #027947 | Pressed |

| green-800 | #015130 | Deep green |

| green-900 | #012818 | Deepest green |

### Color — Red (Promotion / Alert)

| Token | Hex | Usage |

| ----------- | --------- | -------------------------------- |

| red-25 | #fef3f5 | Faintest blush background |

| red-50 | #fce8ec | Light blush |

| red-100 | #f9d1d8 | Pale red |

| red-200 | #f4a2b1 | Soft pink-red |

| red-300 | #ee748a | Mid coral |

| red-400 | #e94563 | Bright coral-red |

| red-500 | #e31748 | Brand red |

| red-600 | #b61230 | Hover red |

| red-700 | #880e24 | Pressed |

| red-800 | #5b0918 | Deep |

| red-900 | #2d050c | Deepest |

### Color — Orange (Accent / Loyalty)

| Token | Hex | Usage |

| ------------ | --------- | ---------------------------------- |

| orange-25 | #fffbf4 | Faintest peach |

| orange-50 | #fff6ea | Light peach |

| orange-100 | #feeed4 | Pale orange |

| orange-200 | #fddca9 | Soft orange |

| orange-300 | #fccb7e | Mid amber |

| orange-400 | #fbb953 | Bright amber |

| orange-500 | #faa828 | Brand orange (loyalty/points) |

| orange-600 | #c88620 | Hover |

| orange-700 | #966518 | Pressed |

| orange-800 | #644310 | Deep |

| orange-900 | #322208 | Deepest |

### Color — Teal (Secondary)

| Token | Hex |

| ----------- | --------- |

| teal-25 | #f7fbfe |

| teal-50 | #eef7fe |

| teal-100 | #ddf0fd |

| teal-200 | #bbe1fa |

| teal-300 | #99d1f8 |

| teal-400 | #77c2f5 |

| teal-500 | #55b3f3 |

| teal-600 | #448fc2 |

| teal-700 | #336b92 |

| teal-800 | #224861 |

| teal-900 | #112431 |

### Color — Indigo (Tertiary Accent)

| Token | Hex |

| ------------- | --------- |

| indigo-25 | #f7f7fe |

| indigo-50 | #efeefc |

| indigo-100 | #e0ddfa |

| indigo-200 | #c1bbf4 |

| indigo-300 | #a19aef |

| indigo-400 | #8278e9 |

| indigo-500 | #6356e4 |

| indigo-600 | #4f45b6 |

| indigo-700 | #3b3489 |

| indigo-800 | #28225b |

| indigo-900 | #14112e |

### Color — Neutrals (Cool Blue-Gray)

| Token | Hex | Usage |

| ----------- | --------- | -------------------------------- |

| white | #ffffff | Canvas, cards |

| gray-25 | #f2f4f5 | Subtle surface |

| gray-50 | #e6e9ec | Dividers, hairlines |

| gray-100 | #ccd2d8 | Borders |

| gray-200 | #99a5b2 | Disabled text |

| gray-300 | #66798b | Secondary text |

| gray-400 | #334c65 | Strong body text |

| gray | #6c757d | Bootstrap secondary |

| gray-dark | #343a40 | Bootstrap dark |

| dark | #001f3e | ZaloPay deep-navy |

| dark-600 | #001932 | Stronger navy |

| dark-700 | #001325 | Premium navy |

| dark-800 | #000c19 | Deepest navy |

| dark-900 | #00060c | Near-black |

The grayscale leans cool/blue rather than warm — gray-400 is #334c65, a deep slate-blue. This subtle tint keeps everything visually anchored to the brand blue.

### Color — Semantic (Bootstrap-compatible)

```css

--primary: #007bff;

--success: #28a745; / Bootstrap green /

--danger: #dc3545; / Bootstrap red /

--warning: #ffc107; / Bootstrap yellow /

--info: #17a2b8; / Bootstrap cyan /

--light: #f8f9fa;

--secondary: #6c757d;

--cyan: #17a2b8;

--pink: #e83e8c;

--purple: #6f42c1;

--yellow: #ffc107;

```

The site keeps Bootstrap's default semantic colors alongside the brand palette — promotional surfaces use brand red/green/orange; system surfaces (alerts, validation) use Bootstrap defaults.

---

### Breakpoints (Bootstrap)

```css

--breakpoint-xs: 0;

--breakpoint-sm: 576px;

--breakpoint-md: 768px;

--breakpoint-lg: 992px;

--breakpoint-xl: 1200px;

```

| Breakpoint | Min width | Container max |

| ---------- | --------- | ------------- |

| xs | 0 | 100% |

| sm | 576px | 540px |

| md | 768px | 720px |

| lg | 992px | 960px |

| xl | 1200px | 1140px |

### Grid System

12-column Bootstrap flexbox grid:

```css

.container { max-width: var(--container-max); margin: 0 auto; }

.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }

.col, .col-md-6 { padding: 0 15px; flex: 1 0 0%; }

```

### Body Defaults

```css

body {

background-color: #ffffff;

color: #001f3e; / --dark — ZaloPay deep navy /

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...;

font-size: 1rem;

line-height: 1.5;

text-align: left;

}

```

---

| Value | Usage |

| -------------- | -------------------------------------- |

| 0 | Sharp UI |

| 0.2rem (3.2px) | Small chips |

| 0.25rem (4px) | Default buttons, inputs, cards |

| 0.3rem (4.8px) | Slightly larger UI |

| 0.5rem (8px) | Medium cards |

| 10px | Promotional cards |

| 10rem (160px) | Pill / oval |

| 100px | Pill button (marketing CTAs) |

| 50% | Avatars, circular icons |

---

• Hero: Phone mockup of the ZaloPay app + lifestyle photography (Vietnamese consumers using the app)

• Promotional banners: Bold red #e31748 gradient cards with white CTAs (Tết / lunar new year, voucher campaigns)

• App screenshots: Product surface UIs rendered on Android + iPhone frames

• Partner logos: Bank, telecom, and merchant logos in flat grayscale on light tint sections

---

```css

--animate-duration: 1s;

--animate-delay: 1s;

--animate-repeat: 1;

```

The site uses [Animate.css](https://animate.style) tokens for scroll-triggered reveals (fade-in-up on feature cards, fade-in for hero copy). Bootstrap transitions handle hover and focus state changes at 0.15s ease-in-out.

---

Trustworthy. Vibrant. Vietnamese-consumer.

Zalopay's design language balances financial-grade trust with the colorful, promo-heavy energy of a Vietnamese super-app:

1. ZaloPay Blue is the anchor. #0068ff shows up on the logo, primary CTAs, links, and focus rings — every interaction returns to this single brand voltage.

2. Deep navy text (#001f3e) instead of pure black creates a calmer, more institutional feel — appropriate for a payments brand.

3. Bright payment green (#03ca77) is reserved for success states and money-in moments — never for marketing surfaces.

4. Promotional red & orange (#e31748, #faa828) light up campaign banners — Tết vouchers, cashback promos, loyalty points. These get their own ramps so the design system can scale promotional intensity.

5. Bootstrap as the substrate. The site is built on Bootstrap's grid, utility classes, and form patterns — a pragmatic choice for a content-rich product page that needs to ship fast across many promotional landing pages.

6. Custom 9-step ramps (25→900) layered over Bootstrap's single-shade colors — this is the team's bespoke extension that lets product surfaces (cards, alerts, badges) sit in subtle tints without breaking brand consistency.

7. System fonts keep the page fast for Vietnamese mobile users on lower-end devices, while SF Pro lifts iOS rendering.

8. Cool blue-grays (rather than warm grays) keep neutrals in conversation with the brand blue — even a "neutral" border quietly references the brand.

The result is a fintech homepage that signals "trust me with your money" through restrained blue+navy gravitas, while leaving plenty of room for bright promotional cards to do the heavy lifting on customer-acquisition campaigns — exactly the right balance for Vietnam's most-used e-wallet.