Colours

The design system offers an adaptive and scalable colour system. The colour palette has been divided into four categories: Primary colours, Secondary colours, Greys and Status colours.

Good to know

Please, take note of the ADEO preset documentation to use this theme.

Primary colour

Primary colour is the brand colour. It is the key component for our users to live and adopt ADEO's experience.

Click on the variables to copy them.

Primary 01

The primary is the essence of the brand ADEO.

val

#d9f0f3

scss

$color-primary-01-100

ios

ColorPrimary01100

andr

color_primary_01_100

es6

ColorPrimary01100

val

#91d5db

scss

$color-primary-01-200

ios

ColorPrimary01200

andr

color_primary_01_200

es6

ColorPrimary01200

val

#48bac4

scss

$color-primary-01-300

ios

ColorPrimary01300

andr

color_primary_01_300

es6

ColorPrimary01300

val

#009eac

scss

$color-primary-01-400

ios

ColorPrimary01400

andr

color_primary_01_400

es6

ColorPrimary01400

val

#00919f

scss

$color-primary-01-500

ios

ColorPrimary01500

andr

color_primary_01_500

es6

ColorPrimary01500

val

#007f8c

scss

$color-primary-01-600

ios

ColorPrimary01600

andr

color_primary_01_600

es6

ColorPrimary01600

val

#006974

scss

$color-primary-01-700

ios

ColorPrimary01700

andr

color_primary_01_700

es6

ColorPrimary01700

val

#004e57

scss

$color-primary-01-800

ios

ColorPrimary01800

andr

color_primary_01_800

es6

ColorPrimary01800

val

#002e33

scss

$color-primary-01-900

ios

ColorPrimary01900

andr

color_primary_01_900

es6

ColorPrimary01900

Greys

We used the same principles to design our greyscale but greys are based on 11 values swatches. Greys have specific use cases for UI elements:

Texts & Titles
Icons
Backgrounds

val

#e6e6e6

scss

$color-grey-100

ios

ColorGrey100

andr

color_grey_100

es6

ColorGrey100

val

#cccccc

scss

$color-grey-200

ios

ColorGrey200

andr

color_grey_200

es6

ColorGrey200

val

#b3b3b3

scss

$color-grey-300

ios

ColorGrey300

andr

color_grey_300

es6

ColorGrey300

val

#999999

scss

$color-grey-400

ios

ColorGrey400

andr

color_grey_400

es6

ColorGrey400

val

#808080

scss

$color-grey-500

ios

ColorGrey500

andr

color_grey_500

es6

ColorGrey500

val

#666666

scss

$color-grey-600

ios

ColorGrey600

andr

color_grey_600

es6

ColorGrey600

val

#4d4d4d

scss

$color-grey-700

ios

ColorGrey700

andr

color_grey_700

es6

ColorGrey700

val

#333333

scss

$color-grey-800

ios

ColorGrey800

andr

color_grey_800

es6

ColorGrey800

val

#191919

scss

$color-grey-900

ios

ColorGrey900

andr

color_grey_900

es6

ColorGrey900

val

#000000

scss

$color-grey-999

ios

ColorGrey999

andr

color_grey_999

es6

ColorGrey999

val

#ffffff

scss

$color-grey-000

ios

ColorGrey000

andr

color_grey_000

es6

ColorGrey000

Secondary colours

Secondary colours are essential to your design. We need them on many occasions to accentuate our primary colours and to deliver a specific message.

Blue-Grey

Mostly used for backgrounds.

val

#eaedef

scss

$color-secondary-blue-100

ios

ColorSecondaryBlue100

andr

color_secondary_blue_100

es6

ColorSecondaryBlue100

val

#cdd4d8

scss

$color-secondary-blue-200

ios

ColorSecondaryBlue200

andr

color_secondary_blue_200

es6

ColorSecondaryBlue200

val

#b0bbc0

scss

$color-secondary-blue-300

ios

ColorSecondaryBlue300

andr

color_secondary_blue_300

es6

ColorSecondaryBlue300

val

#92a2a9

scss

$color-secondary-blue-400

ios

ColorSecondaryBlue400

andr

color_secondary_blue_400

es6

ColorSecondaryBlue400

val

#758992

scss

$color-secondary-blue-500

ios

ColorSecondaryBlue500

andr

color_secondary_blue_500

es6

ColorSecondaryBlue500

val

#5b737d

scss

$color-secondary-blue-600

ios

ColorSecondaryBlue600

andr

color_secondary_blue_600

es6

ColorSecondaryBlue600

