Introduction

Welcome designers, here you'll find everything you need to use Fluid Design System to create ENGIE applications.

Sketch or Figma

The design system is available in Sketch (Only for Mac users) and Figma. Feel free to choose your favorite design tool, however we highly recommend to use the Figma version of the library. To simplify the collaboration process between designers, the Sketch version of the Fluid Design System library will no longer be available in September 2021.

Figma

Figma

Sketch report

Sketch

Starting April 2021, the Sketch library is no longer updated.
It will be discontinued in September 2021.


Fluid guidelines

Be sure to respect our main rules before designing.

Lato is for digital usage only. Please use the Clan-OT for print usage.

Aa
Font-family: Lato
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9
#0af
#009de9
#ffffff
#0af - #23d2b5
#6ed2b1
#f78a31
#1f106d
#e74a50
#fbdb3c
#009934
#e07602
#c03
#0f1e29
#0b74c0
#2b485c
#005288
#e62b87
#69af23
#007873
#becd00
#910f7d
#552382
#faca08
#0af - #23d2b5

All components are aligned to an 8px square baseline grid for mobile, tablet and desktop. Make sure you have the right parameters in your design tool.

Spacing illustration