System ColorDesigner InfoEngineer Info

Taste of space

The method in which elements, text, and other assets are arranged on the page plays a pivotal role in the presentation of an experience. This includes the space between these components, as the density of information can affect user comprehension.

This page aims to outline what layout styles were chosen, how they were chosen, and why they were chosen.

Design Tokens

The layout design tokens come in a single group (genitive, relating to each other) which can be applied in the page or within components.

Unlike color and typography, spacing has been curated without a separate layer of component (locative, determined by placement) token values. This is because the spacing values will not only affect the components but also how the components are arranged on the page. There is no conceivable method to generally name and define where these spacing values would be applied outside of the component library. Additionally, if design tokens outside of this system followed these patterns, they should also include namespacing (a prefix) to differentiate from other variables that may appear in the application.

Genitive Layout Tokens

These tokens describe the general family that possess all the layout values as human-readable names. They can be applied anywhere spacing or elevation needs to be defined.

Spacing tokens

These are applied by multiplying the token within a calc() function by 1rem as the value of the property.

TokenDescriptionValue
--density--xsExtra-small spacing factor..25
--density--smSmall spacing factor..5
--density--mdMedium spacing factor.1
--density--lgLarge spacing factor.2
--density--xlExtra-large spacing factor.4

Elevation tokens

While this is technically a locative color token, it has a direct relationship with the perception of elevation. It is also the only translucent color token.

TokenDescriptionValue
--boxElevated--shadowColorDescribes the shadow color for elevated containers. This includes some translucent alpha channel.

Curation

Spacing

The overall method for managing spacing started by following a common paradigm in many design systems; an 8 px/pt grid. However, instead of the default spacing being the 8px value, the system starts at 16px which relates to the root font-size (1rem). Each token in the spacing system increments exponentially. The values are then calculated by multiplying the token by 1rem. You may sample an adjustment of the scaling factor with the slider below:

Designer Info

One of the first popular customizations of space was done within the Gmail application, where values of "comfortable", "cozy", and "compact" help provide a more personalize experience with little effort. Google Design has since taken this concept to Material Design.

Columnless

Unlike many other systems, there is no concept of columns. Content dictates the size of a component and if reusable spacing tokens are used throughout the page and components, they will align properly. This site only has one breakpoint which was determined when the content breaks the layout. At this point, the page shifts to a mobile-friendly layout.

Think dynamically, how are these relationships working? Miriam Suzanne, Don’t Use My Grid System

Engineer Info

Components are engineered using the Fab Four technique where appropriate. This eliminates the need for a page-level media query to manage component-level layout changes.

Elevation

The design system has simplified the concept of elevation is a very selective manner. Dropdown components do not flyout from the layout and therefore do not present themselves as elevated. The system has no modals; all content is inline with the current focus for the user. This also has an added benefit of not needing to juggle focus between elevated parts of the interface. For this site in particular, elevation only occurs in mobile, to display the list of navigational menu items over the content when the user opens the menu.

Usability

Interactive elements are given at least 1rem (16px) of surrounding padding to provide a large target area. This includes page links, which are provided a negative margin to offset the larger size within bodies of text.

Without enough space between interactive elements, it will make it more difficult for users to accurately press the intended targets. The average adult finger pad size is about .5in / 10mm wide, so the provided default spacing between and around elements accounts for this.

Designer Info

Similar accessibility guidelines are provided by Apple and Google.