Origami Frontend Components & Services

Origami Components

An Origami component is a collection of styles and functionality. It provides reusable HTML, SCSS and JavaScript for a multitude of different products under the FT umbrella.

Including Origami components in your project

How you choose to include Origami components in your project will depend on your projects’ requirements:

Initialising a component

Documentation on how to initialise Origami components when you're using a manual build process. Learn how to initialise a component

Component versioning

An explanation of how Origami components are versioned, how to request different versions and resolve conflicts. Read more about component versioning


Documentation about how Origami ensures compatibility across different browsers and devices, and how you can write code in a way that supports this. Read more about Origami's compatibility


Guidelines on how Origami users can help us improve our components and services. Learn how you can help

Silent mode

Documentation on how to use Origami's 'silent mode', which allows you to control the output size of a component's CSS. Learn about silent mode


Documentation on using branded Origami components, which provide a distinct appearance for different areas of the FT. Read more about how to use branding

Major Cascade

When releasing major versions of low level components such as o-typography, o-colors, or o-buttons many projects and teams across different Financial Times groups are affected. This we call a Major Cascade. This page explores what we mean by a Major Cascade in more detail and notes areas to consider when releasing major versions of low level components. Read more about Major Cascades