FAQ

What is Origami – o3?

"o3" refers to our new components, built from the ground up with new design guidelines, aligned designer and engineering tooling, and improved multi-brand support.

What is Origami – o2?

"o2" refers to our legacy components, these are widely used and will be maintained for the foreseeable future as we gradually move to new "o3" components and patterns. "o2" components lack meaningful design guidelines and design tools. We recommend designers use Storybook to explore what components are available and what variants they support.

Can I use o3 guidelines / components / patterns today?

Absolutely! We'd love you to. Teams across the FT Group have begun to use "o3" in production. Please reach out to the Origami team (#origami-support), so we can support you through early adoption as we refine "o3" and improve our documentation.

What is Origami For Everyone?

Origami For Everyone referred to our proposal to reimagine Origami with a renewed focus on design guidelines; aligned designer and engineering tooling; and enhanced multi-brand support. As we begin to realise that vision with "o3" components and patterns, we no longer need to refer to Origami For Everyone.

How is a brand different to a theme/mode/variant?

Brand

A brand applies to an entire product or suite of products. It applies the defining look and feel for the product. E.g "core" (otherwise know as our ft pink brand), "internal" (the ft, but for internal tools and products), the-banker (a specialist title brand).

Sub-Brand

A sub-brand inherits from a brand, but provides a point of differentiation. E.g. "professional" and "ft-live" both belong to the "core" brand, but offer their own distinct look and feel.

Theme

A branded product may make use of multiple themes within a page. E.g. an "inverse" theme may be used to provide emphasis or contrast within a section of a branded product.

Mode

A mode affects the entire product, like looking through a lens, to provide an alternate style for brand and theme. E.g. dark mode, high contrast mode.

Platform

Platform variations are made to keep a product consistent but in-keeping with its delivery mechanism, e.g. web, ios, android.

Variant

This is a generic term to refer to a theme, brand, or other differentiator that makes one instance of a component look different to another instance of the same component. E.g. "mono" and "inverse" themes for a button component are variants of the button, a "big" version of the button is also a variant of the button.