Overtone Design System

A new design system for migrating from Chorus to Wordpress

I managed the migration of Vox, The Verge, Eater and SB Nation from the Chorus CMS to Wordpress which included migrating from the Chorus front-end to the new design system, Overtone. Design management wanted the front-end to run on the same system but also allow for bespoke brand expression and for a designer to be able to manage the small details, especially type styling.

standard articles on vox, the verge, eater and SBN

Standard article template

Setup & Tokens

The goal was for each site to look good out of the box when it migrated to Wordpress but also allow varying levels of customization, depending on the brand's visual and editorial needs.

To achieve this, the system uses shared design tokens that are assigned to shared elements between the sites. The tokens have different styles (aka values) so each site can have different fonts, colors, etc. but be on the same system.

So, in the code, tokens look something like this:

token name	Vox	The Verge	Eater	SBNation
`sys.color.primary`	`#FFF200`	`#5200FF`	`#E60000`	`#0033FF`
`sys.font.primary`	Balto	Poly Sans	Degular	Druk

But visually, that looks like this:

Standard article template on desktop and mobile with a few tokens labelled

To set up a new site, a brand could set 1-2 fonts and 1-2 colors and use default layouts for everything. But if a brand wanted to spend a lot more time customizing both their branding and tooling, that would also work within the system.

How a content card gets branded and styled

Articles

In addition to the standard lede (illustrated above), there are also feature, special feature and overlay ledes and a shared set of article body components. The system used for articles is the most comprehensive and powerful part of the design system because any tooling designed for one brand is available for the other brands, if they choose to incorporate it.