Nitro Design System
The design system for Pluto TV, a multi-platform streaming application that includes TV, tablet, mobile, and web.
When
2023 – 2024
Platform
Smart TV • Web • Touch Devices
Technologies
Figma • Token Studio • Supernova
At a Glance
The challenge
One system, every screen
Keep a single design system serving TV, web, tablet, and mobile — and the teams shipping on all of them.
My role
Day-to-day owner
Senior Design Systems Designer for a system used by 12 product designers and around 300 platform engineers.
The impact
952 Figma inserts
Tokens the cross-platform team adopted without shimming, and components designers actually reached for.
Background
Pluto TV is a free, ad-supported streaming service owned by Paramount Global. 250+ live channels, thousands of on-demand movies and shows, no subscription, no account.
It runs on iOS, Android, Apple TV, Roku, Amazon Fire, smart TVs, and in any browser.
Token Structure
I set up a three-tier token structure with each token tier in its own collection:
Base tokens
Raw primitives. Hex, px, ms. Everything else references these.
System tokens
Semantic aliases for how Pluto TV uses the primitives.
Component tokens
Per-component decisions composed from system tokens.
Token Types
In our initial design token release, I created tokens for these categories:
Token Pipeline
I built a Figma-to-code pipeline using Supernova.
- The Supernova variables plugin pulls tokens out of Figma.
- Supernova transforms them into code and pushes to our GitHub repo.
Design Tokens Impact
Drop-in adoption
The cross-platform team integrated the tokens without custom shimming on either side.
Designer productivity
Semantic typography tokens replaced abstract names. Designers had something concrete to reach for instead of eyeballing it.
Cross-team pull
Other engineering teams asked for the tokens in their own codebases without us pitching it.
Figma Components
I shipped a set of components to give the product design team something concrete to build with.
The card was the most-requested by a wide margin. Cards show up everywhere in Pluto TV: channel guides, browse rows, detail screens, search results, in dozens of variations across four platforms. Pinning that one component down moved more for the product designers than anything else we could have done.
Design Process
The design system team was small. Most of the contribution work happened upstream of us, in the product design org. By the time a component reached the system, the visual and behavioral decisions had been worked out across earlier design, system, and accessibility reviews. Our job was to standardize the result and ship it.
The component design process:
Audit
Find every existing instance and screenshot the variations.
Note
Track observations as you go. They become the documentation.
Explore
Use the audit to consolidate and refine the component.
Document
Usage notes, examples, constraints. Whatever ships with it.
Feedback
Loop in designers and engineers. Iterate until it lands.
Figma Components Impact
952 Figma inserts
Card component adoption as of August 2024, across ~12 designers.
Engineering reference
Engineers built from the same design, tokens, and docs the designers used. No more drift between what was designed and what shipped.
Contact
I'm available for full-time and contract design systems work.
Start a conversation