Design System

Core

The core of Flex IT's design system consists of the following elements: colors, spacings, grids and typefaces. On this page each of these elements are featured and explained.

Colors

Below the color palette true to the brand of Flex IT. It includes the primary range of colors as well as additions fit for specific purposes. This in order to balance flexibility with direction - always considering consistency throughout the expressions of Flex IT.

Primary
Teal
#00AB8E
Dark Teal
#009681
Dark Blue
#233E42
Thunder
#231F20
Teal
Teal 100%
#00AB8E
Teal 80%
#33BCA5
Teal 70%
#4DC4B0
Teal 50%
#80D5C7
Teal 30%
#B3E6DD
Accent
Orange
#FA9B3D
Basic
Black
#000000
White
#FFFFFF
Gray
Extra Light
#F4F4F4
Light
#D3D2D2
Light Medium
#A7A5A6
Medium
#7B7979
Medium Dark
#4F4C4D
Notification
Warning
#FFD600
Error
#E5432D

Spacings

For spaces between elements a consistent spacing is used. The spacers are based on 8 pixels as this is best scalable on different screen sizes (multiple of 8).

256 px
128 px
64 px
32 px
16 px

Modular Grid

Apply a grid to any form of design in order to create a consistent harmony between composition and layout. It will apply harmony between information hierarchy, element proximity and section rhythm - resulting in a professional and aesthetically beautiful expression.

6 columns / 96 px column width / 16 px gutter width

Typeface

The typeface Gilroy has been selected in order to express the importance of circular IT for Flex IT. This typeface features in many of its characters a perfect circle as the base shape. This in honour of the main driver of Flex IT's business. Aside from this conceptual quality Gilroy is also designed to render perfectly on digital screens, which makes communication to end-users optimal.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Gilroy / bold / download

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Gilroy / regular / download