All craft work

Photon

One language, three platforms.

Angel had a design system, but not one complete enough to help us scale in the months to come. I took it upon myself to start Photon, in close partnership with my fellow mobile product designer and our EVP of Experience. I relied on their expertise to make sure we built the foundation properly. Four years later, Photon spans seven teams.

  • Role: Creator & lead
  • Years: 2022–2026
  • Platforms: Web, mobile, TV
Angel.com's watch page: Young Washington in the hero with its Guild age rating and score, Watch Now and add buttons, and a Continue Watching row with Oxide progress bars
The Angel TV home screen: The Chosen in the hero with More Info and an Oxide Watch Now button, and the Featured Shows rail below
Solo Mio's title page in the Angel app: Guild Members Say ages 13+ and a score of 93, an Oxide Resume button, Parental Controls Available, and Share, Watchlist, Rate, and Download

22 components

Across web, mobile, and TV

Not built to scale yet.

When I joined Angel, nearly all the design energy pointed at one title, The Chosen. Web, mobile, and TV each had a look of their own, and the design system we had wasn't complete enough to hold them together as Angel grew.

Before · Web

Angel's website before Photon: Watch, Marketplace, and Funding in the top bar, a Tuttle Twins hero with a white Watch Now button, and the heading Watch all of our awesome stories

Before · Mobile

Angel's mobile app before Photon: Stories that amplify light, a Tuttle Twins card with fan and episode counts, and Home, Get Involved, and Account tabs

Before · TV

Angel's TV app before Photon: The Chosen in the hero with Continue Watching, More, and My List, a left icon rail, and the first Discover row

Angel’s home screens before Photon. Each platform had its own type and its own way of presenting a title.

Nobody asked

My directive was web, and I was on track to become PM of web. Nobody asked me to build a design system. TV didn’t have a product designer yet. Its PM and engineers had built a working app on their own.

It wasn't a styling problem. It was a structural one.

Three platforms, each reinventing the basics, without a complete foundation underneath. I believed our experiences had to feel the same on every screen, and the path we were on would never get us there.

The pain was still small, and the company couldn’t see the cost yet. I decided to build the foundation before the org felt the need, on my own nights and weekends. It would already exist when our projects needed it.

Photon Core

Built from the atoms up.

I started at the atomic level, not the screen: type, color, icons, shadows, and blurs. Every component on every platform is built from them.

Grounded before it was built

I didn’t build Photon alone. Two close partners shaped it from the first atom, and an outside expert pressure-tested the plan against scale.

01

My fellow mobile product designer and our EVP of Experience

Close partners from the start. I relied on their expertise to make sure we built the foundation properly.

02

A design system manager at Microsoft

I asked how a system holds up across a large org, and used the answers to plan three platform libraries on one core.

Where it started

The early boards put everything on one canvas: color, type, buttons, navigation, and the first light and dark styles. The Chosen still had colors of its own.

An early Photon board: labels, the grid, color ramps including colors for The Chosen, logo marks and product icons, notifications, light and dark interface styles, buttons, navigation, and typography
An early Photon board, with light and dark side by side from the start.

Photon Core v1.5

Each atom got its own board, with the rules for using it. Every platform library draws from these.

The Color board: white and black, a neutral ramp from 100 to 950, brand primary Oxide, Oxide Bright, and Copper, six brand secondary colors, and an information ramp
Color. An 11-step neutral ramp, Oxide and Copper as the brand colors, and full ramps for information, success, warning, and danger.
The Typography board: Display and Heading XL, L, and M, each shown in medium, semibold, and bold with its size, line height, and letter spacing
Type. Seven groups: Display, Heading, Title, Eyebrow, Paragraph, Caption, and Footer, each in medium, semibold, and bold.
The Grids board: a 16-column grid for 1920px TV screens with 18px margins and 36px gutters, and a 12-column desktop grid with 64px margins and 16px gutters
Grids. 16 columns for TV at 1920px, 12 for desktop, 8 for small desktop and tablets, and 4 for phones.
The Shadows board: five levels of elevation on dark cards, and the same five levels on light cards
Shadows. Five levels of elevation, one set for dark and one for light.
The Blurs board: six blur levels from 24px to 72px, and Background Accent 120 and 240
Blurs. Six levels from 24px to 72px, and two background accents, for frosted elements over busy art.
The Icons board: rows of general icons such as locks, people, chat, and payment marks, and control icons for playback, captions, and checkboxes
Icons. One set for every design asset, grouped by general, controls, navigation, reactions, status, Angel, and social.
The Logos board: Angel Guild lockups with the copper shield in portrait and landscape on dark and light, the shield without the Angel arc, and the shield icon alone
Logos. The Angel and Guild marks, and when to use each one.
The Show Art board: landscape posters, portrait posters, and still images for thirteen Angel titles
Show art. Landscape and portrait posters and stills for every title, ready for any design.

Dark for watching. Light for buying.

Every component works in light and dark. Theme wasn't a preference. It was a business decision, and we tested it.

The Color Anatomy board: a dark mode layout with Oxide Bright and a light mode layout with Oxide, each labeled for background, titles, eyebrows, paragraphs, wells, and the button
Color anatomy from Photon Core. Oxide Bright on dark, Oxide on light, and the grays behind every title, eyebrow, and paragraph.

Light

For buying

Transactional pages like buying movie tickets converted better on light.

  • Investment pages
  • eCommerce pages
  • Legal documents
  • Blogs
  • Job boards
  • User accounts
