Skip to content
  • 2021–present
  • Tech Lead
  • New Belgium Brewing

New Belgium & Friends

Overview

A Shared Module System Powering New Belgium's Entire Brand Portfolio

Five beer brands — one front-end architecture. I built a shared component system on Optimizely that gives New Belgium, Voodoo Ranger, Fat Tire, Lightstrike, and Kirin USA full visual autonomy without duplicating code across five codebases.

  • Optimizely / Episerver
  • SCSS Theming Architecture
  • Component Systems
  • Multi-Brand Platform
  • Handlebars
  • Performance
Visit live ↗︎
01

The Brief

Five brands, one repo

A skeleton mascot and a 130-year-old Japanese brewery have no business looking alike, but they all ship from the same repo. The pitch was counterintuitive: stop running four teams, four build pipelines, four QA cycles. Collapse everything into one engine and let SCSS specificity do the brand work.

Identity Prism

02

Mapping five identities onto one architecture

The architecture

Optimizely's Episerver handles content. On top of it, SCSS specificity layers control typography, color, animation intensity, and layout density per brand. Nothing touches shared markup. Marketing updates content without accidentally breaking a sibling brand.

The theme system

One deploy pipeline. Five theme files. Every performance fix and accessibility improvement ships to every brand at once, which is the real reason this architecture is worth the tradeoffs.

03

Each brand finds its own voice

Voodoo Ranger — loud, neon, skeletons everywhere

Voodoo Ranger

Voodoo Ranger is the loud one. Neon everything, skeleton mascots, animations that don't know when to quit. One theme file controls all of it.

Fat Tire — heritage craft, warm tones, editorial calm

Fat Tire

Fat Tire is heritage craft, warm tones, editorial calm. Same components underneath, totally different vibe.

Lightstrike — brutalist, high-contrast, sharp

Lightstrike

Lightstrike goes almost brutalist. High contrast, sharp type. One theme file swap gets you there.

Kirin USA — Japanese-influenced design on the same architecture

Kirin USA

Kirin USA pulls Japanese-influenced design into the same system. Completely different cultural DNA, same architecture.

New Belgium — heritage craft, the parent that ties the family together

New Belgium

New Belgium is the parent — warm, considered, craft-first. The sub-brands borrow from its DNA without flattening into it.

04

Try the theme switch yourself

The switcher

Same component tree. Different theme file. Watch every pixel repaint without a single markup change.

Production Output

05

Campaigns on the engine

Real campaigns, shipped on the same architecture

The engine doesn't just power five brand homepages — it ships campaign landing pages, launch microsites, and seasonal pushes. Same component tree. Different theme. Marketing requests turn around in days, not weeks.

Campaign landing — engine-built, theme-driven
Campaign interaction — built fast on the shared system
Campaign rollout — the engine handles seasonal launches at scale

Same engine, mobile too

The responsive variants ship from the same component tree. No separate mobile codebase, no mobile-specific QA cycle. The engine handles every breakpoint from one source of truth.

Mobile responsive — same components, different breakpoints
Mobile responsive — engine-driven from desktop to phone
06

What shipped

Five brands, one deploy pipeline

Five brands run from one pipeline. When Voodoo Ranger's Juice Force campaign tripled traffic, the performance fix shipped to all five properties at once.

Next Project

Phantom Labs

A Studio Site Built Without Library Defaults

Continue →