Prime Modular
A Scalable Design System for Amazon Prime Video.
Prime Modular is a modular design system built to support the growing scale and complexity of Prime Video’s global campaign ecosystem. Designed with flexibility at its core, the system empowers teams to create, localise, and ship content-driven experiences efficiently across a diverse range of devices and regions.
The initiative involved decomposing the UI into reusable design tokens, atomic components, and flexible templates—ensuring alignment between design, engineering, and marketing teams while reducing redundancy and enabling global scalability.
Foundations (Design Tokens)
Spacing
An 8-point grid system and consistent layout tokens were defined to support responsive design across Fire TV, desktop, and mobile. Spacing logic was standardised across breakpoints, eliminating guesswork and ensuring visual harmony.
Grid/layout
Type + semantics
A type system built around Amazon Ember established clear hierarchy and accessibility standards. Semantic styles enabled predictable behaviors across device types and campaign tiers.
Colour tokens
The color system introduced usage-specific tokens—such as brand, semantic, and storefront-specific hues—ensuring consistency while enabling flexible theming for regional and promotional needs.
Atoms: core components
Prime logo and prime video app tiles
Designed for flexibility and consistency, the Prime Video logo system included responsive lockups and app tiles adaptable across device sizes and localisations.
UI: Hero containers
To streamline campaign workflows, the hero containers for Amazon Prime Video’s storefront were redesigned, supporting platforms including Fire TV, desktop, mobile, and smart TVs. I began by mapping out safe zones to define where artwork should and shouldn't appear across different screen formats and breakpoints.
To replace the need for over 60 layout variants (e.g. for title logos, show artwork, promotional tags), I created a single smart Figma component using slot-based logic. This allowed for dynamic content insertion, like logos, badges, and localised artwork, without breaking structure.
This approach not only improved scalability and reusability across formats, but also streamlined handoffs to the production and motion design teams, significantly reducing asset prep time and improving consistency across campaigns.
Molecules: Patterns
A flexible hero header component was created in Figma, encapsulating key typographic patterns used across storefronts, such as H1, H2, H3, header copy, subcopy, and tertiary text. This molecule-level pattern also includes optional slots for showing logos or secondary labels, allowing it to adapt to a wide range of campaign layouts.
Boolean logic and instance swap properties entirely power the component, enabling non-designer teams (like production or localisation) to toggle elements directly from the right-hand properties panel, without needing to detach or enter the component.
Templates
Higher-order templates were developed to define consistent page structures for genres, featured content, and promotional campaigns. These templates brought together atomic and molecular elements to form scalable UI canvases that could support both static and dynamic use cases.
Examples:
Standard and extended hero layouts
Single, 2-tile, and 3-tile filters for shows/movies
Campaign-driven storefront templates
Pages
The system culminated in campaign pages that spanned use cases like premieres, on-demand TV titles, and seasonal content. These pages demonstrated the modular system in action—balancing consistency with creative freedom.
