Introduction

WFP Design System is a collection of foundations, components, and guidelines to help you build consistent, accessible digital solutions for the World Food Programme.

Changelog

Latest updates to the WFP Design System registry.

Installation

Install and configure WFP Design System in your project.

Foundations

Core design tokens and brand assets.

Components

All components in the WFP Design System registry.

Blocks

Prebuilt UI blocks from registry components.

Guidelines

Standards for accessibility, content, and code.

Migration

Migrating from WFP UI-Kit or WFP Bridge?

Designer FAQ

Which system to use and where to find resources.

Contact

Get help from the WFP Design System team.

Looking for Bridge?

WFP Bridge is our previous design system, available at bridge.designsystem.wfp.org. To learn more, see Migration.

Features

Proven primitives

Based on shadcn/ui, built on Radix UI.

Customizable

Full control over styling with Tailwind CSS.

WFP-branded

World Food Programme branding out of the box.

Accessible

WCAG-compliant and keyboard-navigable components.

RTL support

First-class support for right-to-left languages.

Type-safe

Written in TypeScript, for a better developer experience.

Technologies

WFP Design System is built on the following technologies:

React

Version 19+

TypeScript

Version 5+

shadcn/ui

CLI

Radix UI

Component primitives

Tailwind CSS

Styling

Lucide

Icons

Presentation

Intro slides → WFP Design System: Introduction