Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Spacing

TDS spacing scale includes both small increments needed for more detailed spacing of elements within components as well as larger increments used to control the density of a design. Each level of the spacing scale has its own token. Spacing tokens can be used inside of components for building and between components for layout spacing.

Always use the spacing tokens provided by TDS. Avoid using arbitrary and/or hard coded values.

Values for spacing tokens are defined in rems, pixel values here are for reference only.

Utility Classes​

We provide utility classes for consistent spacing around elements. These classes apply margin and padding to all sides of an element. You can also apply margin and padding individually to the top, bottom, left, or right.

For Individual Sides:

  • Top margin: tds-mt-2x
  • Bottom margin: tds-mb-6x
  • Left margin: tds-ml-4x
  • Rigt margin: tds-mr-3x
  • Top padding: tds-pt-2x
  • Bottom padding: tds-pb-6x
  • Left padding: tds-pl-3x
  • Right padding: tds-pr-4x

Principles​

Elements in a design that are near each other are seen as being meaningfully related. As more space is added between elements, their perceived relationship weakens.

Patterns created through spacing can also create relationships. Elements arranged in the same spacing pattern are seen as related pieces that have equal weight.

Elements that have more spacing around them tend to be perceived as higher in importance than elements that have less space around them.

Elements that are set close to each other can be easily overlooked. Users may see the grouping but not process each individual item. Therefore, if you have an element or content of high importance on the page, consider giving it extra surrounding space to help it attract focus.

Empty space — also known as white space — is important in design. It can be used to break up sections on a page or to help create focus on certain element(s). White space helps with information processing; too much dense information can be disorienting or overwhelming for a user. Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should be white space to let the user’s eye rest.