LiveU — Signa Design System

The challenge

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.

Three strategic pillars

We built the entire initiative around three pillars:

Unify

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.

Simplify

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.

Scale

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.

Five stages of development

Stage 1 — foundations

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.

Stage 2 — component library

We used Atomic Design methodology and built the component library in four layers:

• Atoms — the smallest indivisible pieces: buttons, inputs, badges, icons, toggles, typography styles
• Molecules — functional combinations of atoms: search bars, form fields with labels and validation, metric cards, dropdown menus
• Organisms — complex UI sections: navigation headers, data tables with sorting and filtering, dashboard panels, modal dialogs
• Patterns — page-level layouts and interaction flows: onboarding sequences, settings pages, list-to-detail navigation, error recovery

Every component shipped with multiple variants, states, and sizes, all driven by the foundation tokens. Over 120 components in total, each fully documented.

Stage 3 — governance

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.

Stage 4 — documentation

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.

Stage 5 — real-world validation

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.

Deliverables

The complete Signa Design System included:

• Full Figma component library with 30+ master components and their variants
• Design token specification for development handoff
• Typography and color guidelines with accessibility ratios
• Grid and layout system with responsive breakpoints
• Iconography library with usage principles
• Motion and animation guidelines
• Governance documentation and contribution workflows
• Migration guides for existing products

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.