Data is our business

Our business is to supply data to our customers. Therefore the output from the financial markets becomes a key graphical element in our brand expression.

We want to show data in a meaningful and useful way. We use bold colors and dynamic textures to create distinct data visualizations.

A quick look at our infographics

Below you’ll find the main design elements used when creating data illustrations.

Textures

Colors

Bar graphs

Circle graphs

Line graphs

Introducing textures

Along with color, texture plays an important role in how we visualize data, indicating different categories of information.

Textures as a differentiator

Data visualization is omnipresent in the financial world. The way we use textures in our graphs help organize data and sets us apart.

These dynamic textures are created from two simple geometric forms: circles and rectangles. These forms can be scaled, rotated, and color coated to create dozens of distinct textures used in infographics.

Dotted structure

Lined structure

How to create a texture

The underlying structure of our textures are circles and rectangles. These shapes are repeated in uniform increments to create a background texture applied to our graphs.

Dotted structure

Basic pattern of circles with even vertical and horizontal spacing.

To create different patterns, the circles are scaled at a uniform ratio.

Lined structure

How to apply color

The secondary color palette is used in graphs.

Colors to express negative and positive performance

#00BD76#EF472F

Colors to use to indicate, for instance, historical performance

#365299#FFBD55#C5C5C5#EFEFEF

Only red and green can be mixed to show market perfomance

Use dark blue and yellow individually within a graph

Line graphs & mountain charts

Below are examples of different ways to present data in charts. Two versions are included, a simple line graph and a mountain chart with a textured background.

Simple line graphs

Gray should only be used in line graphs to visualize a comparison investment.

Textured mountain charts

When using a textured mountain chart for comparison investments, only apply the vertical pinstripe texture in light gray to ensure legibility.

Bar graphs

Below are examples of different ways to present data in a bar graph. Texture plays an important role in indicating different categories.

Textured bar graphs

Bar graphs are always shown in one color. Textures are used to distinguish categories within the graph. Dark blue or yellow are the only colors to use in bar graphs.

Circle graphs

These are examples of ways to present data in circle graphs. Both texture and color are used to distinguish categories.

Donut circle graphs

All secondary colors can be used in donut circle graphs. Please note, red and green are the only colors that can be mixed within a graph.

Complete circle graphs

All secondary colors can be used for complete circle graphs. Please note, red and green are the only colors that can be mixed within a graph.

Graph don'ts

See below examples to understand how NOT to combine colors when styling graphs.

Do not mix colors within a graph (except red and green)

Do not use our primary blue in graphs

In mountain graphs, do not change the color of the texture

In mountain graphs, do not change the texture

Illustrations

These are examples of different ways to present data in circle graphs. Texture and color play an important role in differentiating the categories.

Singular application

Collective application

Graphs can be presented as a collective unit, a graphic element that convey data in a visually playful manner.

Tables

Below are examples of different ways to present data in tables. Both for web and print formats.

Tables in print

There are two type of tables for print: tables broken by thin gray lines and tables alternating row color.

Example of row separation with lines

Example of alternating row color

Tables in UI

Icons

We have a library of icons that can be used to clarify our communication.

Download icons

Set of over 150 icons

Icons in action

Our icon family can be used in various channels of communication. Below is an example of how to apply icons to an infographic.

Icons used in infographics