Theming & Customization

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 colors typography border radius spacing 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 1\ colors 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 background text border icons fill component based colors are for the following components buttons table card progress bar data visualisation default theme customized theme 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 material design color palette 1 1 recommendation for color use 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 primary color choice 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 primary color is too dark a lighter shade of primary color is used we do not recommend using a primary color for buttons and dropdown as they aren’t the primary action buttons in the app use of brand's primary color for a button is not recommended because it is not a primary action button 1 1 1 progress bar 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 default progress bar white progress bar branded progress bar the progress bar is too dark 1 1 2 sidebar background 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 default sidebar background over a bright video lighter sidebar background content might be difficult to read considering the moving background 1 1 3 sidebar menu color 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 default sidebar 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 sidebar color is too bright 1 1 4 data visualisation 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 bar chart visualization ! it is important that the color is dark or bright enough so the chart is easily readable if the brand’s primary color is making the values difficult to read, the lighter/darker variation of it should be used if the chart contains multiple color groups those colors should work nicely with the rest of the app default data visualisation colors ! for the multiple color group charts, it is important that the colors have the same importance otherwise, the chart could be read as some groups are prioritised we recommend adjusting the default colors 2\ typography 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 headings subheadings body component based are buttons table stats scorebug 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 family font size letter spacing font weight line height text transform text decoration 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 3\ border radius 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 4\ spacing 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 5\ other 5 1 logo placement the customer’s logo can be placed in the header by default, the league in which the game is played is in the header 5 2 icons 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