Design Guide (o2)

Origami (o2) includes limited Figma libraries. Unlike our latest Figma libraries these support the “core” brand only; are incomplete; and sometimes misleading. Please use with caution and validate against o2 Storybook demos and existing live examples.

• Figma: Ft.com Foundations: Includes colour palettes and basic typographic styles. This does not include other foundations such as icons and grids.
• Figma: FT UI Library: The main “o2” Figma library. It includes a number of further foundations, components, and patterns.
• Figma: FT.com Grid: Includes a grid and breakpoints which aligns with the o-grid component. This grid system is used inconsistently and is not adhered to by key pages such as the ft.com homepage or article page. We have a long term plan to align on a new “o3” grid. In the meantime, use Origami’s grid guidelines for new projects and speak to your team regarding any custom grid systems still in use.

Due to the limitations outlined above, we recommend upgrading to “o3” Origami where audited components and patterns exist to meet your product needs.