Colour palette, tokens, and usage guidance.
The colour system is built for consistency , accessibility , and brand alignment .
Colours are defined as design tokens – not hard-coded values – so updates to the palette propagate automatically across components. Wherever possible, use semantic tokens , such as primary, danger, border.
The perceptually uniform colour palette ensures that each shade number has consistent contrast across all colour scales. For example, primary-600, danger-600, and neutral-600 all have a contrast ratio of ~4.8 :1. For reference, the tables show each colour’s contrast ratio (against white).
Theme colours are the highest-level tokens. These are your first choice when building interfaces.
For example, background or muted for background surfaces, foreground for default text, and primary for interactive elements.
Preview Token Value Contrast :1 background#ffffff1 muted#f8f8f81.06 foreground#000000e918.0 muted-foreground#0000008d4.81 primary#0078b84.79 destructive#e4052c4.81 border#0000001c1.28 input#8d8d8d3.31
Semantic colours express meaning – primary actions, neutral UI chrome, feedback states, and informational messaging. Each colour scale runs from 50 (lightest) to 950 (darkest).
In Tailwind, use them as utility classes such as text-primary-600, bg-muted, or border-danger-400.
The primary colours are used for links, buttons, focus rings, and other core interactive elements. They are mapped to the blue base colours.
Preview Token Value Contrast :1 primary-50#f4f9fc1.06 primary-100#e9f2fa1.13 primary-200#d3e6f51.27 primary-300#aed1ec1.59 primary-400#7bb5df2.20 primary-500#3f94cc3.32 primary-600#0078b84.79 primary-700#0057957.50 primary-800#003b6d11.3 primary-900#00274e14.9 primary-950#00163218.0
The neutral colours provide backgrounds, borders, and text hierarchy for everyday UI.
Preview Token Value Contrast :1 neutral-50#f8f8f81.06 neutral-100#f1f1f11.12 neutral-200#e3e3e31.28 neutral-300#cccccc1.60 neutral-400#aeaeae2.21 neutral-500#8d8d8d3.31 neutral-600#7272724.81 neutral-700#5454547.57 neutral-800#3a3a3a11.3 neutral-900#26262615.1 neutral-950#16161618.0
The neutral-alpha colours are semi-transparent equivalents of the neutral colours. They are designed for text, overlays, subtle borders, and muted text on various backgrounds.
Preview Token Value Contrast :1 neutral-alpha-50#000000061.05 neutral-alpha-100#0000000f1.13 neutral-alpha-200#0000001c1.28 neutral-alpha-300#000000331.60 neutral-alpha-400#000000512.21 neutral-alpha-500#000000723.31 neutral-alpha-600#0000008d4.81 neutral-alpha-700#000000ab7.57 neutral-alpha-800#000000c511.3 neutral-alpha-900#000000d915.1 neutral-alpha-950#000000e918.0
Use the danger colours for destructive actions, error states, and critical alerts.
Preview Token Value Contrast :1 danger-50#fff7f61.05 danger-100#ffedeb1.13 danger-200#ffdad61.29 danger-300#ffbbb51.61 danger-400#ff8f892.20 danger-500#ff4b4f3.29 danger-600#e4052c4.81 danger-700#ad000c7.54 danger-800#7c000111.3 danger-900#56000015.0 danger-950#37000018.0
Use the warning colours for cautionary messages and non-critical alerts that need attention.
Preview Token Value Contrast :1 warning-50#fff8e71.05 warning-100#fff0cf1.12 warning-200#fee09c1.28 warning-300#fcc5241.59 warning-400#dea6002.19 warning-500#ba83003.31 warning-600#9d67004.80 warning-700#7d48007.50 warning-800#602c0011.3 warning-900#4a150015.0 warning-950#37010017.9
Use the success colours for positive feedback, confirmations, and completed states.
Preview Token Value Contrast :1 success-50#f5faf61.05 success-100#e8f4eb1.13 success-200#d2e9d71.28 success-300#abd6b51.61 success-400#7abe8a2.19 success-500#38a05b3.30 success-600#0084424.79 success-700#0061477.49 success-800#03433211.3 success-900#022d2115.0 success-950#011b1217.9
Use the info colours for neutral informational messaging and supplementary context.
Preview Token Value Contrast :1 info-50#f4f9fc1.06 info-100#e9f2fa1.13 info-200#d3e6f51.27 info-300#aed1ec1.59 info-400#7bb5df2.20 info-500#3f94cc3.32 info-600#0078b84.79 info-700#0057957.50 info-800#003b6d11.3 info-900#00274e14.9 info-950#00163218.0
The base colours are derived from the WFP brand colours and are mapped to many of the semantic colours .
Reserve base colours for illustrations, data visualization, and brand-specific contexts. In component code, use the theme colours and semantic colours .
The blue colour scale is derived from wfp-blue and wfp-navy.
Preview Token Value Contrast :1 blue-50#f4f9fc1.06 blue-100#e9f2fa1.13 blue-200#d3e6f51.27 blue-300#aed1ec1.59 blue-400#7bb5df2.20 blue-500#3f94cc3.32 blue-600#0078b84.79 blue-700#0057957.50 blue-800#003b6d11.3 blue-900#00274e14.9 blue-950#00163218.0
The aqua colour scale is derived from wfp-aqua.
Preview Token Value Contrast :1 aqua-50#f4f9fc1.06 aqua-100#e5f3f81.13 aqua-200#cbe8f31.28 aqua-300#9ed4e91.60 aqua-400#65b9d82.21 aqua-500#2399bd3.30 aqua-600#007c9e4.79 aqua-700#005b787.58 aqua-800#003f5511.3 aqua-900#002a3b15.0 aqua-950#00192518.0
The green colour scale is derived from wfp-green and wfp-darkgreen.
Preview Token Value Contrast :1 green-50#f5faf61.05 green-100#e8f4eb1.13 green-200#d2e9d71.28 green-300#abd6b51.61 green-400#7abe8a2.19 green-500#38a05b3.30 green-600#0084424.79 green-700#0061477.49 green-800#03433211.3 green-900#022d2115.0 green-950#011b1217.9
The ivory colour scale is derived from wfp-ivory.
Preview Token Value Contrast :1 ivory-50#fbf9ee1.05 ivory-100#f6f0d91.14 ivory-200#ede3b71.29 ivory-300#d7cc9d1.61 ivory-400#baaf812.20 ivory-500#988e603.29 ivory-600#7d72464.80 ivory-700#5f54297.53 ivory-800#443a0c11.3 ivory-900#30260014.9 ivory-950#1f160017.9
The brown colour scale is derived from wfp-earthybrown.
Preview Token Value Contrast :1 brown-50#fdf9f71.04 brown-100#faeee91.13 brown-200#f5ded31.29 brown-300#edc3af1.61 brown-400#dfa0822.21 brown-500#c979523.31 brown-600#af5b2e4.81 brown-700#8b3e107.51 brown-800#65280111.3 brown-900#46190015.0 brown-950#2d0c0018.0
The orange colour scale is derived from wfp-orange.
Preview Token Value Contrast :1 orange-50#fff8f51.05 orange-100#ffeee81.12 orange-200#ffdcd01.28 orange-300#ffbda81.60 orange-400#ff91732.19 orange-500#f658343.29 orange-600#d23b164.79 orange-700#a223007.56 orange-800#75130011.3 orange-900#52090015.0 orange-950#34040018.0
The red colour scale is derived from wfp-red.
Preview Token Value Contrast :1 red-50#fff7f61.05 red-100#ffedeb1.13 red-200#ffdad61.29 red-300#ffbbb51.61 red-400#ff8f892.20 red-500#ff4b4f3.29 red-600#e4052c4.81 red-700#ad000c7.54 red-800#7c000111.3 red-900#56000015.0 red-950#37000018.0
The purple colour scale is derived from wfp-purple and wfp-burgundy.
Preview Token Value Contrast :1 purple-50#fdf8fb1.05 purple-100#faeef71.12 purple-200#f6dcee1.28 purple-300#ecbfe01.60 purple-400#de98ce2.21 purple-500#cc6bb93.29 purple-600#ba40a54.81 purple-700#a500677.51 purple-800#76014311.3 purple-900#52002d15.0 purple-950#34001b18.0
The original colours from the WFP Visual Brand Guide , from which the design system colour palette is derived.
Reserve brand colours for brand elements, such as logos, headers, footers, and marketing content.
Do not use brand colours in UI components because these colours are not
optimized for contrast. To ensure accessibility, use the theme
colours and semantic colours instead.
Preview Token Value Contrast :1 wfp-blue#007dbc4.50 wfp-navy#002f5a13.5 wfp-aqua#008eb23.80 wfp-darkgreen#005d457.91 wfp-green#03924a4.02 wfp-ivory#ece1b11.31 wfp-earthybrown#aa56285.15 wfp-orange#f0512d3.54 wfp-red#e3002b4.88 wfp-purple#ac12946.42 wfp-burgundy#9501588.66
See Component usage .
Check the contrast ratio between any 2 colour tokens. WCAG AA requires 4.50 for text and 3.0 for graphics.