Package List (o2)

Origami “o2” packages include foundational styles, components, and patterns. Today they are widely used across the FT and will be supported until at least Q1 2025. However we encourage teams to use our latest “o3” components and patterns for new projects and features where possible.

o-colors

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

• Status: Deprecated
• Replacement: o3-foundation
• Storybook: o-colors
• Figma: Ft.com-Foundations / Colors (incomplete)

o-fonts

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

• Status: Deprecated
• Replacement: o3-foundation
• Storybook: o-fonts
• Figma: n/a

o-spacing

• Status: Deprecated
• Replacement: currently unavaliable
• Storybook: o-spacing
• Figma: FT-UI-Library / Spacing (incomplete)

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.

• Status: Deprecated
• Replacement: o3-button
• Storybook: o-buttons
• Figma: FT-UI-Library / Buttons (incomplete)

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.

• Status: Maintained
• Storybook: o-typography
• Figma: FT-UI-Library / Typography (incomplete)

o-icons

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

• Status: Maintained
• Storybook: o-icons
• Figma: FT-UI-Library / Iconography

o-normalise

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

• Status: Deprecated
• Replacement: o3-foundation (migration guide pending, contact the Origami team for support)
• Storybook: o-normalise
• Figma: n/a

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.

• Status: Maintained
• Replacement: o3-tooltip (migration guide pending, contact the Origami team for support)
• Storybook: o-tooltip
• Figma: FT-UI-Library / Tooltip (incomplete)

o-grid

• Status: Maintained
• Replacement: currently unavailable
• Storybook: o-grid
• Figma: FT.com Grid

o-loading

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-loading
• Figma: -

o-overlay

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-overlay
• Figma: -

o-forms

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-forms
• Figma: -

o-labels

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-labels
• Figma: -

o-message

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-message
• Figma: -

o-editorial-typography

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-editorial-typography
• Figma: -

ft-concept-button

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: ft-concept-button
• Figma: -

o-share

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-share
• Figma: -

o-teaser

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-teaser
• Figma: -

o-footer

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-footer
• Figma: -

o-topper

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-topper
• Figma: -

o-header

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-header
• Figma: -

o-tabs

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-tabs
• Figma: -

g-audio

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: g-audio
• Figma: -

n-notification

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: n-notification
• Figma: -

o-meter

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-meter
• Figma: -

o-audio

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-audio
• Figma: -

o-multi-select

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-multi-select
• Figma: -

o-autocomplete

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-autocomplete
• Figma: -

o-banner

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-banner
• Figma: -

o-big-number

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-big-number
• Figma: -

o-quote

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-quote
• Figma: -

o-social-follow

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-social-follow
• Figma: -

o-comments

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-comments
• Figma: -

o-cookie-message

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-cookie-message
• Figma: -

o-stepped-progress

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-stepped-progress
• Figma: -

o-date

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-date
• Figma: -

o-subs-card

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-subs-card
• Figma: -

o-editorial-layout

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-editorial-layout
• Figma: -

o-syntax-highlight

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-syntax-highlight
• Figma: -

o-table

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-table
• Figma: -

o-expander

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-expander
• Figma: -

o-teaser-collection

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-teaser-collection
• Figma: -

o-footer-services

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-footer-services
• Figma: -

o-toggle

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-toggle
• Figma: -

o-ft-affiliate-ribbon

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-ft-affiliate-ribbon
• Figma: -

o-top-banner

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-top-banner
• Figma: -

o-header-services

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-header-services
• Figma: -

o-video

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-video
• Figma: -

o-viewport

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-viewport
• Figma: -

o-visual-effects

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-visual-effects
• Figma: -

o-layout

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-layout
• Figma: -

o-lazy-load

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-lazy-load
• Figma: n/a

o-tracking

• Status: Maintained
• Replacement: currently unavaliable
• Storybook: o-tracking
• Figma: n/a