Origami Frontend Components & Services

Origami Newsletter, May 2019

Posted on by Lee Moody.
Tagged with Newsletter.

TL;DR: This issue features a new and improved version of o-forms, a new component o-spacing, and fancy new features to our colour contrast checker.

Top three things

These are some of the bigger things we’ve worked on or released over the last month.


This month we released a new version of o-forms@^7.0.0 with some major improvements:

You can find o-forms demos and the migration guide in the registry.


We’ve been working with the uxd team to bring new spacing guidelines to Origami, to help us achieve a more consistent layout across our sites and pages.

Currently o-typography provides developers with Sass tools to output spaces (for margins, paddings, etc.) according to our 4px baseline grid. But it’s not obvious spacing tools are there in o-typography, and the flexibility of any multiple of 4px has lead to some inconsistent layouts.

So we’ve created o-spacing 🎉. It’s still possible to output any size from our 4px baseline (like oTypographySpacingSize), but there are now a more limited set of named spaces which align with our uxd toolkit. We’ve also included new CSS Custom Properties (CSS Variables) and class helpers to help build service users lay out a page.

Please see the readme for details including an overview, diagrams, and technical documentation.

o-colors picker

The o-colors contrast checker was also updated this month with some shiny new features. It’s now possible to test two colours for contrast based on our colour palettes, their tints, and mixes of the palette.

You can find the contrast checker on the o-colors demo page of the registry.

Special thanks

Special thanks this time goes to Origami member Gabrielle von Koss (Gabi), who sadly left the FT this month. Gabi joined us from Makers in 2016 and worked on Ads, Rich Journalism, ScoutAsia CMS, and Lighthouse before settling in Origami. A big thanks for her contributions, not least the new major of o-forms, a new major of o-syntax-highlight, and the o-colors contrast checker improvements in this issue! 💪

Broader update

A digest list of other things that have happened over the last month.