Creating an effective layout is crucial to every outstanding design. Spatial arrangements, grids, and structures establish guidelines that bring consistency to your designs, limit decision-making, and foster team alignment. These foundational frameworks are essential components of any design system. In this guide, we will explore the fundamentals of defining spatial base units, establishing grid-based rules, and integrating them to achieve modern UI layouts.

What is a spatial system?

Designers make spatial choices daily, from button sizes to the surrounding space of an icon. A spatial system comprises a set of principles that dictate how you measure, size, and space your UI elements. Consistency on a spatial level enables your product to maintain coherence, enhances team communication, and reduces the number of decisions designers have to make. One example of a spatial system is the "8pt grid," although there are various alternatives and configurations to choose from.

For instance, observe how a login form feels when it lacks a recognizable spatial pattern. To users, the design may appear subpar, inconsistent, and untrustworthy. The presence of a predictable rhythm is aesthetically pleasing and something users expect from trusted brands.

Conversely, when the same login form adheres to an 8pt spatial system, the rhythm becomes predictable and visually satisfying. Users experience a polished and predictable interface, which fosters trust and affinity towards the brand.

Regardless of who works on the design, a consistent spatial language is established, resulting in a significant reduction in decision-making. Designers can seamlessly pick up where others left off or work in parallel. Since these decisions are also captured in the codebase, time spent on manual annotations for engineers is minimized.

How do you begin a spatial system?

Defining your base unit is crucial for creating a supported scale of sizes in your spatial system. When looking at different products online, you'll come across various approaches. Some use 4pt, 5pt, 6pt, 8pt, or 10pt increment systems. There's no right or wrong answer here, as long as you understand the implications of each direction.

Personally, I prefer an 8pt linear scale for elements, with a 4pt half step for spacing icons or small text blocks. For typography, I opt for a 4pt baseline grid, ensuring that line-heights of my chosen fonts are always divisible by 4. This system aims to reduce confusion and is easy to implement.

As you explore building your own spatial system, it's important to be practical and consider your specific needs. Here are some things to keep in mind:

Consider your users

When designing your user interface, it's important to consider your users and the brand aesthetic you want to achieve. Think about whether you prefer a spacious UI with large fonts and limited actions, or if you need to cater to technical users with detailed data tables and multiple actions.

Take a moment to review your current designs and create a mood board to gain clarity and alignment for yourself and your team. This process will help ensure that your design choices are well-considered and aligned with your design goals.

Avoid small units

Opting for smaller base units like 4pt, 5pt, or 6pt can introduce too many variables to your system. It becomes increasingly tricky to visually differentiate between a 12pt and 16pt padding difference, making it challenging to maintain consistency within a team. In my experience, using 8pt increments strikes a good balance between visual distinction and managing variables. Moreover, I utilize a half unit of 4pts for spacing icons or making tweaks to small text blocks.

Avoid odd numbers

When incorporating odd numbers, such as a 5pt base, in spatial rules, centering elements without pixel splitting becomes challenging. Consider a 25px height button where text and icons are centered; this may result in blurry split pixels for certain users. Similarly, scaling UIs for various mobile and desktop screens with a 1.5x scale can lead to split pixel blurriness.

How do I apply a spatial system?

To apply the spatial scale to your UI elements, you can make use of padding, margin, height, and width definitions. These properties allow you to control the spacing and size of your elements. However, there might be situations where enforcing certain paddings conflicts with maintaining a strict height definition.

Consider the following example: the line-height of a text is set to 20px, but if you apply an 8px padding on the top and bottom, the button's height will increase to 36px. This raises the question of which measurement should take priority. In such cases, there are two approaches you can take to address this issue.

Strict element sizing

We prioritize sizing solid elements to align with your predetermined spatial system. This ensures consistency and establishes a rhythmic flow in the overall composition. Key elements like buttons and form inputs are given special attention as they often contain predictable content. By focusing on these elements, we create a harmonious design that enhances user experience.

Strict internal padding

Dealing with unpredictable content and prioritizing its display requires applying strict internal padding and allowing element sizes to be determined by their content.

While these element sizes should still adhere to the rules of your spatial system, the spacing around the content takes precedence. This approach proves to be useful for tables with user-generated content of varying lengths.

Border placement inside or outside

When it comes to outlined elements like buttons or cards, there can be some confusion. How should we account for that 2px border? The counting method in code might differ from what we see in Figma. So, which one should we consider as the source of truth?

In Figma, the measurement is based on the element itself, excluding its border. However, on the web, this is handled differently. The "box-sizing" property can be set to "border-box" or "content-box". If you want to see it in action, check out this [codepen]() and read [this article]() to learn more. In short, most of the modern web relies on the "border-box" approach.

While it's possible to make the code pixel perfect, it might come at the expense of simplicity and extensibility if your team is not aligned on the implementation. It's crucial to have these conversations with your team to define your own position and ensure everyone is on the same page.