The Challenge
Why create a design system for Max?
Max, formerly and still known in some regions as HBO Max, is an American subscription video on-demand over-the-top streaming service. It is a proprietary unit of Warner Bros. Discovery Global Streaming & Games, which is itself a division of Warner Bros.
As Max continued to grow, maintaining visual consistency across various platforms became increasingly challenging. The existing component library, while functional, lacked cohesion, resulting in varied user experiences. This provided us with an opportunity to analyze and imagine how a comprehensive design system could work best for Max.
Foundation
Introducing Supreme
The name "Supreme" symbolizes greatness and impact, reflecting our commitment to delivering an expansive yet cohesive design system for Max.
Supreme embodies three core principles: Inclusive, Balanced, and Evolving
Design Token
The Foundation of Supreme
Design tokens are the core elements that ensure our design language is consistent across platforms. Primitive tokens establish a base for consistency, reusability, and scalability, while semantic tokens translate design decisions into reusable components, enabling a cohesive user experience across all digital properties.
Color
Color Anatomy
Supreme’s color system draws from a rich palette that emphasizes boldness and clarity. The neutral gray family plays a key role in structuring content, using subtle gradients to establish distinct visual zones and maintain focus throughout the interface.
The core blue shades represent the brand’s primary action color, symbolizing reliability and energy across user interactions.
Tokens
Core tokens are global colors that are used across components. They are named and grouped by the common UI element that they are applied to.
Usage example
From the primitives, we create tokens that can be applied not only to specific elements but also across different components throughout the page. This flexibility ensures a cohesive design language that adapts easily across the entire system. Here is the example of applying color token to the card component.
Typography
Typeface
Reflecting on the transition from HBO Max to Max, we observed inconsistencies in the typeface usage—especially noticeable between the help center and the main page, which disrupted the visual cohesion. To address this challenge in "Supreme," we chose a combination of Poppins and Space Mono to establish a unified yet dynamic typographic system.
Font weights
Font weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Font weight and size pairings must be carefully balanced.
To maintain the bold character of Max, we chose the regular for the lightest weight.
Scale
We tried to provide hierarchy for all types of experiences with our scale.
Components
Seamless consistency, reusability, and adaptability
From buttons to navigation elements, each component embodies our design language principles, promoting visual harmony and functional excellence. These building blocks enable cohesive, scalable product experiences across all platforms and devices
Variants and states
To ensure flexibility and cater to diverse use cases, we created multiple variants and states for each component. This approach empowers designers and developers to adapt components to their specific needs while preserving a consistent look and feel.
Key Learning
Through the course of this project spanning three weeks, I've gained a deeper understanding of the design system mindset. Every design choice, from color palettes to typography styles and component interactions, should be deliberate and carefully considered within the context of both present and future needs.
In terms of improvement, I aim to enhance the comprehensiveness and clarity of the documentation, making it a valuable resource for both designers and developers.
I would like to express my gratitude to Professor Pablo Deeleman, a Staff Frontend Engineer at Twilio, for his invaluable guidance and mentorship throughout this project. His expertise in design systems provided me with a deeper understanding of the subject matter and equipped me with the tools to create effective and scalable solutions.
