I created the Newspack Design System (known in Figma as Newspack Components) from scratch to modernise and unify all reader-facing UI across our platform. Before this, there was no single source of truth, which made it difficult to keep track of the different products we were building. As the sole designer on the team, I found myself copying components from various Figma files or recreating elements from scratch. The design system streamlines this process, making it faster for me to create new interfaces and providing developers with clear guidelines and principles that improve consistency and QA.
Scope
Covers colour, typography, spacing, grid, icons, and a full library of components such as buttons, inputs, and alerts. Accessibility was a priority, with colour choices and patterns designed to meet WCAG standards.
Developer integration
Built npm packages for icons and colours, along with HTML, CSS, JS, and React components, allowing developers to integrate the system quickly and consistently.
Brand alignment
Designed to balance Newspack’s brand identity with the needs of publishers and readers, ensuring the system feels distinctly Newspack rather than generic.
Iconography
I designed all icons myself, following WordPress Core principles to keep them coherent with the broader ecosystem.
The library is now fairly complete and is becoming the foundation for everything Newspack builds, including the Block Theme.
