Design system

Prev Next

Compatibility notes: Supports Deltatre Apps 1.0 onwards.

What is the Design system?

The Design system improves the implementation efficiency of skinning and theming changes on projects using the Deltatre Apps.

The introduction of the Design system enables the central management of key design elements, meaning changes are made once and propagated across the relevant variables across all the Apps. Projects no longer require forking - Project teams can tweak the GitHub repo template in line with Design system capabilities.

The Design system includes design tokens, that are customized on the project side, including:

  • Font (family, style, transform, size, weight)

  • Colors (background, text, border colors)

  • Logos (image)

  • Icons (image)

  • CTAs (style and corner radius, color)

  • Gradients

  • Border radius support for limited UI elements (e.g., buttons, badges, TV navigation)

Several benefits of the Design system include:

  • Greater flexibility and ease of implementation for app styling changes

  • Consistent implementation of App styling

  • More efficient Deltatre Apps code

  • Improved time-to-market for new customers and for executing brand changes for existing customers

  • The reduction of 'design debt' within projects

  • Reduced app styling costs

  • Reduced app upgrade costs

Our longer-term vision is the enable automatic generation of design tokens directly from Figma. Watch out for updates in this space!