Skip to content
Origami Design System

Package List (o2)

Origami 2 “o2” packages include foundational styles, components, and patterns. These will be gradually deprecated over time, as we conduct design audits and build Origami 3 “o3” alternatives. Where components are deprecated, begin to use the o3 alternative.

Maintained

These o2 packages do not have an o3 alternative yet, and may be used alongside o3:

o-grid

o-tooltip

o-tooltip is a component usually used for annotating or highlighting areas of user interface. It’s a flexible component which leaves open many design decisions. This is often misused to create inconsistent and inaccessible experiences. We recommend using our new “o3” tooltip components where possible, which are designed with specific usecases in mind.

o-loading

o-overlay

o-forms

o-labels

o-message

ft-concept-button

o-share

o-teaser

o-topper

o-header

o-tabs

g-audio

n-notification

o-meter

o-audio

o-multi-select

o-autocomplete

o-banner

o-social-follow

o-comments

o-stepped-progress

o-date

o-subs-card

o-editorial-layout

o-syntax-highlight

o-table

o-expander

o-teaser-collection

o-toggle

o-ft-affiliate-ribbon

o-top-banner

o-header-services

o-video

o-viewport

o-visual-effects

o-layout

o-lazy-load

o-tracking

Deprecated

These o2 packages must not be used in new projects. They continue to work but will receive no more updates. Migrate to their o3 equivalent as listed below:

o-colors

o-colors provides tools to work with colours, including definitions for the FT’s colour palette.

o-fonts

o-fonts includes font faces to include FT’s custom fonts, Metric, FinancierDisplay, and FinancierText.

o-spacing

o-buttons

o-buttons includes styles for primary, secondary, and ghost buttons with theme support. It also includes patterns such as grouped buttons and pagination.

o-icons

o-icons provides an FT icon set and tools to apply them to digital products.

o-normalise

Foundation styles and basic utility CSS, e.g. for cross browser consistency; to visually hide content.

o-typography

o-typography provides typographical fundamentals such as font scales, vertical rhythm, and font fallbacks. Plus typography styles for UI such as: links, headings, body copy, captions, footers, and lists.

o-editorial-typography

o-quote

o-big-number