Agoda Design System Deep Dive

1. Brand Overview

Agoda isn’t shouting. It’s calculated, functional, and globally accessible. That’s the vibe. Their design system matches their position as a large-scale travel booking platform catering to millions of users across cultures and screen sizes. There’s no fancy experimental typography or aggressive motion—the brand leans into clarity, consistent spacing, and UI patterns that feel safe and proven.

This is a brand for someone booking a trip at midnight in Bangkok or planning a holiday two months ahead from New York. The design needs to load fast, be legible to diverse audiences, and fit a huge variety of content. And it does.

The color system is where Agoda gets more personality—primary blue takes center stage, supported by a suite of neutrals and product-specific functional colors (VIP tiers, deals, urgent states). This is a design system that’s less about “artistic flourish” and more about “clear task execution.” Even the playful logo dots translate into an interface that’s friendly but restrained.

Typography? They went with Helvetica Neue. Safe choice. Global availability, clean geometry, no surprises. It means text is crisp and fits narrow mobile layouts well. Weight shifts create hierarchy instead of size jumps; headings aren’t massive, which means less scrolling on mobile.

Spacing follows an 8px grid (with some odd 1px and fractional pixel values sprinkled in—likely for fine-tuning vertical rhythm). Breakpoints are numerous, reflecting the need to adjust UI across many device sizes.

Overall: Agoda keeps the UI straightforward, responsive, and clean. It’s globalized design—the kind that sacrifices some individuality to ensure maximum reach and clarity. And it works.

2. Color System

Agoda's color architecture is extensive—far more than a simple primary/secondary combo. They have a broad palette for functional states, partner branding, and product tiers.

2.1 Primary Colors

Primary: #2067da (rgb(32, 103, 218))
This blue is saturated but not neon. It works for call-to-action buttons, primary links, and key interactive states. It’s bright enough to stand out against white, but not so aggressive it strains the eyes. Compared to Booking.com’s darker blue, Agoda's feels lighter and more inviting. Psychologically, this blue signals trust and reliability, crucial for a transactional travel site.

Secondary: Transparent (rgba(0,0,0,0))
Not a color in the usual sense—more a semantic “no background” for secondary buttons and transparent surfaces.

2.2 Complete Palette

Here’s the palette pulled directly from data, with roles and usage noted:

And the variables section contains extensive product and functional colors, e.g., --ads-colors-vip-gold-base-intent: #906600 (VIP tier gold), partner-specific (--ads-bg-partner-kakao: #fee500), urgent states (#9e2418), deals, cash, etc. Agoda basically has a color taxonomy: brand, neutral, functional, tier-specific.

2.3 Color Relationships

