Layout and spacing

It’s fundamental to everything we design. The grid is the geometric foundation of all the visual elements, from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making. Use this set of standard breakpoints to maintain layout integrity across screen sizes.

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs. This scale is applied and used within all our components. You can create extra space by combining two spacers together (e.g. XXLarge + XLarge = 144px)