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:
| Token | Value | Description |
|---|
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.
| Example | Token | Value | Description |
|---|
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.