Add a little space

Whitespace is a key ingredient in visual design. It helps group things together when close and separate things when further apart.

As with font-sizes in the Delphinus Design System the distances created by whitespace are not selected at random, but follow a modular scale.

The starting point or base spacing of the modular scale is the height of a h1, i.e. the largest font-size in the system. Spacings can then be either two steps up the modular scale or five steps down. 

The default size is used for page margins and whitespace below a h1.

The larger sizes are used for vertical whitespace between blocks of content and page areas like the main header and footer.

Smaller sizes are used for adding whitespace within an element. E.g. the distance between two p-tags is one step down the scale, making the two paragraphs visually appear as a coherent piece of content in comparison to the page margins. This spacing is also used as the inside padding of the above list of spacings.

Responsive behavior

The base-size and ratio of the modular scale varies across viewport-widths rendering whitespace that suit the screen.