Design System
A unified design system aligning brand, UX, and product across a global broadcasting ecosystem.
LiveU powers live video transmission for the world’s top broadcasters, news agencies, and sports networks. Their tech gets used in some of the most demanding environments out there — breaking news, live sports, remote field reporting. The hardware and backend systems were world-class. The design ecosystem? It had fractured.
Years of fast growth and multiple product teams had created a mess. Typography varied between products. The same blue meant “primary action” in one app and “informational” in another. Components that did the exact same thing looked and behaved differently across platforms. Every new feature meant reinventing UI patterns from scratch.
The cost showed up in more than wasted design hours. Broadcasters who used multiple LiveU products hit a different interface language in each one, and that kind of inconsistency erodes the confidence professional tools need to inspire.
We built the entire initiative around three pillars:
One source of truth for every visual and interaction pattern across the LiveU product ecosystem. One button style. One navigation model. One typographic hierarchy. No exceptions, no “special cases” that slowly eat away at consistency.
Less cognitive overhead for designers and developers alike. Fewer components that do more. Clear naming. Obvious usage guidelines. The system should make the right choice the easy choice.
Build for the future, not just the present. The system has to handle new products, new platforms, and new teams without needing structural changes. Governance light enough to encourage adoption, robust enough to prevent drift.
The foundation layer set the design tokens everything else inherits. We started with typography: Plus Jakarta Sans as the primary display typeface for its geometric clarity and modern warmth, paired with Inter as the UI workhorse — exceptional legibility at small sizes and a huge character set.
Color tokens got organized into three tiers: brand colors (immutable), semantic colors (contextual meaning), and component colors (specific applications). Spacing followed an 8px base grid with a consistent scale. Elevation, border radius, and motion tokens rounded out the foundation.
We used Atomic Design methodology and built the component library in four layers:
Every component shipped with multiple variants, states, and sizes, all driven by the foundation tokens. Over 120 components in total, each fully documented.
A design system without governance is a design system waiting to decay. We set up clear processes for proposing new components, modifying existing ones, and retiring outdated patterns. Any team can submit additions through a contribution model, with reviews keeping quality and consistency in check.
Every component got detailed docs: usage guidelines, do’s and don’ts, accessibility requirements, responsive behavior, and code implementation notes. We treated documentation as a first-class deliverable, not something tacked on at the end.
We validated the system by applying it to two live product redesigns within the LiveU ecosystem. That stress test surfaced edge cases, revealed gaps in the component library, and confirmed the system could handle real-world complexity. We folded feedback from those implementations back in before the final release.
The complete Signa Design System included:
The result: 60% faster design velocity. Not because designers worked faster, but because they stopped reinventing. Every new screen started with proven patterns, every new feature built on established foundations, and for the first time in LiveU’s history, every product spoke the same visual language.
Ready?
We'd genuinely love to hear what you're working on. No pitch, just a conversation.
Apply for a Strategy Audit