mediaOS: A Unified Design System

60+

brands, the identity layer. Cosmopolitan, Elle, Esquire, Harper's Bazaar, and 55+ more

85

magazine sites, the design-system scope. One or more locale editions per brand, single codebase

120+

properties, the accessibility-program scope. 85 sites plus microsites, shops, and affiliate properties

Every other Hearst case study on this site is a tenant of a building this one built.

Look at what came out of it. Apple News syndication runs on tokens minted here. The accessibility program scored its 95%+ against components architected here. The Custom Feeds block system themed itself using the same three-tier cascade this platform introduced. Sixty magazine brands, one codebase, and pages so polished the machinery is invisible.

It looks easy. That is the trick of it, and it is worth saying plainly how early this was: the work started in 2013, at one of the first publishers operating at anything like this scale, before the industry had a name for the central idea. “Design tokens” would not be coined for another year or so, at Salesforce, and when the term finally did make the rounds I thought the name was faintly absurd. We had been shipping the thing for years. Watching the industry hold a naming ceremony for something sitting in our production repo felt less like validation and more like being told what your own dog is called.

The problem

Hearst Magazines Digital Media was announced in June 2013, consolidating the company’s U.S. magazine websites under a single digital unit. I joined that October.

What it consolidated was not in good shape. Troy Young, who led the division, later described the state of things plainly: “We used to have a monolithic system that did everything and did nothing.” Working with roughly a dozen brands at the time, every title had its own front-end, its own templates, its own quirks. Navigation, article templates, and ad integrations were unique per brand inside one monolith, so a feature built for one magazine could not be shared with another, and design and engineering were siloed brand by brand.

The process running on top of it was no better. Theresa Mershon, then Creative Director at Hearst Digital Media, described it in the Monotype webinar Inside Hearst’s New Agile Design Process: “We had an eight-man team, we did all of the visuals, all of the template designs, lots of Photoshop mock-ups, we handed off everything to an offshore development team, which had its own set of challenges. We had an extended waterfall process.” A Photoshop mock-up handed to an offshore team is a description of a design, not the design itself. Every handoff was a chance for intent to drift, and nothing surfaced the drift until a change shipped.

I was hired to build the platform that fixed this. Instead, for close to a year, I was placed at Esquire making one-off article layouts by hand. No field existed for custom styling, so I wrote CSS directly into the post body of individual articles, one at a time, with no shared components and no way to reuse the work across brands.

At the time it felt like a detour. It was the opposite. Editors will use whatever tool is in reach, and if your platform does not give them what they need, they will route around it. Not out of sloppiness: out of deadline. The publishing deadline does not care about your semantics, and neither should they. They had their own responsibilities, and caring about my architecture was never one of them. A year on the floor taught me what a year in the architecture could not have: you cannot build the tool people stop bypassing until you have been the person doing the bypassing. It was probably lucky I did not join the platform team immediately. I arrived at the design having already been its most frustrated user.

Both are still running Lorem ipsum where the copy goes. That is what a page looked like when it was being built by hand rather than composed from anything, one article at a time, per brand. That’s a 15MB Photoshop file with placeholder text. It’ll eventually become a page.

There was no responsive breakpoint system at the time, as I remember it. Mobile styling, to the extent it existed, was served through browser detection: a separate stylesheet triggered by browser signals rather than screen size, patched together with hand-rolled CSS hacks because there was no real mechanism to target mobile at all.

By 2016, Hearst’s own reporting put a number on the fix: “HMD used to have 80 templates for digital products. Now they have three.”

The architecture

Eighty templates became three. That number is the compressed version of a much longer architectural decision, and the decision was this: the system cascades in three tiers, broadest to most specific, and each tier only overrides what the tier above it does not already answer.

• Platform tokens define what is genuinely shared across every site: spacing, base type scale, structural primitives.
• Brand tokens override those for a magazine’s visual identity, so Cosmopolitan’s color and type do not look like Popular Mechanics’s.
• Locale tokens narrow further, for a brand’s regional editions, letting a single brand run five or six international versions of itself without forking the codebase per market.

Nothing is redefined from scratch per brand, and nothing genuinely brand-specific is flattened into a shared default. That is how consolidating 80 templates into 3 avoided flattening 60+ distinct magazine identities into one look.

The tokens before tokens

Because we started before the vocabulary existed, the earliest tokens were not a schema or a spec. They were collected, by hand, from people: the values and decisions brands were already carrying around in their heads, their style guides, their print DNA. I kept some of that material. It predates the term by years, and it is the proof that the idea was a practice before it was a word.

