o-colors

CSS

o-colors are a fundamental attribute of the FT visual language and provide brand consistency across all products.

The color palette is optimised to comply with WCAG 2.0 level AA with a minimum contrast ratio of 4.5:1.

View on GitHub

Quick start

Using the build service

Add the following token to your link tag (how do I do that?):

o-colors@^4.1.5

For more information see the Origami build service.

Using a manual build process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-colors"@"^4.1.5"

For more information see the Origami build process.

palette

tints

Component information

Latest stable version:
4.1.5 (12 days, 18 hours old)
Status (Learn more):
Active (as of 4.1.5)
Bundle sizes:
668b JavaScript 6.90KB CSS
This version
4.1.5 (12 days, 18 hours old)
Support status (Learn more):
Active (as of 4.1.5)
Last indexed
28 Nov 2017 14:14:42 (Build now)
Installable?
OK
Dependencies
None
Dependents
alphaville-headeralphaville-marketslive-session-notificationalphaville-most-recent-postalphaville-uifthelp-wp-templatekmt-headern-barriersn-desktop-app-bannern-invite-colleaguesn-messagesn-sliding-popupn-storylinesn-uin-ui-foundationso-adso-aside-panelo-author-alertso-bannero-big-numbero-business-cardo-buttonso-cardo-comment-uio-commentso-cookie-messageo-crosswordo-email-only-signupo-expandero-footero-formso-ft-affiliate-ribbono-ft-buttonso-ft-footero-ft-formso-ft-iconso-ft-typographyo-galleryo-headero-header-serviceso-hierarchical-navo-iconso-labelso-link-listo-loadingo-overlayo-promoboxo-quoteo-section-heado-shareo-subs-cardo-tableo-tabso-teasero-teaser-collectiono-techdocso-tweeto-typographyo-videoo-visual-effectsorigami-react

Contact

To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue

Origami