Colour palette, theme tokens, and usage guidance.
The colour system is built for consistency , accessibility , and brand alignment .
Colours are defined as design tokens – not hardcoded 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 tokens are the highest-level colour variables. These are the tokens you should reach for first 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.
Prefer semantic colours in component code. Reserve base colours for illustrations, data visualization, and brand-specific contexts.
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
WFP brand colours represent the organization’s visual identity. Use them for logos, branded headers, and marketing materials – not as replacements for semantic tokens in UI components.
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
Prefer tokens over hex values. See Component usage for examples.Use semantic colour scales for UI states. Pair lighter backgrounds (100–200) with darker text (700–900) from the same colours for status messages and badges.Keep brand colours for brand moments. UI chrome should use theme and semantic tokens so components stay consistent and maintainable.
Check the contrast ratio between any 2 colour tokens. WCAG AA requires 4.50 for text and 3.0 for graphics.