Angel's ticket checkout on light: order details, a Help 1 Person Go Free offer, a promo code, and the payment summary

Dark

For watching

Watch experiences converted better on dark, every time.

  • Watch and discover
  • Show pages
  • Episode pages
  • Livestreams
  • The mobile app, TV, and Angel.com
Angel's TV home screen on dark: The Chosen in the hero with Watch Now, and the Featured Shows rail
Discover in the Angel app on dark: Angel and the Badman in theaters October 9, 2026 with Use Your Tickets, category chips, and Continue Watching

The split held up every time we tested it. The system encoded what actually moved the numbers.

One language, three platforms.

From Photon Core I built three component libraries: web, mobile, and TV. 22 components in all, every one shaped from the same atoms, every one themeable light and dark.

Angel and the Badman's theatrical page on angel.com: the Guild age rating and score, 2 Guild Tickets Available, In Theaters Friday, and Use Your 2 Guild Tickets and Watch Trailer buttons
Homestead's title page in the Angel TV app: Guild Members Say ages 13+ and a score of 86, an Oxide Join to Watch button, Watch Sneak Peek, and Collection, Extras, Suggested, and About tabs
The Brink of War's title page in the Angel app: Guild Members Say ages 13+ and a score of 84, an Oxide Watch Movie button, and Share Free Access, Watchlist, Rate, and Download

A title page on web, the mobile app, and TV. The same Guild rating, buttons, and type, each tuned to its platform.

One button, three platforms

The button shows it best. Each library has the same types, the same light and dark themes, and the same Oxide. Each one is tuned for how people use it: hover on web, touch on a phone, focus for a remote, and a square version for Roku, which can’t draw rounded corners.

The web Block Button board: primary buttons in large, medium, small, and extra small, at rest, hover, pressed, focused, and disabled, on dark and light
Web. Rest, hover, pressed, focused, and disabled, in four sizes.
The mobile Block Button board: neutral, transparent, primary, brand, and text buttons, enabled, pressed, and disabled, on dark and light
Mobile. No hover on a phone. Enabled, pressed, and disabled.
The TV Button board: rounded and Roku buttons, with and without an icon, at rest, focused, pressed, active, and disabled, on dark and light
TV. Focus states for the remote, and a square version for Roku.

The starter set

I shipped the core components first, the ones every team needed on day one. Everything after built on them.

  • Buttons
  • Navigation
  • Pill badges
  • Lozenges
  • Input fields
  • Thumbnails
The Navigation Menu board: the Angel desktop and mobile web navigation on dark and light, logged in, with a notification, and logged out
Navigation. Desktop and mobile web, logged in, logged in with alerts, and logged out.
The Pill Badge board: badges, tags, icon-only badges, and notification counts in neutral, outlined, transparent, red, orange, green, blue, second cool, and Oxide, on dark and light
Pill badges. Badges and tags in nine colors. Badges should never be used as a button.
The Lozenge board: neutral, outlined, transparent, and brand lozenges in three sizes, on dark and light
Lozenges. Labels for status, like new or upcoming. The live lozenge is only for live.
The Input Field board: a labeled field with helper text at rest, with an error, while typing, disabled, and completed, on dark and light
Input fields. Rest, error, input, disabled, and completed.
The Image Thumb board: Young David thumbnails in landscape and portrait, large, medium, and small, at default, hover, hover next, hover play, and focused
Thumbnails. Landscape and portrait in three sizes, with hover, play, and focus states.

Photon, brought to TV

The timing let me become TV’s first product designer at the start of 2023, and build the new TV experience on the system I had just shipped. It worked in practice, not just in Figma.

See Angel TV

Adoption was part of the design.

Then I drove adoption, platform by platform. Each one came online at its own pace, toward one goal: clarity.

01

Core components first

Buttons, navigation, inputs, and thumbnails, shipped first to unblock every team.

02

A plan per platform

An implementation plan with each PM and lead engineer.

03

Every designer equipped

Hands-on enablement for every designer, with the process to build on Photon.

Seven teams today

It started with three platforms. It grew to every team that designs for Angel.

  1. 01Web
  2. 02Mobile
  3. 03TV
  4. 04Theatrical
  5. 05Guild voting
  6. 06Filmmaker
  7. 07Marketing

Four years of stewardship. As needs surfaced, I updated the system alongside my other work.

The foundation Angel runs on.

One atomic core, three platform libraries, and every team at Angel designing in the same language.

4 years

As the design foundation Angel runs on.

7

Teams building on it: web, mobile, TV, theatrical, Guild voting, filmmaker, and marketing.

22

Components across three platform libraries.

1

Atomic core every component inherits from.

2

Themes on every component. Dark for watching and light for buying held up every time we tested it.

1st

Product designer on TV, building on the system I had just shipped.

In summer 2026 I handed Photon to our new Design System Lead, to take it into the future at scale.

Photon is the system. Building the team that uses it is its own story.

Communication is king
Team
Seth Taylor, EVP of Experience, and Chad Dant, Mobile Product Designer, close partners from the start. A Design System Manager at Microsoft, and the PMs and lead engineers on every platform.
My role
Creator and lead of Photon. Photon Core, three component libraries, the rollout, and four years of stewardship.
Tools
Figma.

Up next

Angel TV

As Angel’s first TV product designer, I redesigned the experience for the big screen and helped launch a new profiles experience in 30 days.

Read the case