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 article template, Vox

standard article template, The Verge

standard article template, Eater

standard article template, SBNation

Project Goals

This was a pretty involved project that required input from design, product, engineering and editorial stakeholders.

• Same front-end system
• Designer-managed tokens
• Well-designed default layouts
• Bespoke brand expression
• System that allows for custom design + engineering work when necessary

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.

Default standard article template

Default category page template

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.

content card, default theme

content card, eater theme w/ fonts

content card, eater theme w/ fonts, colors & finetuning

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:

But visually, that looks like this:

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

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.

Feature article template on Vox

Feature article template on The Verge

Feature article template on Eater

paragraph components on Vox

paragraph components on The Verge

paragraph components on Eater

paragraph components on SBNation

sidebar component on Vox

sidebar component on The Verge

sidebar component on Eater

product card on The Verge

product card on Eater

Homepages & Navigation

Hompages and navigation are 2 of the areas of the system that allow for the most customization. The homepages obviously needed to be different based editorial needs. Vox is more newsy so could use more standard components while Eater focuses on service journalism and city-specific content. The navs are similar but also need to showcase the brand and what it covers because it is at the top of every page.

Same list of links in different nav layouts

For both areas, there are a set of shared components that can be arranged differently. This allows for different programming and design layout based on the brand’s needs and visual language.

Shared components on Vox mobile homepage

Shared components on Eater mobile homepage

Shared components on Vox desktop homepage

Shared components on Eater desktop homepage