We started by creating a visual list of all current sites and their designs. Then, we broke down the sites to the main components and kept a list of common patterns.
Because of the 9+ brands under the Viacom umbrella, it was unfeasible to create designs over and over again for every brand. We created a white label design system which we would use for all designs and templates. The design system consisted of:
After developing the design language, we built out the common components for all brands across shows, events, news, etc.
We then mapped out the fonts, colors, etc. using CSS variables so that we can easily swap out brand stylings.
We then created the system through inVision DSM and Storybook with our engineering team and scaled with code