I co-led the design and implementation of an atomic style guide for McClatchy's 30 digital newspapers. Our goal was to create a cohesive and streamlined experience for McClatchy's papers while still maintaining the identity of each publication.
We did this by refining type styles across our sites, simplifying the color palette to reduce visual noise and implementing a modular, card-based design to pave the way for personalization. After the defining the atomic system in Sketch, we worked with developers to establish a shared language for each atom, molecule and organism.
As the project progressed, I took ownership of managing the Sketch library and Invision board that houses and defines atomic elements for our team.
Atoms
All text styles, image styles, icons and layer styles within our design system.
Molecules: Combining two or three atoms to create reusable elements
Text packages (including headlines and page headers), labels, icon sets and buttons in our design system.
Content Organisms: A group of molecules that build a repeatable card
All organisms related to editorial content, including story cards, feature cards and list cards.
Multimedia organisms:
Video, gallery and playlist modules for various use cases.
Call-to-Action Organisms:
Modules that link to other pages, including read next, related stories and subscription promotions.