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.
Theme tokens are the highest-level colour variables. They map directly to component styling – for example, background for page surfaces, foreground for default text, and primary for interactive elements.
These are the tokens you should reach for first when building interfaces.
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 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.
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.
Prefer tokens over hex values. See Usage guidelines for examples.
Check contrast. Use WebAIM: Contrast Checker. Ensure 4.5:1 contrast for text and 3:1 for graphics, per WCAG AA guidelines. For quick reference, the contrast column shows each colour’s contrast ratio against white.
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.