val

#405d68

scss

$color-secondary-blue-700

ios

ColorSecondaryBlue700

andr

color_secondary_blue_700

es6

ColorSecondaryBlue700

val

#264653

scss

$color-secondary-blue-800

ios

ColorSecondaryBlue800

andr

color_secondary_blue_800

es6

ColorSecondaryBlue800

val

#082435

scss

$color-secondary-blue-900

ios

ColorSecondaryBlue900

andr

color_secondary_blue_900

es6

ColorSecondaryBlue900

Purple

Secondary Purple is used to create a visual rythm with the Primary colour.

val

#e7e7f0

scss

$color-secondary-purple-100

ios

ColorSecondaryPurple100

andr

color_secondary_purple_100

es6

ColorSecondaryPurple100

val

#c5c5dc

scss

$color-secondary-purple-200

ios

ColorSecondaryPurple200

andr

color_secondary_purple_200

es6

ColorSecondaryPurple200

val

#a4a3c7

scss

$color-secondary-purple-300

ios

ColorSecondaryPurple300

andr

color_secondary_purple_300

es6

ColorSecondaryPurple300

val

#8281b2

scss

$color-secondary-purple-400

ios

ColorSecondaryPurple400

andr

color_secondary_purple_400

es6

ColorSecondaryPurple400

val

#605f9d

scss

$color-secondary-purple-500

ios

ColorSecondaryPurple500

andr

color_secondary_purple_500

es6

ColorSecondaryPurple500

val

#4b4a8c

scss

$color-secondary-purple-600

ios

ColorSecondaryPurple600

andr

color_secondary_purple_600

es6

ColorSecondaryPurple600

val

#393879

scss

$color-secondary-purple-700

ios

ColorSecondaryPurple700

andr

color_secondary_purple_700

es6

ColorSecondaryPurple700

val

#282863

scss

$color-secondary-purple-800

ios

ColorSecondaryPurple800

andr

color_secondary_purple_800

es6

ColorSecondaryPurple800

val

#1a1a4b

scss

$color-secondary-purple-900

ios

ColorSecondaryPurple900

andr

color_secondary_purple_900

es6

ColorSecondaryPurple900

Sand-Grey

Mostly used for backgrounds.

val

#eeedea

scss

$color-secondary-sandgrey-100

ios

ColorSecondarySandgrey100

andr

color_secondary_sandgrey_100

es6

ColorSecondarySandgrey100

val

#dddcd5

scss

$color-secondary-sandgrey-200

ios

ColorSecondarySandgrey200

andr

color_secondary_sandgrey_200

es6

ColorSecondarySandgrey200

val

#c2c1ba

scss

$color-secondary-sandgrey-300

ios

ColorSecondarySandgrey300

andr

color_secondary_sandgrey_300

es6

ColorSecondarySandgrey300

val

#a7a6a0

scss

$color-secondary-sandgrey-400

ios

ColorSecondarySandgrey400

andr

color_secondary_sandgrey_400

es6

ColorSecondarySandgrey400

val

#8c8b85

scss

$color-secondary-sandgrey-500

ios

ColorSecondarySandgrey500

andr

color_secondary_sandgrey_500

es6

ColorSecondarySandgrey500

val

#71706b

scss

$color-secondary-sandgrey-600

ios

ColorSecondarySandgrey600

andr

color_secondary_sandgrey_600

es6

ColorSecondarySandgrey600

val

#555550

scss

$color-secondary-sandgrey-700

ios

ColorSecondarySandgrey700

andr

color_secondary_sandgrey_700

es6

ColorSecondarySandgrey700

val

#3a3936

scss

$color-secondary-sandgrey-800

ios

ColorSecondarySandgrey800

andr

color_secondary_sandgrey_800

es6

ColorSecondarySandgrey800

val

#1e1e1c

scss

$color-secondary-sandgrey-900

ios

ColorSecondarySandgrey900

andr

color_secondary_sandgrey_900

es6

ColorSecondarySandgrey900

Status colours

Status colours convey various levels of importance for feedback information, like errors or warnings. They can also highlight important pieces of information or some tips. Status colours can also inform the user that an operation has failed or succeeded.

Information

This colour is used to highlight important pieces of information the user should be aware of. Should only be used if the information does not represent a threat.

val

#daeff7

scss

$color-info-100

ios

ColorInfo100

andr

color_info_100

es6

ColorInfo100

val

#a7d9ed

scss

$color-info-200

ios

ColorInfo200

andr

color_info_200

es6

