Vanguard leads the way

Overview

A living system for a new generation

Vanguard was scoped around a clear brief: modern sports fans deserve a product that keeps pace with how they watch. We needed the CBS Sports broadcast voice to read online without every surface becoming a one-off composition, and we needed the interaction layer to stop fragmenting so engineering wasn't rebuilding the same score chrome across three independent stacks. I owned the system end to end (the baseline kit, the cross-surface applications on mobile, web, and CTV, and the documentation package that fed engineering), essentially everything outside of motion. The Associate Product Designer ran the motion pieces alongside me, and the Design Director served as our sign-off and approval checkpoint with minimal oversight, primarily stepping in to coordinate with cross-org stakeholders such as the Data and broadcast teams.

The challenge

Years of side-by-side product growth

CBS Sports' digital surfaces accumulated over time as parallel efforts: score headers with mismatched rules, matchup heroes that didn't share logic, tables that conflicted on specifications. Shipping a feature meant renegotiating those fundamentals every cycle. Vanguard exists to ship one interaction grammar and one component layer that teams can adopt, so they're not solving the same problem on every roadmap.

Where we started

Pushing the brand to find its edges

Before anything was finalized, we pushed type, color, and illustration to understand how expressive CBS Sports could be on screen while still reading as CBS Sports. This exploration phase wasn't about selecting a final direction on day one; it was about identifying the guardrails.

Typography explorations

We evaluated typefaces that could carry impact in headlines and still hold dense stats without losing legibility. TT Norms handles narrative and headline work; TT Norms Mono handles the figures so scores and tables maintain their rhythm under heavy data loads.

Color & pattern studies

First passes intentionally pushed saturation and density so we could identify the upper limit while the brand still felt like CBS Sports. We wanted the failure points surfaced in exploration rather than in production.

Retro vibrancy experiments

Pixel-style 16-bit illustration tests added a younger art direction that could sit alongside traditional broadcast polish without reading as a separate product.

Early application tests

We applied those illustration directions to collectable cards and promo modules to see which approaches held up against CBS' established on-air tone. Many were intentionally set aside as a result of those tests.

Team-driven color play

We allowed club palettes to drive the shell on matchup work to gauge how much fan emotion the frame could carry before becoming visually overloaded.

Design philosophy

Let the game lead

Live games set the tempo. Vanguard's role was to follow that tempo rather than override it. Patterns were retained only if they felt responsive in hand and still held up at lean-back distance without requiring a bespoke variant.

Motion principles

Move like a team in sync

Motion was the most difficult layer to keep consistent across teams, so we documented it first. The short list below became the default for any animated component, from an incrementing stat to a score header that opens at kickoff.

Motion in component form

Timing curves on paper don't tell the full story. The clip below is one of the small live tests we built where component, motion, and team color come together on screen.

Setting the kit

Locking in the foundations

Once the tokens stabilized, we organized color, type, and icons into documented lanes and stress-tested them with A/B variants, transparency studies, and dense layout mocks. We needed proof that the base layer could support both high-energy game moments and quieter reading states without one undermining the other.

Color system

We pushed brighter accents while keeping the foundation rooted in the CBS core ramps. Team colors plug into named slots for surface, accent, and motion washes so a rivalry reads as distinct without each team inventing its own chrome.

Typography system

We reduced the scale to three weights, tightened spacing, and validated the same spec on web, mobile, and CTV. That range provided enough hierarchy without turning the living-room view into a collection of competing styles.

Icon system

We compared a few families side by side and kept the set that aligns with TT Norms' geometry. It needed to feel approachable on phone glass, stay crisp at ten feet, and cover Sports without one-off custom glyphs.

Icon & type pairing

We iterated stroke weight, corner radius, and proportion until glyphs and letterforms read as if they came from the same source. No icon should appear to belong to a different kit.

A/B testing for tables

Rounds of user and internal critique refined the grids for box scores and stats until they remained readable while still carrying personality. Tables rarely deliver all of those qualities at once; we worked toward the right compromise.

Transparency & blur tests

Accessibility remained part of the brief throughout. We tuned glass, blur, and tint until overlays held type over grass, ice, and parquet without flattening the texture viewers expect from a broadcast.

Component explorations I

First boards pushed saturation and motion to find the upper limit; later passes pulled the volume back toward what we expected to actually ship.

Component explorations II

Wider mocks combined charts, long-form reads, and dense stat blocks into one viewport to confirm the kit still read as a single CBS Sports product rather than a collection of special cases.

Visual showcase

Same kit on phone, browser, and TV

Once the foundations were stable in review, we applied Vanguard across the flagship Sports surfaces on mobile, web, and CTV to validate that each platform could inherit the rules without spinning up a parallel interaction stack. Every destination still required local nuance; the documentation specified how to keep behavior aligned regardless.

Dark mode

Same system, after sunset

Night treatment wasn't a late-stage repaint. Scores, stats, tables, betting nudges, and social replies share one component set with a documented dark skin, so contrast and club accents hold up under stadium lighting. Prime time is CBS Sports' default context, so we treated dim UI as a primary state rather than a special edition.

Key components in dark mode

A focused pass on betting, soccer tracking, reminders, and reaction streams in dark mode to demonstrate how type, contrast, and club color hold up through the theme swap.

Reflection

What stuck after we shipped

Vanguard ran for the better part of a year with design, engineering, and product leads in the same weekly cadence, and it remains one of the more substantial system efforts I've contributed to. It demonstrated that bold visual ideas can sit on shared logic rather than bespoke art files. The payoff I notice now is in meeting time: we replaced one-off comps with discussions about reuse, weighing what deserves a component versus a token adjustment versus genuinely new code.

Outcomes

What we gained from the system