They’ve balanced a saturated blue with neutral grays and pure white. The dark gray (#2a2a2e) offers >4.5:1 contrast against white—accessible for body copy. The primary blue against white hits WCAG AA easily. The danger: using lighter blues (#75a8f9) for text—it risks failing accessibility unless paired with dark backgrounds.

Dark mode isn’t explicit in the data, but many colors have “inverted” or “subtle” variants (…-base-inverted-subtle), suggesting internal handling for inverted themes.

2.4 Usage Guide

• Blue (#2067da) only for interactive actions. Avoid spamming it on non-clickable text—keeps the affordance clear.
• Neutral grays for text tiers: black or dark gray for body, mid gray for secondary info, light gray for disabled.
• Functional colors (gold, bronze, diamond) only in context—don’t mix them into unrelated parts of UI.
• Hover states in blue tones (#5392f9, #75a8f9) ensure feedback without breaking brand palette.

Avoid: pairing light blue text with light backgrounds—it kills legibility. Don’t use gold/yellow functional colors for warnings—they’re reserved for VIP tiers.

3. Typography

3.1 Font Families

• Primary: Helvetica Neue
• Fallbacks: Helvetica, Arial

No Google Fonts or Adobe Fonts—this is a safe, system-available choice globally. Variable fonts: none.

3.2 Type Scale

Here’s the full extracted scale:

3.3 Hierarchy

Agoda’s type hierarchy is subtle. H1 tops at 24px—not massive. This keeps layouts compact, especially critical for mobile. Weight changes (400 → 700) give emphasis without making text blocks huge. Multiple caption weights let them fine-tune UI text: light for muted, bold for key labels.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. You see multiples (8, 16, 24, 32, 48, 64) plus small adjustments (1px, 2px, 3.02px) for fine control.

4.2 Layout

Breakpoints:

• 520px, 619px, 620px, 700px, 767px, 768px, 1023px, 1024px, 1100px, 1285px, 1286px, 1770px, 1771px

The close values (619/620, 1285/1286, 1770/1771) suggest fine-tuned layout shifts—probably to account for grid wrapping/perfect column counts.

5. Visual Elements

Border Radius Values

Pill buttons get 999px—full rounded. Cards/images tend to use 16px.

Shadows

They use subtle shadows:

• rgba(4, 7, 10, 0.24) 0px 2px 7px
• rgba(0, 0, 0, 0.07) 0px 4px 10px
• occasional heavier: rgba(0,0,0,0.2) 0px 2px 8px

Not flat design, but shadows are minimal—depth, not drama.

Borders

1px solid light gray (#dddfe2) is common. Ghost buttons use border with rgba(94, 107, 130, 0.32).

6. Components

6.1 Buttons

Primary Button

• bg: #2067da
• text: #ffffff
• padding: 12px 24px
• radius: 999px
• no border
• font: 16px Helvetica Neue, weight 400

Secondary (Ghost)

• bg: transparent
• text: #2067da
• padding: 12px 24px
• radius: 999px
• border: none

Outlined

• bg: #ffffff
• text: #2067da
• padding: 12px 24px
• radius: 999px
• border: 1px solid rgba(94,107,130,0.32)

6.2 Links

Multiple styles.

• Blue link (#5392f9), no underline; hover: no underline.
• Dark link (#2a2a2e), weight 500; hover: no underline.
• Light blue (#75a8f9) underlined; hover: remove underline.
• Gray (#5b5b5b), hover to pale blue (#87b3fb).

6.3 Inputs

Text input:

• bg: #ffffff
• text: #2a2a2e
• no border
• radius: 4px
• outline: #75a8f9 (on focus)

6.4 Cards

Implicit from shadows: typically radius 16px, light surface (#ffffff), padding aligned to spacing scale, subtle shadow for elevation.

7. Design Tokens

:root {
  /* Colors */
  --primary: #2067da;
  --secondary: transparent;
  --black: #000000;
  --gray-dark: #2a2a2e;
  --gray-mid: #3c3c3c;
  --gray: #5b5b5b;
  --white: #ffffff;
  --gray-light: #d7d7db;
  --border-gray-transparent: rgba(94, 107, 130, 0.32);
  --blue-hover-light: #75a8f9;
  --blue-link: #5392f9;
  --blue-overlay: #2c68c9;
  --blue-dark: #123a7a;
  --blue-tint: #2f68c4;
  --gray-alt-light: #bcbcbd;
  --blue-pale1: #87b3fb;
  --blue-gray-pale: #98b6e8;
  --blue-pale2: #87b3fb;

  /* Typography */
  --font-family: "Helvetica Neue", Helvetica, Arial;
  --font-size-h1-lg: 24px;
  --font-size-h1-md: 20px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-small: 13px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3.02px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-10_67: 10.67px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-50: 50px;
  --space-57_59: 57.5938px;
  --space-64: 64px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: rgba(4, 7, 10, 0.24) 0px 2px 7px;
  --shadow-md: rgba(0,0,0,0.07) 0px 4px 10px;
  --shadow-lg: rgba(0,0,0,0.2) 0px 2px 8px;
}

8. AI Coding Assistant Prompt

# Agoda Design System Specification

System Prompt:
You are an Agoda design expert. Build UIs matching their visual language exactly.

Brand Context:
Agoda values clarity, global accessibility, and functional design. The interface favors clean layouts, accessible color contrasts, and a consistent 8px spacing grid. Visual hierarchy comes from weight and color, not oversized typography.

Color Palette:
- Primary Blue: #2067da — Primary buttons, main CTAs
- Transparent: transparent — Ghost buttons, clear surfaces
- Black: #000000 — Key text, icons
- Dark Gray: #2a2a2e — Body text, dark UI chrome
- Mid Gray: #3c3c3c — Secondary text
- Neutral Gray: #5b5b5b — Footer text, subdued labels
- White: #ffffff — Backgrounds, text on dark
- Light Gray: #d7d7db — Dividers, surfaces
- Border Gray Transparent: rgba(94, 107, 130, 0.32) — Outlined buttons, form borders
- Light Blue Hover: #75a8f9 — Link hover, focus
- Link Blue: #5392f9 — Hyperlinks
- Blue Overlay: #2c68c9 — Hover overlays
- Dark Blue: #123a7a — Hover/active alt
- Blue Tint: #2f68c4 — Hover/focus tint
- Light Gray Alt: #bcbcbd — Disabled text
- Pale Blue 1: #87b3fb — Hovers/focus
- Pale Gray-Blue: #98b6e8 — Secondary hover
- Pale Blue 2: #87b3fb — Duplicate

Typography:
Font Family: "Helvetica Neue", Helvetica, Arial
Sizes and Weights:
| Role | Size | Weight | Line Height | Use |
|------|------|--------|-------------|-----|
| h1 large | 24px | 700 | 1.30 | Page headers |
| h1 medium | 24px | 600 | 1.21 | Section headers |
| h1 small | 20px | 400 | 1.30 | Subheaders |
| h1 small bold | 20px | 600 | 1.20 | Emphasis headings |
| body bold | 16px | 600 | 1.27 | UI labels |
| body | 16px | 400 | 1.43 | Paragraphs |
| caption bold | 14px | 600 | 1.30 | Labels |
| caption medium | 14px | 500 | 1.21 | Labels secondary |
| caption | 14px | 400 | 1.30 | Footnotes |
| caption heavy | 14px | 700 | 1.43 | Tags |
| caption light | 14px | 300 | 1.00 | Muted text |
| small | 13px | 400/500 | 1.43 | Small UI labels |
| xs | 12px | 400/600 | 1.25 | Fine UI text |
| xxs | 10px | 400 | 1.00-1.30 | Tiny UI text |

Spacing & Grid:
Base: 8px. Scale includes: 1, 2, 3.02, 4, 5, 8, 10, 10.67, 11, 12, 13, 16, 20, 24, 32, 48, 50, 57.5938, 64px.

Border Radius:
- none: 0px — Tables
- sm: 2px — Chips
- md: 4px — Inputs
- lg: 8px — Tabs
- xl: 16px — Cards, images
- xxl: 24px — Tabs large
- pill: 999px — Buttons, avatars

Shadows & Depth:
- sm: rgba(4,7,10,0.24) 0px 2px 7px
- md: rgba(0,0,0,0.07) 0px 4px 10px
- lg: rgba(0,0,0,0.2) 0px 2px 8px

Components:

Primary Button:
```css
.btn-primary {
  background: #2067da;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  font-weight: 400;
  font-size: 16px;
}
```

Secondary Button (Ghost):
```css
.btn-secondary {
  background: transparent;
  color: #2067da;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  font-weight: 400;
  font-size: 13px;
}
```

Outlined Button:
```css
.btn-outlined {
  background: #ffffff;
  color: #2067da;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(94,107,130,0.32);
  font-weight: 400;
  font-size: 13px;
}
```

Links:
- Default: `#5392f9`, no underline
- Hover: no underline
- Gray link hover: #87b3fb

Input Fields:
```css
.input {
  background: #ffffff;
  color: #2a2a2e;
  border: none;
  border-radius: 4px;
}
.input:focus {
  outline: #75a8f9 solid 1px;
}
```

Layout & Responsive Rules:
- Adjust at breakpoints: 520, 619, 620, 700, 767, 768, 1023, 1024, 1100, 1285, 1286, 1770, 1771px

Interaction Rules:
- Use hover color variants for feedback
- 150ms ease transitions for state changes

DO:
- Use only palette colors
- Keep spacing multiples of 8px or specified values
- Respect border radius mapping
- Maintain Helvetica Neue stack
- Ensure WCAG AA contrast

DON'T:
- Invent new colors
- Mix sharp and pill buttons inconsistently
- Use shadows heavier than lg variant

Code Examples:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: #5392f9;
}

.link-gray {
  color: #5b5b5b;
}
.link-gray:hover {
  color: #87b3fb;
}
```

9. Summary

TL;DR — Agoda’s design system is global-first: clean Helvetica Neue typography, a controlled blue-driven palette, and a disciplined 8px spacing grid. Simple shapes, consistent radius patterns, and functional color extensions for product tiers make for a scalable, easily themed UI.

Brand Keywords:

• functional-global
• blue-trustworthy
• restrained-elevation
• structured-consistency