Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Foundations

Spacing

Space helps to guide the user and provide a pleasant and consistent experience within products.

Overview

Space is the distance between elements on a screen. It’s often referred to as whitespace.

Good use of whitespace can de-clutter and group content to provide a visual hierarchy. This helps users focus on what matters and reduces cognitive load.

Space tokens

Space tokens define spacing throughout NewsKit, 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: spaceInset, spaceInline and spaceStack.

Here are the available space tokens:

TokenValueDescription

Be specific

Avoid using generic spacing tokens whenever possible in favour of more specific options such as space inset, space inline and space stack. Only use the generic variables when these don’t meet your needs.

Code usage

You can override and apply space inset to components using component defaults.

For more advanced use cases, you can access these values from the theme by calling getResponsiveSpacing, emotion's useTheme hook, or getSpacingCssFromTheme.

Logical props

We have added the following properties to our components to make it easier for users to set the spacing they desire.

You can use space tokens with 12 different CSS propertiesto logically apply space to a side, or combination of sides.

Logical props can define either padding or margins, depending on the element's writing mode, directionality, or text orientation. orientation. For example, if the reading direction is right to left (instead of left to right) thepaddingInlineStart would be on the right instead of the left.

paddingInlineStart

Applies space to the start position (left) of an element.

paddingInlineEnd

Applies space to the end (right) position of an element.

paddingInline

Applies space to both the start (left) and end (right) positions of an element.

paddingBlockStart

Applies space to the start position (top) of an element.

paddingBlockEnd

Applies space to the end position (bottom) of an element.

paddingBlock

Applies space to both the start (top) and end (bottom) positions of an element.

marginInlineStart

Applies space to the start position (left) of an element.

marginInlineEnd

Applies space to the end (right) position of an element.

marginInline

Applies space to both the start (left) and end (right) positions of an element.

marginBlockStart

Applies space to the start position (top) of an element.

marginBlockEnd

Applies space to the end position (bottom) of an element.

marginBlock

Applies space to both the start (top) and end (bottom) positions of an element.

paddingInlineStart

Applies space to the start position (left) of an element.

paddingInlineEnd

Applies space to the end (right) position of an element.

paddingInline

Applies space to both the start (left) and end (right) positions of an element.

paddingBlockStart

Applies space to the start position (top) of an element.

paddingBlockEnd

Applies space to the end position (bottom) of an element.

paddingBlock

Applies space to both the start (top) and end (bottom) positions of an element.

marginInlineStart

Applies space to the start position (left) of an element.

marginInlineEnd

Applies space to the end (right) position of an element.

marginInline

Applies space to both the start (left) and end (right) positions of an element.

marginBlockStart

Applies space to the start position (top) of an element.

marginBlockEnd

Applies space to the end position (bottom) of an element.

marginBlock

Applies space to both the start (top) and end (bottom) positions of an element.

Text crop

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

Style Presets

A collection of foundational design tokens combined into a preset.

Learn more about style presets

Style Presets

A collection of foundational design tokens combined into a preset.