Opta Sports Widgets
Rob Gill
Freelance UX/UI Designer & Director (Provius Ltd.)
Made with

Opta Sports Widgets

Style Guide & Component Library

What is the Opta Widgets Suite?

Each Opta Widget is a snippet of embeddable code that visualises a specific set of sports data. When combining many widgets together you can create customised sports centres across all the major global sports.

Opta Sports Widgets

The Challenge

We were challenged to create a universal language that works across every widget for every sport. All widgets needed to be fully responsive, something never considered before. The code needed to be really easy to customise and still be functional on older browsers.

This meant that the visual design for all widgets needed to be as basic as possible, allowing customers quickly build their styles on top of our exising framework.

The Outcome

We rethought the entire widget suite. Approaching the task by considering all the widgets at the same time, this had never been possible before. We finally summarised all our efforts into a Style Guide and a Component Library.

- Widget Style Guide:
Fundamental design rules that all widgets must follow. Ensuring consistency across the whole widget suite.

- Widget Component Library:
Every component across the whole widget suite visualised. Showing all elements separately across 2 different breakpoints (desktop and mobile).

UX and UI by Asis Patel and Rob Gill

Opta Sports Widgets

Old vs New Version

Opta Sports Widgets

Basic CSS Rules

Core principals

In order to keep the CSS to a minimum we designed the widgets with the basics in mind. Anything that adds extra unnecessary CSS was avoided. We chose to leave out the frills so our customers can build on top of our simplistic designs. This means they don’t have to overwrite lots of rules that don’t match their brand. Here are some core principals:

- No rounded corners, simple square edges.
- No drop shadows
- No custom fonts, arial, san-serif only.
- No capitalised text, keep it the same as the feed provides it.
- Avoid borders, light background colours instead.
- Limit the colour pallet, only use our limited colours.

Opta Sports Widgets

Simplifying the Colour Pallet

Colour compliance

We’ve evolved the colour pallet by simplifying the range of colours. Bringing meaning to the use of colour and standardising each hex value. For example the old hex, #F1F2F2 now became #F2F2F2.

Where possible we’ve considered the WCaG Compliance Ratings. Ensuring all text is at least AA compliant. Here is our reference tool: http://snook.ca/technical/colour_contrast/colour.html

However there are some instances that colour compliance is ignored. We needed to make the Widgets feel like part of the Opta brand. If we were to be fully colour compliant, the entire pallet would become a lot darker, moving away from the core brand colours. As a compromise, we use the WCaG Ratings as a guide and have limited the main colours to shades of Opta blue, and shades of grey only.

Opta Sports Widgets

Mobile and Desktop Style Sheets

Minor differences

For the first time, the customer now has the ability to choose if they’d prefer to use the Mobile Style Sheet or the Desktop Style Sheet.
The intention of the Mobile Style Sheet is to apply minor changes to the widgets. Clickable elements increase in height. Ensureing they're large enough to be tapped with a finger. Text is also increased in size so it’s easier to read on smaller screens.

Opta Sports Widgets

Mobile & Desktop Match Centre

Opta Sports Widgets

Designed for Multiple Sports

Opta Sports Widgets

The result

"Rob Gill has not failed me a single time. One of the best among all people I have ever worked with.
Rob Gill is not only a wise Designer but also a great strategist. A careful expert with lots of knowledge in his field. Comes with an endless amount of tips
and an asset to any company."

Asis Patel

Opta Sports Widgets


The Opta Style Guide and Component Library is a living product. It is constantly evolving as additional widgets get introduced.
As it stands, these docs explain everything our design and development teams need to know about the suite. By using them anyone will have the ability to make new additions feel like part of the existing product. The time and effort required to do so is now reduced to a minimum.