A unified experience for Chorus
The Vox Media Resonance Design System is a set of interface elements, guidelines, and components developed to unify experiences across our publishing platform, Chorus.
Resonance connects a shared visual design kit with a front-end framework, allowing designers and engineers to build and adapt reusable patterns and create a cohesive experience across all of our applications.
Resonance helps people work seamlessly across contexts and applications, while reducing design and development time by giving product teams a common starting point.
What’s in Resonance
Sketch UI kit
A Sketch library with symbols, overrides, and styles to help designers build fast and flexible systems.
Design language
Guidelines for typography, color palette, and iconography that establish our look and feel.
Resonance framework
A flexbox-based CSS framework to quickly and efficiently scaffold site layouts.
Component library
A set of core UI components designed to be flexible, accessible, and responsive.
Design principles
Tell better stories, faster
The core value we provide is in helping our editorial coworkers and clients tell powerful, useful, and engaging stories across different platforms. Our products and services are designed to balance our editorial coworkers and clients' wants and needs for editorial flexibility with the goal of making those tools faster and easier to use.
Design for reuse
Our design system is built on a strong foundation of patterns designed to scale and be flexible. Sharing and adapting existing patterns makes our products more cohesive and easier to navigate and understand. Reuse and build on top of existing patterns whenever possible.
Universal
Resonance adheres to WCAG Level AA accessibility guidelines. Everyone should be able to get their work done on Chorus, whether they’re using a phone, tablet, or laptop. We can’t control what device someone uses to access Chorus, but we can control the experience they have.
Empower
Our diverse set of editorial coworkers and clients need a system that’s flexible enough to work for all of them, both functionally and culturally. Chorus is a welcoming, friendly, human, and empathetic workspace fueled by feedback from people who use it. We do rigorous testing to ensure that our platform is reliable and efficient.
Start building with Resonance
Learn more on our wiki or get started by downloading the files.