Origami Frontend Components & Services

The Origami Registry is being decommissioned by the end of March 2024 and replaced with Storybook. For more information please read our blog post.

Please share any feedback in our #origami-chat Slack channel.

Demos: o-colors

Contrast ratio checker

Primary Palette

color is a fundamental attribute of the FT visual language. Consistent use of the primary palette across the platform strengthens our brand by evoking familiarity and trust.

Secondary Palette

Secondary colors provide visual hierarchy to differentiate content and are brand identifiers of the FT.

Tertiary Palette

Used sparingly, these colors provide contrast for highlighting and messaging.

B2C Palette

These colors are specifically designed for use in B2C products.

Tints

Dynamic tinting of the primary palette can be used to produce a broad spectrum of lighter and darker variations for creating scale and depth to your designs.

Status
active Origami v1 (Bower)
Switch component view

GitHub: o-colors

Install o-colors

If using the Build Service, add o-colors@^4.7.2 to your link tag.

If using the Bower package manager for a Manual Build, run bower install --save "o-colors@^4.7.2".

Help & Support

o-colors is maintained directly by the Origami team. If you have any questions about o-colors or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com