Dubai Mall App
Soft Gold & Glass

The Three Principals

Every v2 enhancement traces back to a specific friction point experienced by Anya, Mariam, or James. Premium isn't about decoration — it's about removing the small frustrations that chip away at delight.

Token System — v2 Additions

The v1 token system remains the single source of truth. v2 extends it with glass, gradient, and elevated shadow tokens — all additive, no breaking changes to existing variables.

Palette — Enhanced

The core Sand and Gold palette is unchanged. v2 introduces the Midnight palette for evening mode and formalises gold as a gradient, not a flat value.

Type System — Unchanged

The Lora + Inter pairing is retained. No changes to the type scale. v2 adds gradient text utilities for premium display contexts only.

/* v2: Gradient text for premium display use */
.text-gradient-gold {
  background: var(--gold-gradient-sheen);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Use sparingly — hero headings, loyalty tier names only */
}

8pt Grid — Unchanged

The spacing scale is a contract between design and engineering. No changes in v2 — only reminder that consistent spacing is what makes the glassmorphism feel intentional, not accidental.

Core Components — v2

Updated components across buttons, inputs, pills, and skeletons. Every component now breathes without borders — depth comes from shadow and blur, not outlines.

App Screens — v2 Treatment

Three core screens with the full v2 treatment applied: glassmorphism search and navigation, gradient gold CTAs, shimmer loyalty card, and the Smart Pill live activity.

WCAG AA — v2 Compliance

The v2 gradient gold creates a new contrast challenge. Every gradient CTA has been tested at its mid-point value (#C9A84C) against both dark text and white text to confirm AA pass.

Enhancement Suite — Overview

Eight targeted improvements across three themes: visual style, micro-interactions, and contextual awareness. Each change maps to a specific persona pain point and a measurable quality-of-experience outcome.

Glassmorphism for Context

When an overlay appears — search bar, directions panel, bottom sheet — the user shouldn't feel like they've left the map. A blurred hint of what's behind the panel keeps spatial orientation intact. James doesn't lose his mental map of the mall.

/* Search bar — glass treatment */
.search-overlay {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--shadow-float-md);
  /* No explicit background-color — card floats visually */
}

/* Accessibility fallback */
@media (prefers-reduced-transparency: reduce) {
  .search-overlay {
    backdrop-filter: none;
    background: var(--color-surface);
  }
}

The "Found It" Pulse

When Anya searches for "Zara" and the pin drops — it shouldn't just appear. It should drop with a bounce, then ripple a soft gold circle outward. In a dense map with 500+ stores visible, that ripple cuts through the visual noise and pulls the eye exactly where it needs to go.

Loyalty Card Shimmer

Mariam pulls down to refresh her balance. The card doesn't just reload — a light sheen sweeps diagonally across the gold. Like light catching a credit card. It lasts 1.2s, then returns to the gentle continuous shimmer. It tells her: your points are real. This card has weight.

Smooth Tab Transitions

The active indicator doesn't jump between tabs — it slides. A spring-eased pill glides from one tab to the next, guiding the eye and confirming the navigation in a way a hard cut never could. The glass tab bar makes the whole thing feel like it's floating above the content below it.

Haptic Confirmation

/* Haptic tick on filter tap */
pill.addEventListener('click', () => {
  pill.classList.toggle('active');
  // 8ms = confirmation tick
  // Not buzz, not rumble — tick.
  navigator.vibrate?.(8);
});

The Mall Changes Vibe. So Should the App.

At 7am, Dubai Mall is quiet — soft sand and morning cream feels right. At 10pm on a Friday, Mariam is leaving the cinema in a dark atrium. The default "light mode" is blinding and wrong. Evening mode activates automatically at sunset, shifting to Midnight Sand and making the gold accents glow rather than shine.

/* Auto time-of-day detection */
function applyTimeTheme() {
  const hour = new Date().getHours();
  // Dubai sunset: ~18:30 in winter, ~19:30 in summer
  const isEvening = hour >= 19 || hour < 7;
  document.body.classList.toggle('evening-mode', isEvening);
}
// Run on load + check every 30 mins
applyTimeTheme();
setInterval(applyTimeTheme, 1800000);

The Smart Pill Navigation

James is navigating to Rainforest Cafe. His youngest starts crying and he needs to check the pram-friendly toilet on the Loyalty tab. In v1, he switches tabs and the navigation is gone. He has to go back, find Rainforest Cafe, tap Directions again. In v2, a live activity pill lives at the top of every screen: "3 mins to Rainforest Cafe →". One tap brings him back. Navigation survives the context switch.

/* Smart Pill visibility logic */
// Show pill on non-Map screens
// when navigation is active
if (activeNav && currentTab !== 'map') {
  pill.style.display = 'flex';
  pill.textContent =
    `${eta} mins to ${destination} →`;
}
// On tap → return to Map tab
pill.onclick = () => switchTab('map');

Smart Skeleton Loading

A left-to-right shimmer doesn't just fill time. It subconsciously reads as "reading" or "scanning" — the same visual metaphor as a barcode scan or a book being read. It makes the wait feel active and purposeful, not broken. The v2 shimmer is more aggressive in speed (1.6s) and uses a white highlight rather than a flat grey — meaning it works in both light and dark mode.

Decision Log — v2

Every enhancement was considered against three criteria: does it serve a documented persona need, does it pass accessibility review, and could it be built by the engineering team within sprint constraints?

Tools & Technology

No new tools were added for v2. All enhancements are CSS-native (backdrop-filter, CSS gradients, CSS animations) or vanilla JS — zero new dependencies.

Roadmap — v2 & Beyond