Data visualisation

01 Our data visualisation uses a characteristic graphic style that prioritises functionality through accessibility.

STROKES

WEIGHT
1px

Where appropiate stroke lines should use 1px weight, matching the rest of our line usage across the UI.

COLOUR

Colour takes big part in creating a uniquely Sofascore graphic. The core of the graphic should always use a colour from our palette.

When possible the colour should be informed by the team/player colours.

TEXT

TITLES
SOFA MONO

NUMBERS
SOFA BOLD

When the graphic requires use of text, we use Sofa Mono for titles and Sofa Bold for the numbers / main data.

Our type is always to be used in grey or stone colours, according to the general theme of the page.

In some occasions the use of a underlining box can be used in order to emphasize the number or overlay the numbers in order to save space.

COMPARISON

When comparing multiple players graphs, we add the secondary graph with a different colour on top.

Create an intersection between the two and give that intersected vector a 20% black opacity that will affect the secondary graph, showcasing the below.

scaling

When scaling, the lines should always be maintained at 1px stroke.

When we can, the graphic content should be optimised for scale allowing for more detail to be displayed.

02 Any data visualisation type should always follow our brand style. Here you’ll find some examples of multiple sports.

ATTRIBUTE OVERVIEW

Any data visualisation type should always follow our brand style. Here you’ll find some examples of multiple sports.

ATTRIBUTE OVERVIEW

FOOTBALL

Graphic colour changes according to player’s team.

ball possession

sport
FOOTBALL

Graphic colour changes according to team.

HEATMAP

FOOTBALL
BASKETBALL

Graphic colour changes according to player’s team. In this case we make use of the shades

SHOT MAP

BASKETBALL

Graphic colour changes according to player’s team. In this case we make use of the shades

tennis score

sport
TENNIS

Style

01

Our data visualisation uses a characteristic graphic style that prioritises functionality through accessibility.

Where appropiate stroke lines should use 1px weight, matching the rest of our line usage across the UI.

Colour takes big part in creating a uniquely Sofascore graphic. The core of the graphic should always use a colour from our palette.

When possible the colour should be informed by the team/player colours.

When the graphic requires use of text, we use Sofa Mono for titles and Sofa Bold for the numbers / main data.

When comparing multiple players graphs, we add the secondary graph with a different colour on top.

When scaling, the lines should always be maintained at 1px stroke.

Types

02

Any data visualisation type should always follow our brand style. Here you’ll find some examples of multiple sports.

Any data visualisation type should always follow our brand style. Here you’ll find some examples of multiple sports.

Graphic colour changes according to player’s team.

Graphic colour changes according to team.

Graphic colour changes according to player’s team. In this case we make use of the shades

Graphic colour changes according to player’s team. In this case we make use of the shades

When players don’t have associated colours, we use our brand blue and secondary shades.