The News Pattern Library
Design systems, component architecture, responsive design
Why I started this project
Bloomberg Industry Group’s news engineering team had accumulated real tech debt — hardcoded values, styling that worked but wasn’t intentional, and landing page layouts with arbitrary names that didn’t map to any clear purpose. I saw an opportunity to connect the dots, and decided to take it on myself.
I’d been learning and working within my company’s upstream design system, and wanted to see if I could use its tokens and components as a foundation for something more specific: a “midstream” library built for news UI.
Getting to know the baggage
Since the start of my time on the News Engineering team, I had listened to developers’ experience working with design system components. A previous design system had caused breaking changes and months of wasted work, and that experience had left a mark. I filed that away.
Taking inventory
I screenshotted and annotated our news pages in Miro — landing pages, article pages, and beyond — to understand what we actually had. I also did a content strategy audit to understand the different types of story collections, their purposes, and whether the visual design decisions had any logic behind them.
Some did. What looked like arbitrary variation in the “story package” component — a list of stories covering the same topic — turned out to reflect a real technical constraint. Some story packages had an image, some had two, and others none. I learned that image presence depended on curation method, because we couldn’t guarantee an image slot would populate unless that story was manually curated. So “curated,” “automated,” and “hybrid” became the new naming convention.
A bonus to my work
My audit board later became an onboarding tool when a new Head of News Product joined the team, helping him get the lay of the land.
The insight
Once I had mapped everything out, a pattern became clear: every element on our landing pages was just a headline unit in a different configuration. Sometimes it had a description. Sometimes an overline, a byline, an image. Sometimes none of those. But at minimum, it was always a linked headline. Those units formed vertical and horizontal lists. Those lists combined into mosaic-like layouts. The whole thing was one component, expressed differently depending on context.
Building the library
I started with the headline unit. At its core, every instance has a headline. Overline, description, and byline are each boolean properties — present or hidden depending on the use case.
I built the components using breakpoint tokens defined by the upstream design system — the same headline unit, the same lists, the same mosaic logic, just recomposed for the available space.
From there I built six image configurations: no image, image top, image left, image right, thumbnail, and a profile variant for stories featuring a prominent writer or practitioner. I then built lists of headline units, some varying which positions include images. The lists would combine into the mosaic layouts you see across our landing pages.
Getting engineering on board
Given the team’s history with design systems, I knew a formal pitch wouldn’t land. Instead I introduced the work gradually — mentioning it in relevant conversations over time, letting it become familiar before asking anyone to commit to anything.
The moment things clicked was when I walked the engineering lead through the story unit component and showed how it composed modularly to build entire pages. It appealed to their instinct for clean architecture. They could see how a system like this would save time down the line.
The tech lead and a senior engineer have since adopted atomic components from the upstream component library into production — the first successful adoption of INDG’s redesigned design system at Bloomberg Industry Group.
Ripple effect
Engineers at Bloomberg LP, our parent company, took notice. It’s early, but conversations have started between their team and our PMs and design system leads about what broader adoption could look like.
What stuck
I still use this library in my own downstream work — it's proven its value just by existing. But the broader win was unexpected: news pages turned out to be a surprisingly good vehicle for socializing design systems thinking. Most people can read a news page; that made it easy to communicate how well-considered patterns compose into something larger — and why it's worth the engineering investment.
Next project