LAPEYRE 2023 / Couleurs

Principe général

Bootstrap inclut une mécanique de gestion des couleurs à laquelle il convient d'ajouter certains ajustements. Il est interessant de "neutraliser" certaines variables de couleurs et de prévoir certaines variables réutilisables (toutes les variables en italique ci-dessous).
Les couleurs peuvent être rangées dans plusieurs sections : niveau de gris, branding et feedbacks.

A noter également que certaines couleurs disposent d'une variation light(-l) et d'une variation dark (-d).
La présence d'un rond de couleur tomate précise que la couleur vient directement de la charte client (référence officielle).

Branding

Brand 1

$brand-1-l

#AA192D

$brand-1

#EB002D

$primary $col-highlight $col-promo

$brand-1-d

#FCE9EB

$brand-1-xd

#1F1416

$dark $secondary $col-title $col-link

Brand 2

$brand-2-xl

#EFF3F6

$brand-2-l

#DFE7EC

$brand-2

#A0D8F8

$brand-2-d

#5D89A2

$secondary $col-current $col-checked

Brand 3

$brand-3-l

#F9F4EE

$brand-3

#F4EADE

Gray

$gray-98

#faf9f9

$light

$gray-95

#f4f1f1

$col-disabled-bg

$gray-85

#d9d9d9

$col-separator $col-disabled $col-border

$gray-50

#808080

$col-placeholder $col-txt-l

$gray-30

#4d4d4d

$gray-20

#333333

$col-txt

$gray-100

#f8f9fa

$gray-200

#ebecee

$gray-300

#e2e1e4

$gray-400

#d4d3d7

$gray-500

#b6b3b9

$gray-600

#787277

$gray-700

#514e52

$gray-800

#3a393c

$gray-900

#252427

Black, white, dark, light

$white

#FFFFFF

$light

#faf9f9

$dark

#1F1416

$black

#000000

Feedback

Primary & secondary

$primary

#007bff

$secondary

#6c757d

OK & KO

$success

#6AA421

$col-ok

$danger

#dc3545

$col-ko

Others

$info

#5D89A2

$warning

#dc3545