ColorInfo200

val

#73c3e2

scss

$color-info-300

ios

ColorInfo300

andr

color_info_300

es6

ColorInfo300

val

#3facd7

scss

$color-info-400

ios

ColorInfo400

andr

color_info_400

es6

ColorInfo400

val

#0b96cc

scss

$color-info-500

ios

ColorInfo500

andr

color_info_500

es6

ColorInfo500

val

#007bb4

scss

$color-info-600

ios

ColorInfo600

andr

color_info_600

es6

ColorInfo600

val

#005c91

scss

$color-info-700

ios

ColorInfo700

andr

color_info_700

es6

ColorInfo700

val

#003a5c

scss

$color-info-800

ios

ColorInfo800

andr

color_info_800

es6

ColorInfo800

val

#002a41

scss

$color-info-900

ios

ColorInfo900

andr

color_info_900

es6

ColorInfo900

Success

Informs the user that an operation was successful.

val

#ebf5de

scss

$color-success-100

ios

ColorSuccess100

andr

color_success_100

es6

ColorSuccess100

val

#c5e39e

scss

$color-success-200

ios

ColorSuccess200

andr

color_success_200

es6

ColorSuccess200

val

#9ed05f

scss

$color-success-300

ios

ColorSuccess300

andr

color_success_300

es6

ColorSuccess300

val

#78be20

scss

$color-success-400

ios

ColorSuccess400

andr

color_success_400

es6

ColorSuccess400

val

#46a610

scss

$color-success-500

ios

ColorSuccess500

andr

color_success_500

es6

ColorSuccess500

val

#188803

scss

$color-success-600

ios

ColorSuccess600

andr

color_success_600

es6

ColorSuccess600

val

#006902

scss

$color-success-700

ios

ColorSuccess700

andr

color_success_700

es6

ColorSuccess700

val

#035010

scss

$color-success-800

ios

ColorSuccess800

andr

color_success_800

es6

ColorSuccess800

val

#023618

scss

$color-success-900

ios

ColorSuccess900

andr

color_success_900

es6

ColorSuccess900

Warnings

Inform the user about risks or threats. It teels the user to be careful about something.

val

#fdf1e8

scss

$color-warning-100

ios

ColorWarning100

andr

color_warning_100

es6

ColorWarning100

val

#f8d2b3

scss

$color-warning-200

ios

ColorWarning200

andr

color_warning_200

es6

ColorWarning200

val

#f4b27e

scss

$color-warning-300

ios

ColorWarning300

andr

color_warning_300

es6

ColorWarning300

val

#ef934a

scss

$color-warning-400

ios

ColorWarning400

andr

color_warning_400

es6

ColorWarning400

val

#ea7315

scss

$color-warning-500

ios

ColorWarning500

andr

color_warning_500

es6

ColorWarning500

val

#c65200

scss

$color-warning-600

ios

ColorWarning600

andr

color_warning_600

es6

ColorWarning600

val

#8c3500

scss

$color-warning-700

ios

ColorWarning700

andr

color_warning_700

es6

ColorWarning700

val

#531b00

scss

$color-warning-800

ios

ColorWarning800

andr

color_warning_800

es6

ColorWarning800

val

#360e00

scss

$color-warning-900

ios

ColorWarning900

andr

color_warning_900

es6

ColorWarning900

Danger

This colour informs the user of an error or that some operation went wrong.

val

#fdeaea

scss

$color-danger-100

ios

ColorDanger100

andr

color_danger_100

es6

ColorDanger100

val

#f8bcbb

scss

$color-danger-200

ios

ColorDanger200

andr

color_danger_200

es6

ColorDanger200

val

#f38d8c

scss

$color-danger-300

ios

ColorDanger300

andr

color_danger_300

es6

ColorDanger300

val

#ef5f5c

scss

$color-danger-400

ios

ColorDanger400

andr

color_danger_400

es6

ColorDanger400

val

#ea302d

scss

$color-danger-500

ios

ColorDanger500

andr

color_danger_500

es6

ColorDanger500

val

#c61112

scss

$color-danger-600

ios

ColorDanger600

andr

color_danger_600

es6

ColorDanger600

val

#8c0003

scss

$color-danger-700

ios

ColorDanger700

andr

color_danger_700

es6

ColorDanger700

val

#530000

scss

$color-danger-800

ios

ColorDanger800

andr

color_danger_800

es6

ColorDanger800

val

#2d0000

scss

$color-danger-900

ios

ColorDanger900

andr

color_danger_900

es6

ColorDanger900