Spacing styles are the spacing values, in points, used for the paddings, margins, and gaps in your project. Spacing styles are specific to each project. Play provides you with Spacing styles to use, but you can add your own and/or remove the default styles.

Because Play includes spacing as a style, you can easily see how your designs would look with a different spacing scale, without having to adjust every component and page individually.

You can use spacing values that are not part of your Spacing styles, but we recommend using Spacing styles to keep your project’s spacing consistent. It’s also important to have a spacing system that can provide flexible yet consistent steps when multiplied. For example, an 8pt scale—8, 16, 32, 48, 56, 64—gives you a large variety of equally spaced options.

To create a Spacing style in macOS, click the plus icon in the Styles Panel. A new Spacing style will appear in the styles list, placed according to its value. To choose the point value, click the edit icon on the row and, in the pop-up, use the slider or text field to enter an integer. Closing the pop-up will automatically save your selected Spacing style.

By default, your Spacing styles are titled using their value, but if you want to edit the name, right click on it and select “Rename.” This is the same way you would duplicate or delete your style.

To create a Spacing style on iOS, tap the four circle icon, and select "Spacing" from the menu that appears. Tap New Spacing, and a modal will appear where you can set your spacing value, in points. Closing the modal will automatically save your Spacing style.

Edit your Spacing style by tapping on the spacing you'd like to edit, and adjusting the value the same way you created the initial color value.

To duplicate, delete, or rename your Spacing style, tap on the spacing name while in the color editor.