Client
Google Nest
Year
2021-2023
Context
Cast moves media playback from one device to another. A design system needed to be built around the function to thread it across Google Nest surfaces and governing systems.
Role
Architect of the Cast Design System. Two parallel workstreams ran alongside it: a redesign of the public Cast SDK site, and design work for the Google Home app.
Contents
· Frame
· The Problem
· The Approach
· Key Decisions
· Outcomes
· What's Outstanding
· Closer

Frame

Most design systems own their parts. They define the canonical type, color, components, and tokens that everything downstream inherits. Cast worked the other way around. It owned almost none of its parts, and that was the point.

Cast is Google's protocol for moving media playback across shared devices. Developers build casting into their apps through the Cast SDK. It surfaces across half a dozen products and platforms that each have their own teams and way of building. The Cast Design System was created to make that experience coherent everywhere it happened: one source of truth for casting, composed from systems it didn't own.

The Problem

Most of what a design system needs didn't exist yet. The piece that mattered most didn't exist as design at all. The Cast SDK is the core of casting, the kit developers use to make their apps and devices cast-able. It was built and maintained as an engineering product, with no design artifacts: no components, specs, or design presence of any kind. It had finally been decided that it needed one. The assignment was to give design a place in a product that had only ever been code.

The SDK components had to be built from shipped code and screenshots pulled from sample apps and slide decks. I needed to reverse-engineer their design and specs from screens I couldn't open, and rebuild them as real, editable, documented components.

Casting also ran across products that each had their own systems and teams: YouTube, YouTube TV, Google TV, Chromecast, the Home app, Nest Displays. The casting components on those surfaces were governed elsewhere, scattered across libraries I didn't own. Making casting coherent across all of them meant composing from those systems and staying continuously aligned with the teams that held them.

The conditions were narrow: one designer, remote, no test devices, building a system for casting with nothing to cast to, documenting flows from screenshots of the flows themselves.

The Approach

Building design system foundations is Design Systems 101. For Cast that would have been the wrong move. The products it served already had mature systems, each with teams maintaining them; a parallel Cast foundation would have been a fifth wheel, drifting out of sync the moment any of those systems changed. The system's job was to make the parts cohere, weaving cast through their existing functions and components.

So the approach would invert the usual model: compose, don't define. Cast components would be built from the atoms and foundations their origin systems already owned.

Cast System ownership model

That decision set the architecture. If the components belonged to many systems but the experience had to feel like one, the system couldn't be organized the way a single-product library is. It would be organized by surface — mobile, tablet, smart displays, TV, Chrome — how casting actually shows up to a user. Foundations and atoms would stay where they lived, in their origin systems; what Cast would hold was the composition: the casting components, specced per surface, addressable by where they were used.

The SDK was the exception. It owned nothing to inherit from, no design layer at all, so its components had to be built rather than composed. Once built, they entered the same structure as everything else: specced, surfaced, and connected to the rest.

Alignment was where the system actually lived. A system tethered to half a dozen others is only as coherent as its connection to the teams maintaining them. So the work would run on a standing cadence: meeting with the owning teams, tracking what changed in their systems, reflecting it back into Cast before it drifted. The connective tissue was a practice.

The hardest call underneath all of it was where to draw the system's edges. A small system wired into many larger ones breaks if it absorbs too much, so each connection took only the minimum it required. The boundary was the architecture.

No items found.
Measurable Impact

Key Decisions

Organized by surface. The library was structured around mobile, tablet, smart displays, TV, and Chrome (the surfaces casting appeared on) rather than a flat component taxonomy.

Components tethered to origin. Each surface's casting components nested live instances of their origin components inside Cast variants, inheriting upstream changes instead of drifting. Cast held the casting-specific composition; atoms and foundations stayed in the systems that owned them.

Sender component set. Cast button, the Output Switcher (the device-transfer control), mini and expanded controllers, and autoplay controls: editable, documented, light and dark, each specced for its surface.

Receiver component set. A player configuration for each core media type, with the cast-specific elements added and each one specced.

Styles tables mapped to origin tokens. Component specs referenced source-system tokens (Material and GM3 color, type, and shape roles) rather than redefining them, so the tethering was legible at the spec level.

A per-component spec template. A repeating documentation pattern across every family (anatomy, spacing, layout behavior, states, motion, behavior, accessibility) published to Google's existing internal documentation hub.

Outcomes

The Output Switcher I built shipped in Android's system UI across mobile and tablet, and on Nest Hub smart displays. While working alongside the Google Home design system team, I was also able to contribute the component to their design library. The tiny system with no ownership was now feeding the larger ones around it.

The components and flows I built became part of Google's Cast SDK public-facing website, documented across mobile, tablet, smart displays, TV, and Chrome. Last I checked, the work is still live, years after I rolled off.

Considerations

What's Outstanding

The Cast SDK site, the public home of the documentation, was the next thing to move. I'd updated its content end to end and scoped a full redesign with engineering, working through what the platform could and couldn't change. It was in flight when I rolled off, so the full redesign was someone else's to land.

The system itself was built to keep growing. v1 covered the surfaces casting ran on then; the model was always to absorb more as additional Google products gained cast capability, each new surface composed from its own origin system, the same way the first ones were.

Where the System Ends

We tend to measure a design system by what it owns — how many components it defines, how much inherits from it, how much of the surface area it controls. Ownership is the proxy for value. Cast is the case where that proxy breaks.

The system's true value was in providing the necessary tools to create a coherent casting experience across products that had no reason, on their own, to agree with each other. That coherence was a relationship, held in place by trust and upkeep.

I learned that sometimes the first architectural decision isn't what to build — it's where to draw the system's edges. Most systems inherit their scope from an org chart: a product, a brand, a team. Cast's boundary followed a single function wherever it traveled, across products and systems that it could not own. Getting that line right, before any component existed, was the decision the rest of the system depended on.

( More Work )