BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • List
    • Use(Developer)
tokens

Token List

list of the different token levels available in the WFP Design System

📦 Component

Here we are referencing your System Tokens to define the bits and pieces that make up your component, such as a button or an input field.

⚙️ System

These tokens reference the Global Tokens directly to form the visual interpretation of our design system. This set of tokens make opinionated choices around base sizing, typography scales, main border radiuses, status colours, etc.

Brand
Neutral
100
200

DesktopSubtext

S
Regular
M
Regular
Bold

DesktopBody

S
Regular
SemiBold
Bold
M
Regular
SemiBold
Bold
L
Regular
SemiBold
Bold
XL
Regular
SemiBold
Bold

DesktopHeading

XS
Regular
SemiBold
Bold
S
Regular
SemiBold
Bold
M
Regular
SemiBold
Bold
L
Regular
SemiBold
Bold
XL
Bold
SemiBold
Functional
TextInput
Caption

MobileSubtext

S
Regular
M
Regular
Bold

MobileBody

S
Regular
SemiBold
Bold
M
Regular
SemiBold
Bold
L
Regular
Semibold
Bold
XL
Regular
SemiBold
Bold

MobileHeading

XS
Regular
SemiBold
Bold
S
Regular
SemiBold
Bold
M
Regular
SemiBold
Bold
L
Regular
SemiBold
Bold
XL
Semibold
Bold
Private-Styles
Code

ActionDefaultText

Primary
Secondary
Danger
Ghost

ActionDefaultFill

Primary
Secondary
Danger
Ghost
Link

ActionSolidText

Primary
Secondary
Ghost

ActionSolidFill

Primary
Secondary
Ghost
Link
Background
Focus
100
200
Error
100
200
LightShadow
100
200

Text

Body
Inverse
Heading
Field
Fill
Disable
100
200
Default
100
200
Solid
100
200
Field
borderRadius
Border
Layer

Interactive

  • Value#00FFFF
  • CSSinteractive
  • pathtokens/design-tokens.tokens.new.json

Support

error
warning
success
Code

🌎 Global tokens

Global Tokens act as our base layer of property definitions.

Brand

WFP-Blue
Dark-Blue

Semantic

Alert
Error
Success
Neutral
fontFamily
primary
monospace
NotoSans
lineHeight
75
100
125
fontWeight
Regular
Bold
SemiBold

fontSize

Desktop
25
50
75
100
150
200
300
400
500
600
700
Mobile
25
50
75
100
150
200
300
400
500
600
700
letterSpacing
75
100
125
spacing
50
75
100
200
300
400
500
600
700
800
900
1000
borderRadius
100
200
300
borderWidth
100
200
300

Content

Content1-Aquamarine
Content2-Burgundy
Content3-DarkGreen
Content4-EarthyBrown
Content5-Ivory
BoxShadow
100

On this page

  • 📦 Component
  • ⚙️ System
  • 🌎 Global tokens

References

  • Figma
  • npm
Storybook
Figma library
Contact us
2025 © World Food Programme