Design System

DesignSystem

Building a robust, variable-based design system.

Project Snapshot

👀

The Challenge

Hearst Magazines didn’t have a design system for it’s CMS. This absence created fragmentation, making it difficult to maintain a consistent user experience or roll out global updates efficiently.

🎉

The Result

The new design system significantly improved workflows, enabling faster site updates, more efficient feature rollouts, and a more cohesive brand presence. Storybook was integrated for consistency.

I designed and built a comprehensive design system to support Hearst Magazines' new Content Management System (CMS). By leveraging Figma variables and reusable components, I established a flexible white-label theme that unifies the experience across 200+ sites.

Dark Theme
Light Theme

Drag the slider to compare.

The color palette uses Tailwind colors. Having a brand color simplifies updates across the whole design system if changes are needed.

The color palette uses Tailwind colors. Having a brand color simplifies updates across the whole design system if changes are needed.

Background color variables for different contexts.

Background color variables for different contexts.

Text color variables ensuring proper contrast ratios.

Text color variables ensuring proper contrast ratios.

The font for the white-label is Inter, and it is effective at different sizes and weights. The type styles are designed with Figma variables to control the font family, size, line-height, and more.

The font for the white-label is Inter, and it is effective at different sizes and weights. The type styles are designed with Figma variables to control the font family, size, line-height, and more.

Figma variables for typography that are applied to type styles.

Figma variables for typography that are applied to type styles.

Consistent spacing is maintained throughout the system using a 4-point grid.

Consistent spacing is maintained throughout the system using a 4-point grid.

The product card component is versatile and offers many options. You can easily turn various features on or off.

The product card component is versatile and offers many options. You can easily turn various features on or off.

The button component has multiple options like size, icon placement, and more.

The button component has multiple options like size, icon placement, and more.

Input fields play a crucial role in a CMS, and this component addresses every aspect.

Input fields play a crucial role in a CMS, and this component addresses every aspect.

The design system incorporates components for notes and documentation. A changelog has been added to provide a record of all modifications and their respective dates.

The design system incorporates components for notes and documentation. A changelog has been added to provide a record of all modifications and their respective dates.

Achievements & Outcomes

🚀

Efficiency

Reduced design-to-development time by enabling designers to create consistent, production-ready designs faster with reusable components.

😎

Consistency

Established a single source of truth for design tokens, ensuring visual consistency across all products and platforms.

Retrospective

What I Learned: The decision to build with Figma variables rather than traditional styles was pivotal. It future-proofed the system, ensuring that as Hearst's portfolio grows, the design system can evolve without requiring a complete rebuild.