BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Colour
    • Grids & Layout
    • Spacing
    • Typography
foundations

Foundations

Foundations refer to the fundamental elements that serve as the building blocks for the entire system. These foundational elements provide consistency, structure, and guidelines for the design language used throughout a product or brand.

These foundational elements collectively establish the visual and functional principles that govern the design language of a product or brand, ensuring coherence, efficiency, and scalability in design and development efforts.

  • Typography: Defined typefaces, font sizes, line heights, and styles (such as headings, body text, and captions) that establish the visual hierarchy and readability of text throughout the design.

  • Colour palette: A set of carefully chosen colours, including primary, secondary, accent, and neutral colours, along with guidelines for their usage, combinations, and accessibility standards.

  • Spacing: Consistent guidelines for margins, padding, and spacing between elements to maintain alignment, balance, and visual harmony across different components and layouts.

  • Grid System: A framework for organizing content and aligning elements on a layout grid, providing structure and consistency in positioning elements within the interface.

  • Layout Principles: Guidelines for structuring content and organizing interface elements to facilitate usability, hierarchy, and intuitive navigation across different screen sizes and device types.


Typography
Grids & Layout
Spacing
Colours
Storybook
Figma library
Contact us
2025 © World Food Programme