Our baseline grid is 4px. Any multiple of 4px may be applied to a project to space elements. But we recommend using a named space for consistency.

Named Spaces

Named spaces are grouped by small (s), medium (m), and large (l) spaces. A named space also includes a number in its name which is the multiple of the 4px baseline grid. For example:

• "s1" is a small 4px space (4px * 1)
• "s2" is a small 8px space (4px * 2)
• "m12" is a medium 48px space (4px * 12).
• "l18" is a large 72px space (4px * 18)

This naming convention allows us to add new named spaces in the future and gives both an indication to the px value of the space and the context we recommend it is used: small sizes such as "s1 or "s2" for spaces within a component; medium sizes "m12" and "m16" for related content on a page; and large sizes "l18", "l24" for separating distinct areas within a project.

Scale

For web or web-based app projects we recommend speccing work using named spaces over pixel values. Engineers may use the o-spacing Origami component to output the value for a given named space. They may use a named space to output pixel values, or choose to output relative rem values, which maintain their proportion with the font size selected by the user in their operating system or browser.