Colors

Main colors

The main color of the FAO Design System is a vibrant blue (#116AAB). This color represents the organization's identity and is used prominently throughout the design system.

The main color of the FAO Design System is a vibrant blue (#116AAB). This color represents the organization's identity and is used prominently throughout the design system.

It's applied to primary elements such as buttons, links, and other interactive components to create a cohesive and recognizable visual language.

This color represents the organization's identity and is used prominently throughout the design system.

Neutral Colors

Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.

Other colors

Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation).

Background utilities

Background color utility classes provide an easy way to apply predefined background colors to elements. These classes follow a consistent naming convention, such as .bg-primary, .bg-gray-light, or .bg-white-fao. By using these utility classes, you can quickly style elements with the appropriate background colors that match your design system, ensuring consistency across your project.

Text utilities

Colorize text with color utilities. You can easily apply predefined color styles using CSS classes such as .text-color-primary, .text-color-gray-dark, or .text-color-default. These utility classes provide a quick and consistent way to colorize text across your project.