Showmax Design System

Documentation, Specs, Linked Figma files, Tokens and more ...

Hello 👋

This place serves as a documentation for Showmax Design System.

We have utilized Supernova to create an interlinked source of information for everyone from our organization who wants or needs to learn about standards, principles, components and other things we use to create our product.

Why Supernova?

This single source of truth enables us to present all ingredients aka building blocks in one place. Our documentation is open so everyone can easily see what building blocks we work with.

Technically Supernova is connected to Figma libraries. It extracts styles and components' definitions from Figma and creates tokens from them. Tokens and linked content from Figma are then used in documentation. Every published update in Figma automatically appears here.

In a nutshell

  • No silos. Figma, Docs, Code and People – all connected
  • Ready to be used by team(s) at scale
  • Engineered to create design system docs with ease

Where to start?

Begin with Foundations -> Learn about atomic components we use to create our product. We have crafted the documentation in the way to help you understand

  • brand essentials like colours or typography
  • design principles like use of space in layouts
  • use of components and their variants

Future?

Design system is a product like any other which is never finished. As new demands and needs emerge current definitions become obsolete. Before we get to future revisions take this version of Showmas Design System documentation as a starting point which can be further shaped. Design system is a living product.

 

Resources and libraries

Design System Foundations

Styles and components used across Showmax platforms

Web

Web specific components and definitions

Mobile apps

Components and definitions specific for mobile platforms

  • iOS
  • Android