Style Customisation

This section describes the options available for bespoke styling of the BetBuilder UI.

The BetBuilder UI can be customised to tailor its appearance for as many different brands as necessary. Themes can be light or dark and each component of the UI can be customised. Custom styling can be applied for mobile, desktop and tablet devices. Clients can request multiple brands

Sample Mobile Styling

BetBuilder has been designed and built with a customisable approach to allow the application of your brand and ensure a seamless and consistent experience for your end users. This guide covers the customisable components, styles and information necessary to effectively apply your brand to the Bet builder interface.

Colours

Colour is an integral part of branding. It conveys the mood and the tone of your brand. To use colour appropriately it is important that you establish a colour palette and colour hierarchy for Bet Builder. Brand colours should be mapped across the below palettes, showing their technical characteristics (Hex and RGB).

What you need to do (Checklist):

· Use brand approved colours for the below palettes. (​Note: gradients can be replaced with solid fills by providing the colour specs and vice versa​)

· Make sure that your use of colour follows the correct hierarchy and usability principles.

· Make sure that your colour palette complies with the accessibility principles.

Fills

This palette is used to fill components – either their foreground or background.

States

This palette is used for the various states of some selectable / interactive elements.

Text

The text palette consists of a main text colour and a text colour when the text is on a coloured background to ensure enough colour contrast for legibility.

Backgrounds

This palette is used to fill large background areas in the UI.

Shadow elevation

Shadows are used to depict elevation of elements to give extra focus to the user.

Corner radius

Default UI uses rounded corners to soften the look and feel of the interface. A consistent px radius value is used throughout.

Colour usage in UI

Accessibility

Colour should not be used as the sole method of conveying content or distinguishing visual elements. We need to consider making our colour choices accessible to all users. A ​colour contrast analyser​ could be used to check the contrast ratio between foreground and background colour. Ensure that any text and background colour combination you use is of sufficient contrast to meet AA colour contrast requirements.

​Colourable​

Colourable is a useful and simple to use online tool that lets you test different text/background colour combinations in order to determine AA (or better) standards compliance.

Contrast

Your colour palettes should ensure sufficient colour contrast between elements so that all users can see the different elements easily. Use a tool such as ​Adobe Kuler: Colour wheel | Colour schemes​ to create colour palettes that will provide complementary colour options with a suitable contrast for your chosen brand colours.

Legibility

Text that appears on coloured backgrounds should be legible and meet accessibility standards. Both backgrounds and text must use colours and opacities that, when used together, meet these standards. Consider for colour blind users the text might appear unclear or blurry to them. Always be sure that you are using high contrast colours.

Typeface

Typography is key to making your content easy to read and understand. We use one font to keep the experience as uncluttered and default as possible for the user, and the style guide can be simply edited. Our default application font is Lato.

What you need to do (Checklist):

· Ensure you use a brand-specific font.

· Make sure that your font uses appropriate sizing to follow readability and legibility best practices.

Typography usage in UI

Accessibility

Accessibility is a critical part of digital experiences that should not be overlooked. Here are a few things to consider:

· Contrast:​ Make sure there is enough contrast in your content to direct the reader’s attention to the important messages and enhance the visual appearance.

· Colour:​ All colour combinations should pass the WCAG Level A.