MediaOS/Resin: A Unified Design System

Problem

Hearst Magazines operates 100+ digital properties (Cosmopolitan, Elle, Esquire, Harper’s Bazaar, Good Housekeeping, Popular Mechanics, and more), each with distinct visual identities, editorial voices, and audiences.

In 2013, working with only a dozen brands, we knew we had to modernize. The tooling and presentation of our websites was… not ideal. Each magazine had accumulated its own bespoke features and front-end code. There was no shared source of truth: codebases, features, UI/UX, navigation, design patterns, article templates, and ad integrations were unique per brand. That lack of continuity meant new features couldn’t be shared between magazines, and design and engineering teams were effectively siloed to individual brands.

I was a significant contributor to the design of a unified, tokenized design system, and the core design-systems lead on its rollout. The architecture separated global primitives from brand-level visual identity and platform-specific overrides, giving 100+ magazines a single component library while letting each brand express its editorial character through design tokens rather than forked code. I led the MediaOS design rollout hands-on, working with print and editorial designers to adapt their craft to digital.