Spacings

VUD spacing system is based on a non-linear progression, using 8pt grid system. It allows us to measure the size of the elements and components, and define the space between them and within layouts.

Spacing system

VUD uses stacks, inline paddings, inner paddings, and margins to define spacing for layout grids and overall white space, categorising the spacings into three groups:

Layout spacings

Component spacings

Typography spacings

Layout spacings 32, 48, 56, 96, 128 are macro spaces between block areas like cards or modules.
Component spacings 8, 16, 24 are micro spaces between components.
Typography spacings 8, 12, 16, 24, 40 are micro spaces between paragraphs.

Table of spacing tokens

Spacing for layout

Spacing for portrait

Spacing for landscape

Component

Spacing for components

Typography

Spacing for typography

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.