Colours defined in Showmax Design System are inseparable part of foundations that we use to build and skin components. Selected set of colours plays a crucial part in definition of the following: interaction states, content styles and visual communication of the system.
Our brand color palette provided a base for colors we selected to use in our product interfaces. This palette allows us to stay aligned with values and character of Showmax brand across our digital platforms.
What we wanted to achieve with our efforts is to create a color system that makes our product usable and appealing at the same time. No matter the device that is used for viewing it though.
Colours in use
Themes
Our product interfaces are themed. We use dark theme in most of user facing parts of product to mimic immersive experience of movie theatres. On the other side where our customers decide about plans, choose a way how to pay for a subscription or adjust settings of their accounts we bring lightweight theme to accent trust and support peace of mind.
Dark Theme
Links to Figma projects (files) to be added.
- Marketing pages
- Sign in / Sign up experience
- Search & Browse experience
- Playback experience
Light Theme
Links to Figma projects (files) to be added.
- Join experience
- Choosing a plan
- Choosing payment method
- Providing details (i.e. for processing a payment)
- Account
Definition
Original colors are defined by Showmax brand guidelines. Product Silver is used as a part in a construction of dark shades of B&W palette. Colours created from basic brand colours (derived shades below) keep the product's look and feel aligned with Showmax brand yet comply with accessibility guidelines.
Showmax brand colours
Brand colours
Basic
#e83d8e
Basic
#658d9d
Derived shades
Dark
#c33377
Extra Dark
#982c61
Extra Light
#fce2ee
Dark
#557684
Extra Light
#e8eef0
Product black, white and derived shades (Grey)
From white to product black – We use this scale of shades to create components, maintain visual hierarchy and accent or decrease content priority where it is neccessary (i.e. text styles).
Grey
System colours
Purpose of system colours is to support visually information provided by a component displayed by the system (i.e. Alert or Banner).
Information
Blue
Success
Green
Warning
Orange
Error
Red
Notes on use of colours
Brand colours
Product Pink Dark color is intended to be used as a default product color that indicates a primary task within the user interface. (i.e. button for a payment confirmation)
Product Pink Extra Dark and Product Pink Extra Light colors support the use of the default Product Pink Dark in components where they help to express their interaction states (Focused, Active, Hover)
Grey scale
Product Black is defined by Showmax brand guidelines. It should be primarily applied on backgrounds in the dark themed interfaces in combination with Dark Grey and on primary text in the light themed interfaces.
Light themed interfaces 101
Typography
Use Product Black as a default color for any text.
Use Grey to style text with lesser importance (secondary text).
Components
Use White to style large components and their backgrounds
Use Grey to style elements with lesser importance (i.e. icons next to label in the button).
Use Grey Light to style component’s outline
Use Grey Extra Light to style component’s background
Dark themed interfaces 101
Typography
Use Grey Extra Light as a default color for any text.
Use Grey Light to style text with lesser importance (secondary text).
❌ Don’t use White.
Components
Use Grey Light to style elements with lesser importance (i.e. icons next to label in the button).
Use Grey Extra Light to style component’s outline
Use Product Black to style component’s background
System colours
How to use colors from the system palette
Basic – to style icons in light themed pages
Dark – to style icons in dark themed pages or to express interactions (i.e. mouseover state)
Light – to style compontents’ outlines
Extra light – to style components’ backgrounds
Additional notes
Don’t use colors to style text
Don’t to increase importance of an information
Don’t mix colors
Keep product UI slick
Related resources
-> Specs in Figma
-> Team (Reach out on Slack)