LiveU Signa — Building a Unified Design System for the Global Broadcasting Ecosystem
Overview
When LiveU — a leader in IP-video transmission technology used by broadcasters around the world — approached us, their goal was clear: to unify their digital experience across multiple products under a single, coherent design language.
Over time, the company had grown into a vast product ecosystem serving different user groups: from journalists in the field to network engineers managing large-scale live events. Each product evolved independently, resulting in visual inconsistencies, fragmented UX patterns, and brand misalignment. LiveU needed more than a library of components — they needed a system that could scale across all platforms while reflecting the precision, innovation, and reliability of their brand.
That’s how Signa was born — the official LiveU Design System, crafted by Product Rocket.
Challenge
Our challenge was to rebuild visual harmony while ensuring the system was technically practical, brand-aligned, and future-proof — a toolkit that could empower both design and engineering teams to move faster and stay consistent.
LiveU’s visual and functional inconsistencies spanned multiple touchpoints:
Different typography and spacing systems between products.
Conflicting color hierarchies and insufficient contrast standards.
Repetitive, inconsistent components slowing down design and development.
A fragmented link between brand identity and product experience.
At the same time, we discovered that the LiveU brandmark itself needed refinement. Sub-brands such as LiveU Studio, MatrixX, and LiveU Signa were visually diverging from the main identity. We decided to correct and expand the brand guidelines before moving deeper into product design. This would ensure the design system grew from a solid brand foundation.
Our Approach
We started by mapping the complete UI landscape — performing an extensive audit of LiveU’s product suite, marketing materials, and internal tools. Every color, font, layout grid, and component was catalogued, analyzed, and rated for consistency, usability, and scalability.
From that audit, three strategic pillars emerged:
Unify.
Align every digital surface to a single design language based on shared tokens and brand semantics.Simplify.
Reduce cognitive load for both users and developers by introducing a tokenized system — one source of truth for typography, color, and spacing.Scale.
Build a flexible architecture that allows teams to adapt the system across products and use cases without breaking consistency.
Stage 1: Defining the Foundations
The first stage focused on design tokens — the DNA of any scalable design system.
We established semantic token layers covering:
Typography (font families, weights, line heights, and hierarchy)
Color roles (surface layers, states, interactive feedback)
Spacing and grid (consistent vertical rhythm and modular scale)
Shadows, borders, and radius values (ensuring depth and coherence across surfaces)
The typography foundation paired Plus Jakarta Sans (for brand titles) with Inter (for UI content). This combination offered both personality and readability — geometric precision balanced by a friendly digital tone. Each role (Title, Section, Body, Action, Subtext, and Overline) was mapped to a tokenized class and a corresponding use case, making the type system inherently semantic and responsive.
Our color hierarchy introduced surface layering — an approach that uses progressively lighter or darker tones to create visual depth and clarity. By defining Surface 1, 2, and 3 states, the interface gained a tangible sense of hierarchy without visual clutter. This also made the system more adaptable for accessibility and dark-mode expansion.
Stage 2: Connecting Brand and Product
While the design tokens were taking shape, we revisited the LiveU Brand Guidelines to ensure full cohesion between the corporate identity and the product experience.
This included:
Refining the LiveU logo system (main mark and micro versions)
Establishing clearspace, color, and micro-size rules
Unifying sub-brand logic for product families
Redefining brand voice and tone for product microcopy
We updated the typography guidance from the original Epilogue font (used in marketing) to Plus Jakarta Sans, which aligned better with digital usage and the new design system. The refreshed guidelines defined how tone, hierarchy, and personality should appear consistently across applications, interfaces, and communications.
This alignment ensured that the Signa design system didn’t just look like LiveU — it spoke like LiveU.
Stage 3: Building Components
Once the foundations were solid, we began creating the UI component library, structured around the atomic design methodology.
Atoms: basic inputs, buttons, text fields, checkboxes, icons.
Molecules: date pickers, dropdowns, toggles, sliders.
Organisms: tables, cards, modals, navigation bars.
Patterns: composite templates ensuring consistent layout behavior.
Each component was documented with:
Purpose and usage description
Interaction states (rest, hover, active, disabled, error)
Accessibility notes
Variants and configuration rules
Figma component links for developers
The documentation was built within Figma, with a structured index linking each component to its live instance — ensuring the design system was always discoverable, maintainable, and versioned.
The final library included over 30 components, covering everything from basic form elements to complex UI patterns like alerts, tables, and charts. Every component adhered to the token system, ensuring seamless visual consistency.
Stage 4: System Governance and Scalability
A design system’s success depends on adoption, not just creation.
To guarantee long-term impact, we created a governance model including:
Version control: clear naming and versioning for Figma components and tokens.
Contribution guidelines: enabling internal teams to propose new components through a standardized review flow.
Documentation principles: every component accompanied by examples, do’s and don’ts, and accessibility references.
Integration readiness: components built with developers in mind, easily translatable into code libraries or frameworks.
We also designed a visual roadmap — from atomic tokens to product-ready interfaces — giving the internal teams clarity on the system’s evolution and upcoming releases.
Stage 5: Testing and Validation
Every design system should be tested not only visually but also in real usage.
We collaborated with LiveU’s design and engineering teams to test the Signa system across multiple live product environments.
This validation process surfaced edge cases — different use of spacing, component states under dark backgrounds, and responsive breakpoints. Each feedback loop refined the tokens and components until they performed consistently across all scenarios.
By the final phase, Signa had become more than a design library — it was a shared language connecting designers, developers, and marketers under a unified creative framework.
Signa is more than a design system. It’s the blueprint for brilliant broadcasts.
Signa is more than a design system. It’s the blueprint for brilliant broadcasts.
Deliverables & Impact
Perhaps the most important result was cultural. Designers, engineers, and marketers now spoke the same visual language. What used to be a collection of independent interfaces became a cohesive ecosystem — a true reflection of LiveU’s mission to deliver “Quality-at-your-Service.”
Product Rocket delivered a complete end-to-end system that included:
A Figma-based Design System (LiveU Signa) with over 30 documented components.
A refined and extended Brand Book connecting visual identity, tone of voice, and sub-brand architecture.
A token architecture for typography, color, and spacing.
A governance framework and implementation guide for internal adoption.
The system was fully integrated into LiveU’s workflows and accessible through a shared Figma link for all teams globally.
Within weeks of deployment, Signa began transforming how LiveU’s teams designed and shipped products.
Design velocity increased
Teams could now build new product screens up to 60% faster by reusing pre-defined tokens and components.
Consistency improved across platforms
Every new interface — from web dashboards to broadcast tools — reflected the same visual and interactive language.
Brand cohesion strengthened
Marketing and product experiences felt unified, professional, and unmistakably “LiveU.”
Developers saved time
Documentation and semantic naming reduced handoff friction and made implementation straightforward.
Conclusion
Creating Signa wasn’t just about building a design system — it was about orchestrating brand, design, and technology into one consistent experience.
Through deep collaboration with LiveU’s teams, Product Rocket delivered a scalable, elegant, and future-ready design foundation that now powers LiveU’s entire product suite.
It redefined how LiveU designs, builds, and communicates — turning design consistency into a strategic advantage.