Three tiers is an architecture diagram. This is what it looks like from the reader’s side. The pages below run the same components, the same grid, and the same article template as the one above. Nothing they visibly have in common is anything a reader would ever notice, which is the point of putting brand tokens in their own tier: it is the layer where a magazine gets to stay itself.

The diplomacy

The pattern had ancestors. The platform before this one was called Magnus. That is what it was called; I do not know what it stood for and I do not care. Between Magnus and mediaOS sat RAMS, which Hearst’s own 2014 platform announcement describes on the record: a platform built at Digital Spy in the UK, brought over when Digital Spy’s James Welsh joined to lead technology. The lineage was real and mostly undiscussed, the way internal plumbing always is.

I onboarded brands directly onto that architecture, not from outside it. In my own words: “I did onboarding for many of European brands and helped them the same as I did the US brands. I worked with editors, print art directors, brand designers, and people in charge of digital at properties to figure out how to fit their brand into the design system and tokens.” That is where the architecture actually got tested: not in the token definitions themselves but in the negotiation with each brand’s existing identity about what had to bend. A shared library that can’t absorb a real magazine’s print heritage isn’t a design system, it’s a template with extra steps.

Hearst’s launch release made the same point in its own words, quoting its vice president of product development, Mike Dushane: “What has been critical for our team has been developing this platform in close concert with our brands. Everything we’ve created has been done with a specific goal of serving Hearst audiences and editors.” I never knew the man well enough to know his first name. The release knew it. That is what releases are for.

The migration surfaced habits that had nothing to do with code. One art director wanted the site printed out, on paper, physically printed, not exported to PDF, so he could mark it up by hand. I won’t pretend I didn’t picture it: fold the printout like a newspaper, right where the first paint ended, and the one fold he already understood would explain the one he didn’t. I never did it. What I did was the job: deal with the ego, take the research in whatever form it shows up, ship the better product. Who cares what the feedback is written on.

Scale

The platform reached 85 magazine sites across 60+ brands from a single codebase. Some brands run one edition. Some run five or six. Eighty-five sites is not eighty-five codebases, it’s one codebase tokenized deep enough to hold eighty-five distinct identities without forking.

That figure is scoped to the design system itself. The wider footprint, once related microsites, shops, and other properties are counted, comes to 120+ sites, and that broader number belongs to the accessibility program’s audit scope, not to the design system.

It didn’t arrive as a lump sum. It arrived brand by brand, market by market: Esquire UK relaunched on the platform in late February 2016, Gioia Italy and Harper’s Bazaar Taiwan followed, Elle rolled across the UK, Spain, Italy, and the Netherlands through April and May, and a Cosmopolitan MVP launched across the US, UK, Nigeria, and the Netherlands that same May. Digiday, covering the international rollout, quoted Hearst Magazines International’s Chief Digital Officer Gary Ellis calling the whole thing “our elegant weapon,” by then roughly 300 titles across 46 markets on a platform that had started in one country two years earlier.

The names

The platform outlived its own name twice. Magnus became RAMS became mediaOS, and after 2020 the work continued under the name I knew as Resin: subscription lifecycle, customer data, fulfillment, business intelligence, with CDS Global, the largest magazine fulfillment house in North America and a wholly owned Hearst subsidiary, folded into it.

What Resin was meant to become, Hearst never said, and I believe the not-saying was the point. The public trail is one domain acquisition and a trademark filing describing a platform-as-a-service for content and database management, marketing, mailing, fulfillment, business intelligence, and customer service, plus a holding page that read “the brand behind world-class brands.” Make of that what you will. I stopped trying a while ago.

Elsewhere on this site I describe mediaOS as giving way to Resin, and this page describes them running side by side for a while. Both are true at different moments, and neither matters much fourteen years later.

Where this led

Every later system on this site inherited something from this one. Apple News syndication reused the same token-to-styling mapping instead of building a parallel one. The accessibility program, which I later design-led, audited components this architecture defined, at a scale (85 core sites, 120+ program-wide) this architecture made possible to audit at all.

Eleven years on one platform lineage is not eleven years of standing still. The work moved from art direction to product design as the org shifted from an offshore waterfall process to a design team shipping its own front-end, and each of those mandates ran on the same underlying system.

This page is the backstory. The two best things built in this house have their own: Apple News syndication is the best of them, and Custom Feeds is not far behind. Start there. This is just where the floor joists came from.