CNN Design System
Take an existing system and improve on it, while fully integrating templates into CNN’s content management system. Provide guidance on page structures depending on severity and type of story.
Task
Strategize, design and document guidelines.
Define design tokens
Typography tokens and construction
Spacing token definition
Construct a grid
CNN news attracts millions of daily visitors, and more than half are from mobile devices. This statistic required us to ensure the grid we were adopting is not retracting from smaller device experiences. Little changes were necessary, but some minor adjustments had large impacts.
Components for everything
The construction of CNN's web presence is a collection of reusable components that drive interactive story telling and engagement from their audiences. To create consistency across sub-brands and a cohesive visual language, components are created for a unified CNN presence.
This is only a fraction of the many components created for CNN.com.
Responsive templates
Creating an adjustable structure that can accommodate for different story priorities within different sub-brands.
