Colours

Interface
1. Greys
Feedback
Feedback v2
NFB brand colors
1. NFB brand colors palettes
  1. NFB Red
  2. NFB Orange
  3. NFB Yellow
  4. NFB Green
  5. NFB Turquoise
  6. NFB Blue
  7. NFB Violet
  8. NFB Pink
Desaturated

Interface

Colour	less variable	hex
Black	`@noir`	`#00000`
White	`@blanc`	`#ffffff`
Early Dawn	`@beige`	`#FFFAEB`
Natural Grey	`@warmGrey`	`#6b6a69`
French Grey	`@grisIntermediaire`	`#c0bfbe`
Light Grey	`@grisPale`	`#f5f4f4`

Greys

Colour	less variable	hex
grey-20	`@grey-20` aka:`@grisPale`	`#f5f4f4`
grey-50	`@grey-50`	`#e3e3e2`
grey-100	`@grey-100` aka:`@grisIntermediaire`	`#c0bfbe`
grey-200	`@grey-200`	`#AAA9A7`
grey-300	`@grey-300`	`#8f8e8d`
grey-500	`@grey-500` aka:`@warmGrey`	`#6b6a69`
grey-600	`@grey-600`	`#464545`
grey-700	`@grey-700`	`#313030`

Feedback

LEGACY

Colour	less variable	hex
info	`@blueInfo`	`#5bc0de`
danger	`@rougeDanger`	`#E03C31`
warning	`@jauneWarning`	`#FFEC20`
success	`@vertSuccess`	`#B9FF2B`
success	`@vertSuccess2`	`#32b17c`

Feedback v2

Colour	less variable	hex
links	`@text-link-color`	`#263EA6`
primary	`@fg-primary`	`#006499`
primary	`@bg-primary`	`#86c7e9`
info	`@fg-info`	`#009187`
info	`@bg-info`	`#85e5de`
danger	`@fg-danger`	`#b42b22`
danger	`@bg-danger`	`#eb736b`
warning	`@fg-warning`	`#d4ad00`
warning	`@bg-warning`	`#ffe46d`
success	`@fg-success`	`#1c9249`
success	`@bg-success`	`#6cdc97`

NFB brand colors

Colour	less variable	hex
red	`@rouge` `@nfb-red`	`#E03C31`
orange	`@orange` `@nfb-orange`	`#FF5C39`
yellow	`@jaune` `@nfb-yellow`	`#FFD100`
green	`@vert` `@nfb-green`	`#C4D600`
turquoise	`@turquoise` `@nfb-turquoise`	`#00BFB3`
blue	`@bleu` `@nfb-blue`	`#0085CA`
violet	`@violet` `@nfb-violet`	`#87319A`
pink	`@rose` `@nfb-pink`	`#F6416C`

NFB brand colors palettes

NFB Red

Colour	less variable	hex
nfb-red-50	`@nfb-red-50`	`#fbd6d3`
nfb-red-100	`@nfb-red-100`	`#f69f99`
nfb-red-300	`@nfb-red-300`	`#eb736b`
nfb-red-500	`@nfb-red-500`	`#E03C31`
nfb-red-600	`@nfb-red-600`	`#b42b22`
nfb-red-700	`@nfb-red-700`	`#79160f`
nfb-red-800	`@nfb-red-800`	`#5c0b06`

NFB Orange

Colour	less variable	hex
nfb-orange-50	`@nfb-orange-50`	`#ffdfd9`
nfb-orange-80	`@nfb-orange-80`	`#ffb3a3`
nfb-orange-200	`@nfb-orange-200`	`#ff8c73`
nfb-orange-400	`@nfb-orange-400`	`#FF5C39`
nfb-orange-500	`@nfb-orange-500`	`#c54327`
nfb-orange-700	`@nfb-orange-700`	`#772310`
nfb-orange-800	`@nfb-orange-800`	`#511305`

NFB Yellow

Colour	less variable	hex
nfb-yellow-20	`@nfb-yellow-20`	`#fff8da`
nfb-yellow-50	`@nfb-yellow-50`	`#ffe46d`
nfb-yellow-80	`@nfb-yellow-80`	`#FFD100`
nfb-yellow-200	`@nfb-yellow-200`	`#d4ad00`
nfb-yellow-400	`@nfb-yellow-400`	`#957a00`
nfb-yellow-600	`@nfb-yellow-600`	`#5c4b00`
nfb-yellow-700	`@nfb-yellow-700`	`#413500`

