As all customers want a different look & feel to their products, we have created NativeWaves EXP in a way that is customizable. The default version of EXP has a white-label design, which means it has no branding. We want to enable our customers to customise the EXP appearance to embody the look and feel of their brand and products to create a seamless and cohesive experience for their users.

The customization is done by changing the theme.

The theme can be customized with the following items:

If needed, two themes can be created - for example, if the brand has a light and dark mode.

To achieve easy customization, the UI is created using so-called design tokens. Design tokens are variables that store values such as color and font. They enable designers and developers to create a consistent visual language across different platforms and devices.

Colors are one of the primary elements that define the organisation's brand.

Colors are taken from the color palette and used in a form of tokens which are then applied on the UI.

Color tokens/variables are divided in two groups: property-based and component-based. Property-based colors are:

Component-based colors are for the following components:



The first step is to define a color palette. It should contain the base/core colors of the brand. Usually, there are primary, secondary and tertiary colors, different states and alerts and other color variants and tones.

Color palette examples:



The suggested use of the brands primary color is for element such as primary navigation button, the stat bar (for the home team) and other details such as borders.



As the background can be transparent, it is important to enure good contrast. It is not as straightforward to apply the primary color to elements such as the primary navigation button. If the contrast is not sufficient, we suggest using a different shade of the primary color or another color from the palette.





The color and the height of the progress bar can be changed. If possible, the brand’s primary color could be used. However, if the color is too dark it could blend with the background. In that case, we suggest using a lighter shade of the primary. If non of the colors from the palette work, the best solution is to either default to red or white as it is common for video players across different products











The default color is a black gradient. The background color can be non-transparent or some other type of gradient. Whichever color or gradient is used, it is important to ensure that the transparency is not too high so the content in the sidebar is visible considering the video playing in the background.



The sidebar menu color can be changed separately from the rest of the sidebar UI. However, it is important to be consistent with the use of colors.

The default color is transparent black which gives the menu bar a subtle look that blends with the rest of the video player UI. We recommend keeping it like this.



Be cautious about using a bright color. The sidebar menu element is quite big and the bright color could disrupt the overall look of the video player.



EXP contains graphs that can have one or multiple color groups. For a chart with one color group, for example, a bar chart, the default color is white. This can be changed to a brand's primary color or a variation of it.



If the chart contains multiple color groups - those colors should work nicely with the rest of the app.

Typography and fonts can be changed throughout the UI. The default typography is using the Roboto.

Similar to colors, typography is divided to property-based and component-based tokens/variables.

Property-based typography are:

Component-based are:





Just like the colors are applied from the base color palette, the font has base values which are used to create the main tokens/variables which are then applied to the UI. Those can also be changed. Base font values are:

Font can be changed for different components independently. For instance, the font for the number next to stats bars or in tables can be changed to a monospace style. If the new one is lighter than the original, the font weight can be adjusted for certain parts.

Depending on the brand, the UI can have rounded corners or square corners.

Border radius is applied to components throughout the app. It cannot be adjusted only for specific components.

Spacing can be changed for the overall UI. It can be set up to be more condensed or to provide more empty space. Changing the spacing between only certain elements is not possible.

The customer’s logo can be placed in the header. By default, the league in which the game is played is in the header.



Icons can be changed in the sidebar menu and for match events on the progress-bar



Icons for match events on the progressbar can also be replaced