NewsKit Mobile Logo

Spacing

Whitespace is the space between UI elements on a screen. Good use of whitespace helps to de-clutter content so that users can focus on the important elements and read content more easily. Our system is built on a 4px baseline grid and we have spacing tokens available to ensure consistency of UI elements.

Generic Sizing Tokens

Sizing tokens are used to build spacing presets. Avoid using generic sizing tokens directly, in favour of more specific options such as inset, squish, stretch, and space options described below. However, when established concepts don’t meet your needs – or you are overriding or extending a concept for a special case – use these recognisable, generic variables to persist spatial concepts and maintenance in code.

Generic Spacing

Values

TokenPx ValueRem Value
sizing0000px0
sizing0104px0.25
sizing0208px0.5
sizing03012px0.75
sizing04016px1
sizing04520px1.25
sizing05024px1.5
sizing06032px2
sizing07040px2.5
sizing08048px3
sizing09064px4
sizing10080px5
sizing110120px7.5
sizing120160px10

Inset Spacing Tokens

An inset is the space within a container from which elements —typography, images, icons, and more — are separated from the edge. By default, a component’s inset should be equal on all four sides.

Inset Spacing

Values

TokenPx ValueRem Value
spaceInset0000px0 0 0 0
spaceInset0104px0.25 0.25 0.25 0.25
spaceInset0208px0.5 0.5 0.5 0.5
spaceInset03012px0.75 0.75 0.75 0.75
spaceInset04016px1 1 1 1
spaceInset05024px1.5 1.5 1.5 1.5
spaceInset06032px2 2 2 2
spaceInset07048px3 3 3 3

Apply a inset spacing token to the padding property.

Squish Spacing Tokens

A squish inset reduces top and bottom padding relative to the default inset space.

Squish Spacing

Values

TokenPx ValueRem Value
spaceInsetSquish0000px0 0 0 0
spaceInsetSquish0104px 8px 4px 8px0.25 0.5 0.25 0.5
spaceInsetSquish0208px 12px 8px 12px0.5 0.75 0.5 0.75
spaceInsetSquish03012px 16px 12px 16px0.75 1 0.75 1
spaceInsetSquish04016px 24px 16px 24px1 1.5 1 1.5
spaceInsetSquish05024px 32px 24px 32px1.5 2 1.5 2
spaceInsetSquish06032px 48px 32px 48px2 3 2 3

Apply a squish inset spacing token to the padding property.

Stretch Spacing Tokens

A stretched inset increases top and bottom padding relative to the default inset space.

Stretch Spacing

Values

TokenPx ValueRem Value
spaceInsetStretch0000px0 0 0 0
spaceInsetStretch0108px 4px 8px 4px0.5 0.25 0.5 0.25
spaceInsetStretch02012px 8px 12px 8px0.75 0.5 0.75 0.5
spaceInsetStretch03016px 12px 16px 12px1 0.75 1 0.75
spaceInsetStretch04024px 16px 24px 16px1.5 1 1.5 1
spaceInsetStretch05032px 24px 32px 24px2 1.5 2 1.5
spaceInsetStretch06048px 32px 48px 32px3 2 3 2

Apply a stretch inset spacing token to the padding property.

Spacing Tokens

For applying the space between items, you use space tokens. These can be applied as both spaceInline and spaceStack. Where and how this space is applied will depend on the component. This allows components to apply spacing as best appropriate. For example if a component has to support wrapping, this may dictate a particular CSS implementation, or if a component supports multiple orientations, this may cause the spacing to render on different sides.

An example of space token used for vertical spacing between elements:

Stack Spacing

An example of space token used for horizontal spacing between elements:

Inline Spacing

Values

TokenPx ValueRem Value
space0000px0
space0104px0.25
space0208px0.5
space03012px0.75
space04016px1
space04520px1.25
space05024px1.5
space06032px2
space07040px2.5
space08048px3
space09064px4
space10080px5
space110120px7.5
space120160px10

Apply spacing tokens to the margin property.

Spacing object keys

In the component defaults or overrides objects, the aforementioned spacing tokens are mapped to the following keys: spaceInline, spaceStack and spaceInset.

spaceInline in horizontal flow:

This places a space inline token value as horizontal margin (left/right) CSS property. When flow is horizontal inline spacing is the space between items in direction of flow (column gap).

SpaceInline Horizontal

spaceInline in vertical flow:

This places a space inline token value as vertical margin (top/bottom) CSS property. When flow is vertical, inline spacing is the space between items in direction of flow (row gap).

SpaceInline Vertical

spaceStack in horizontal flow:

This places a space stack token value as vertical margin (top/bottom) CSS property. When flow is horizontal, stack spacing is the space between items perpendicular to the direction flow (row gap). This is only to be applied when items are allowed to wrap.

SpaceStack Horizontal

spaceStack in vertical flow:

This places a space stack token value as horizontal margin (left/right) CSS property. When flow is vertical, stack spacing is the space between items perpendicular to the direction flow (column gap). This is only to be applied when items are allowed to wrap.

SpaceStack Vertical

spaceInset:

This places an inset, squish or stretch space token value as a padding CSS property.

Vertical Text Crop

Line-height cropping is included as part of the typography presets to remove unwanted whitespace at the top and bottom of elements that contain text. The crop utility trims the margin-top and margin-bottom of an element using :before and :after pseudo-elements while preserving line-height between lines in a multi-line block of text.

Line-heigh cropping requires a different setup for each font used in the theme. Once an initial setup is done, it will work with any font size.

The font config object is detailed below:

fontFamilystring
Specifies the font for an element. Since the crop utility has a different setup per font type, it is recommended to specify a single font. If invalid string provided, the font fallbacks to the default Newskit theme font - Noto Sans.
cropConfigobject
Accepts an object with the crop configuration:
topnumber
Constant value representing the desired crop amount at the top. Applied to calculate em-based bottom margin that works with any font size.
bottomnumber
Constant value representing the desired crop amount at the bottom. Applied to calculate em-based top margin that works with any font size.
fontSizenumber
Used as a base in the initial crop calculations. Defaults to 36px.
lineHeightnumber
Used as a base in the initial crop calculations. Defaults to 1.2.
cropAdjustmentsobject
Accepts an object with a key being the font size as a string. Used for additional crop adjustments per font size.
topnumber
A value representing the adjusted crop amount at the top.
bottomnumber
A value representing the adjusted crop amount at the bottom.