NFB Green

Colour	less variable	hex
nfb-green-20	`@nfb-green-20`	`#f6f9da`
nfb-green-50	`@nfb-green-50`	`#dde76d`
nfb-green-80	`@nfb-green-80`	`#C4D600`
nfb-green-200	`@nfb-green-200`	`#a3b200`
nfb-green-400	`@nfb-green-400`	`#737d00`
nfb-green-600	`@nfb-green-600`	`#474d00`
nfb-green-700	`@nfb-green-700`	`#333700`

NFB Turquoise

Colour	less variable	hex
nfb-turquoise-20	`@nfb-turquoise-20`	`#c8f8f4`
nfb-turquoise-80	`@nfb-turquoise-80`	`#85e5de`
nfb-turquoise-100	`@nfb-turquoise-100`	`#4ad4ca`
nfb-turquoise-200	`@nfb-turquoise-200`	`#00BFB3`
nfb-turquoise-400	`@nfb-turquoise-400`	`#009187`
nfb-turquoise-600	`@nfb-turquoise-600`	`#00534d`
nfb-turquoise-800	`@nfb-turquoise-800`	`#003531`

NFB Blue

Colour	less variable	hex
nfb-blue-50	`@nfb-blue-50`	`#c9e8f9`
nfb-blue-100	`@nfb-blue-100`	`#86c7e9`
nfb-blue-200	`@nfb-blue-200`	`#4aaadb`
nfb-blue-400	`@nfb-blue-400`	`#0085CA`
nfb-blue-600	`@nfb-blue-600`	`#006499`
nfb-blue-700	`@nfb-blue-700`	`#003a58`
nfb-blue-800	`@nfb-blue-800`	`#002438`

NFB Violet

Colour	less variable	hex
nfb-violet-50	`@nfb-violet-50`	`#ead0f1`
nfb-violet-200	`@nfb-violet-200`	`#cb97d7`
nfb-violet-400	`@nfb-violet-400`	`#ac6abb`
nfb-violet-600	`@nfb-violet-600`	`#87319A`
nfb-violet-700	`@nfb-violet-700`	`#672276`
nfb-violet-800	`@nfb-violet-800`	`#3f114a`
nfb-violet-900	`@nfb-violet-900`	`#1a051f`

NFB Pink

Colour	less variable	hex
nfb-pink-50	`@nfb-pink-50`	`#fedad9`
nfb-pink-100	`@nfb-pink-100`	`#fda7aa`
nfb-pink-200	`@nfb-pink-200`	`#f9788f`
nfb-pink-400	`@nfb-pink-400`	`#F6416C`
nfb-pink-600	`@nfb-pink-600`	`#bd2545`
nfb-pink-800	`@nfb-pink-800`	`#700817`
nfb-pink-900	`@nfb-pink-900`	`#460005`

Desaturated

WIP

(off / deactivated state)

Colour	less variable	hex
`red-off-00`	`@red-off-00`	`#F2B8B6`
`red-off-10`	`@red-off-10`	`#AA8586`
`orange-off-00`	`@orange-off-00`	`#F2BEAE`
`orange-off-10`	`@orange-off-10`	`#A58C87`
`yellow-off-00`	`@yellow-off-00`	`#E6DAAA`
`yellow-off-10`	`@yellow-off-10`	`#AFAA90`
`green-off-00`	`@green-off-00`	`#D6E3B8`
`green-off-10`	`@green-off-10`	`#979D71`
`turquoise-off-00`	`@turquoise-off-00`	`#B6D9D7`
`turquoise-off-10`	`@turquoise-off-10`	`#74A39F`
`blue-off-00`	`@blue-off-00`	`#BCD8E3`
`blue-off-10`	`@blue-off-10`	`#7B9DB0`
`violet-off-00`	`@violet-off-00`	`#CCB2D1`
`violet-off-10`	`@violet-off-10`	`#947D98`
`pink-off-00`	`@pink-off-00`	`#F2B6CB`
`pink-off-10`	`@pink-off-10`	`#AD9299`