The World Food Programme’s (WFP) Branding Guidance (http://www.wfp.org/Branding) was published in 2009 and has now been effectively implemented across our organization, strengthening our brand image through consistent representation.

Building on this initiative, the World Food Programme’s User Interface Style Guide emphasizes WFP’s commitment to establish and build our brand.

The purpose of this project is to create a unified toolkit that is used by designers and developers alike on their projects to ensure all WFP-branded projects are accessible, beautiful, and have a consistent look and feel across the board by following WFP's design and implementation guidelines.

The guidelines contained in this guide are to be applied to all WFP digital products (such as: websites, web applications, internal systems and other).

The Guide is a living document created to meet the needs of WFP’s front-end developers and designers. If there is a Component or Pattern that you need, or you have any other feedback, question or comment please contact us via wfp.publications@wfp.org.

Project Versioning

WFP UI uses Semantic Versioning (SemVer) philosophy, but adjusted for this project specifically. The following rules take precedence over SemVer:

Major update

The look & feel of any part of WFP UI changes significantly, affecting the overall user experience, along with the markup and/or CSS classes, i.e.: a bunch of new components are added, or modified in a backward-incompatible way.

Minor update

The look & feel significantly changes, not affecting the way corresponding markup and/or classes are structured and applied, i.e.: when we change the way a component looks like, without changing its structure/classes.

Patch update

The look & feel changes are insignificant, or only fix a specific problem with the WFP UI, i.e.: adding a missing icon, correcting a spelling mistake, or enhancing a buttons with drop-shadows.