Introduction
Use FAO design language to create simple, intuitive and beautiful experiences.
What is the FAO Design System?
The FAO web Design System is an essential resource for all Content Owners seeking to create world-class online experiences.
This system provides a robust framework that enables users to develop simple, intuitive, elegant, aesthetically pleasing and user-friendly digital interfaces.
The system's components have undergone rigorous testing, ensuring their compatibility with over 30 screen sizes, orientations, and language combinations. As a result, users can expect a fully adaptive digital experience that delivers a harmonized User eXperience (UX) across FAO.org.
In addition, the system's components are designed to work seamlessly with one another, allowing users to build a cohesive online presence that is consistent with the FAO brand.
Advantages
The FAO Design System is built on top of Bootstrap, leveraging its powerful framework while extending and customizing it to meet FAO's specific needs. Here's how it works:
- Bootstrap Foundation: At its core, the FAO Design System uses Bootstrap as its base. This means you get all the benefits of Bootstrap's responsive grid system, components, and utilities.
- Theming: We've created a custom theme that applies FAO's brand colors, typography, and design principles to Bootstrap's components. This ensures a consistent look and feel across all FAO digital products.
- Extended Components: In addition to styled Bootstrap components, we've developed custom components specific to FAO's needs. These are designed to work seamlessly with Bootstrap and follow the same usage patterns.
- Simplified Implementation: By using the FAO Design System, you don't need to worry about configuring Bootstrap or creating custom styles from scratch. Our package includes pre-configured CSS files that you can easily include in your project.
- Responsive Design: Like Bootstrap, the FAO Design System is mobile-first and fully responsive, ensuring your applications look great on devices of all sizes.
- Accessibility: We've built upon Bootstrap's accessibility features, ensuring that FAO's digital products are usable by as many people as possible.
- Documentation: This documentation provides guidelines, examples, and code snippets for using the FAO Design System effectively in your projects.
To get started, you'll need to install both Bootstrap and the FAO Design System in your project. Once installed, you can begin using the components and utilities as described in this documentation.
The system is designed to be intuitive for those familiar with Bootstrap, while providing the specific styles and components needed for FAO projects.
Start now
Get started with FAO Design System today through some of these useful resources: