Base UI

Every franchise was rebuilding the same page from scratch

Warcraft, Diablo, Overwatch, and StarCraft each shipped web pages with their own one-off components, spacing, and interaction patterns. None of it was shared, so every new game page meant re-solving problems the last team had already solved, just with slightly different buttons.

So I designed the layer every franchise would build on

Base UI sits below every game and franchise site as the shared foundation: one set of tokens, components, and sections that every team pulls from instead of rebuilding. Standard behavior (spacing, responsive layout, accessibility) lives in the system; only content, assets, and theming are left page-specific.

Starting from tokens, not screens

Color, type, spacing, and icon tokens were defined first, in HSL scales rather than fixed hex values, so a whole surface could be retheme’d by shifting a hue instead of hand-editing every component.

Then components specced down to the pixel

Every component shipped with a full spec sheet: every size, state, and responsive breakpoint documented so engineering could implement it without guessing at intent.

One page structure, tuned for a single job

Every franchise page assembles from the same section library (masthead, feature overview, cross-sell) mapped to a funnel: excite, help visitors match themselves to the game, then drive them to act.

Same components, different skin per franchise

Swapping a franchise’s token set re-themes every shared component automatically, so World of Warcraft’s account menu feels native to Warcraft without a single custom-built dropdown.

Closing

Warcraft, Diablo, Overwatch, and StarCraft now run the same nav component, just re-themed per franchise, instead of four separate implementations. Getting teams to adopt a shared system meant proving it could still feel bespoke to their players, not just consistent for engineering.