Broadcast
Our broadcast is where our brand comes to life for millionts of viewers around the world. Type, colour and texture all unleash together to create an unforgettable experience.
Grid
Our broadcast layouts all align to a simple 40px grid. This creates a 27 x 48 grid on 1080HD resolution. All component sizes and spacing rules have been based on this.
Motion principle
Our motion principle is based on two dynamic movements – Unleash and Clash. These movements represent the energy and excitement unleashed when teams clash together in battle.
Our Clash movement enters from opposite sides, crossing in the centre to reveal content.
Our unleash movement explodes from the centre and travels outwards.
Broadcast panels
Our broadcast package is flexible and allows a variety of content to be displayed in a number of different ways. When choosing a panel, always consider the context and make sure that there is enough space for the information.
Visual principles
All of our broadcast screens are based on five core visual principles. These create visual interest and consistency throughout the package.
Vertical type
We align all headers, sub-headers and table headers vertically. This allows us to hero our typeface, create hierarchy and lets us maximise space as much as possible.
Always align vertical type to the grid and give headers a 40px border.
Layering
We layer images to create depth and give the feeling players and champions are larger than life. Images should be cut out and placed over our graphics.
Always consider legibility when placing images over or near type.
Key lines
As well as vertical type we also use key-lines to help give our screens structure and balance.
Key-lines should be used to create tables and graphs and can be aligned both horizontally and vertically.
Depending on the amount of rows and columns in the table, always try to align key-lines to the grid.
Key-lines should be placed below content or to the right of content. This creates tables that are more open and screens that feel less cluttered.
Flare
We use flare across all of our screens.
Our teal flare is always placed at the bottom left of our screen and travels off the screen at a 45 degree angle.
We also use our teal flare in the bottom right of each of our tables.
On a ‘VS’ screen where we talk about two opposition teams, players or champions; we use our orange flare alongside our teal flare. The orange flare is placed in the top right hand corner and travels into the screen at a 45 degree angle.
Highlighting
We can emphasise certain statistics by reducing the opacity of unneeded statistics to 30%.
If we need to emphasise further then we use our teal to highlight positive statistics and our orange to highlight negative statistics.
Layout
We use a 40px border across all of our components. Spacing between type is set at 40px or 20px. Content is placed to the left of the title or in the centre of two titles. Content and title should feel balanced and even busy pages should have room to breath.
Typography
It’s important that information is legible across all of our components. Each component uses two type sizes – regular and small. This allows us to be flexible with longer words or smaller spaces.
