Spatial System

This platform relies on an 4pt linear scale spatial system. This means every measurement in and around elements of the UI is rendered as a dividend of 4 and scaled according to the needs and functions of its specific layout or screen.

Odd Numbers

As a general rule: avoid odd numbers. Working with odd numbers can lead to issues  with centering elements and pixels. Creating a button with a height of 27 pixels, for example, can create uneven splits in certain browsers or devices. This is especially true when jumping UIs from mobile to desktop screens where its native browser will automatically render scaling properties of 1.5x or other odd multipliers.

Working with a 4 pt scale

There's four attributes where the spatial system comes into play: padding, margin, height and width. Of note here is that sometimes margins and paddings cannot be enforced with a strict height definition. This is especially true with buttons that contain icons of varying sizes or a set font size.

Take a look at the following example...

Consider the set height of this button element is 40px and the line-height of its caption text is 20px. However if we were to respect the spatial system and use an 8px padding on the top and bottom, the button will have a height of 36px, not 40px... which brings up the question, which of the two should you prioritize? Internal padding or element size? This depends entirely on what the element and its purpose.

Element first (strict element sizing)

When the content is less predictable in scale and its wrapper needs to occupy the same amount of space on the screen (such as buttons or tabs), then the element's size needs to remain consistent.

Take a look at the following example. Here we have a desktop screen preview of a notarized document. The actions the user can take are aligned alongside the button of the page as a series of four clickable buttons. By taking the element first approach, you can see the layout is balanced with equally sized buttons that are 60 pixels tall and 200 pixels wide.

Notice how there are inconsistencies when it comes to padding, marked in red. These cannot be the same because the icons themselves have different dimensions and the words they accompany also have varying lengths.

Content first (strict internal padding)

If the element itself is of a repetitive nature or format (such as forms or lists), then it has an inherent quality of predictability. Visual balance can rely on that predictability by maintaining the elements' padding and margin size consistent.

If we were to take the example above and take a content first approach, you can see how these same buttons (while they retain consistent padding) now suffer from huge differences in overall size. This throws a wrench in the overall composition, and impairs the user's experience as they now have to click buttons of different sizes that are spread unevenly on the page.

Instead, this approach is much more appropriate when creating tables of user generated content.

Here you can see how the title "Social Security Card (Notarized)" is long enough to wrap to a second line below. Despite this, the composition remains balanced because the paddings and margins here are prioritized and respected.

Matrix Grid

Grids help structure your content and define the position of every element enclosed within. Here, we rely on a modular grid: a series of columns and rows that organizes content into a matrix structure. Keep in mind this doesn’t have to encompass the entire page layout. Modular grids are an organizational tool and often come with exceptions, especially when it comes to incorporating different font sizes and icons.

Here is an example of a screen layout designed using this matrix grid. Elements are aligned and spread out between the gutters and squares and distributed in an orderly fashion. Not all elements fit within, and text often overflows, but the most elements align to achieve visual harmony.