This entry in my series on developing the Brettro Design System focuses on spacing and grids. Determining the spacing system creates the foundation for almost every element of the system as, according to Expressive Design Systems, it defines the space within and around your components and gives the elements within it a consistent rhythm and visual balance.

Of the four books I have been using to learn about design systems, Expressive Design Systems and Building Design Systems were the most informative on grids and spacing.

Spacing System

To establish a spacing system, the following decisions need to be made:

• Set a base number: this number is the primary multiple for the spacing system. Expressive Design Systems offered that many teams choose 4 because it is easily divisible. Building Design Systems suggested using 8 because it is easily scaled to different resolutions.
• Set the scale: this decision determines how the spacing system will scale from the base number, either linear or non-linear. For linear, the scale will increment by the base number, for example with base number of 4 the scale would be 4, 8, 12, 16, etc. For non-linear, the scale will increase based on a unit of the base number, for example, with a base number of 4 the scale would be 4, 8, 16, 32, etc.
• Name your space intervals: this is the naming convention you will use across the system as it relates to spacing. Many design systems use t-shirt sizing (s, m, l, xl, etc.) and other use digits (1, 2, 3, etc.). Using digits make it easier to expand the system in the future.

These are the decisions I made for the Brettro Design System:

• Base number: 8
• Scale: linear
• Naming: digits

Initially I tried a base number of 4 with a linear scale and it was too unwieldy. There were too many sizes and the size differences were imperceptible, so I decided on 8. And for naming I decided on digits.

Grid System

To establish a grid system, the following decisions need to be made:

• Column grid: this is a vertical grid used primarily in web development (and print work) to provide equal spacing between columns. This brings flexibility to design while also providing consistent visual structure to a page.
• Baseline grid: this is a horizontal grid that also brings flexibility and structure, but is primarily tied to the text on the screen. The x-height of each letter on a page’s content is anchored to this grid.

Brettro Design System decisions:

• Column grid: 16; I have used a 16 column grid consistently for years and it was worked well for me. It is also a linear increment of my base spacing system number.
• Baseline grid: I have not made a decision yet as I am still working on the typographic system. My hope is to align it with my spacing system base number.

Where to From Here?

Making these decisions really energized me to continue on this journey. These foundational choices set me up to complete my typographic system and to start thinking about the design system components.