Newskit Logo
About

Foundations

Spacing

Space helps to guide the user and provide a pleasant and consistent experience when using a product.

Principles

Relational

Use spacing to visually communicate elements that are connected

Guided

Use appropriate hierarchy to lead the user to the most important information

Balanced

Arrange elements and white space so that no part of the design overpowers the others

Overview

Space is distance between elements on a screen often refered to as the whitespace. Good use of whitespace helps to de-clutter and group content to provide a visual hierarchy so that users can focus on the important elements and digest content with reduced cognitive load.

Space tokens define the space throughout the system, such as the distance between an icon and the label in a button. The space tokens define three categories to control margin and padding for specific use cases, these are: spaceInset, spaceInline, and spaceStack.

Available space design tokens are outlined below:

TokenValueDescription

Avoid using generic spacing tokens directly, in favor use the more specific options such as: spaceInset, spaceInline, and spaceStack as described in the following sections. When these don't meet your needs, you can use the generic variables to keep spatial concepts consistent.

Code usage

The Component Defaults page details the different ways in which you can override and apply space inset to NewsKit components. For more advanced use cases, these values can be accessed from the theme by calling either:getResponsiveSpacing, emotion's useTheme hook, or getSpacingCssFromTheme.

Space Inset

Space Inset is the space within a component (padding). By default, a component's inset should be equal on all four sides.
Squish Inset reduces top and bottom padding relative to the default inset space.
Stretch Inset increases top and bottom padding relative to the default inset space.

ExampleTokenValueDescription

Code usage

The Component Defaults page details the different ways in which you can override and apply space inset to NewsKit components. For more advanced use cases, these values can be accessed from the theme by calling either:getResponsiveSpacing, emotion's useTheme hook, or getSpacingCssFromTheme.

Space Inline

Space Inline is most often the space to the right of elements (margin-right), however, if a component changes orientation, then the flow changes the position of the margin.
If the flow is row or horizontal this will be applied as margin-right.
If the flow is column or vertical this will be applied as margin-bottom.

Code usage

The Component Defaults page details the different ways in which you can override and apply space inline to NewsKit components. For more advanced use cases, these values can be accessed from the theme by calling either:getResponsiveSpacing, emotion's useTheme hook, or getSpacingCssFromTheme. Space inline should generally only be applied to margin-right and margin-bottom.

Space Stack

Space Stack is most often the space to the bottom of elements (margin-bottom, however, if a component changes orientation, then the flow changes the position of the margin.
If the flow is row or horizontal this should be applied as margin-bottom.
If the flow is column or vertical this should be applied as margin-right.

Code usage

The Component Defaults page details the different ways in which you can override and apply space stack to NewsKit components. For more advanced use cases, these values can be accessed from the theme by calling either:getResponsiveSpacing, emotion's useTheme hook, or getSpacingCssFromTheme. Space stack should generally only be applied to margin-right and margin-bottom.

Text Crop

To keep consistent and predictable spacing from design to code, we use a text-crop utility that removes additional space (leading) around a text block. This allows us to maintain our 4px baseline and keep designs pixel-perfect. Read more about text crop here.

Common components that utilise space

The following two components are the most common components that utilise space throughout the system:

Stack component

The Stack component enables items to be distributed evenly in vertical or horizontal 'stacks' (similar to FlexBox). spaceStack and spaceInline can be applied to elements in the Stack component. Learn more about the Stack component.

Block component

The Block component is a simple container component, spaceStack, spaceInline, and spaceInset can be applied to this component. Learn more about the Block component.

Style Presets

A collection of foundational design tokens combined into a preset to define reusable styles for specific interface elements and their interactive states.

Style Presets

A collection of foundational design tokens combined into a preset to define reusable styles for specific interface elements and their interactive states.