Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Foundations

Sizing

Standardised sizing increases visual consistency in an interface.

Overview

NewsKit uses a simple, standard sizing scale. The size of every UI element, and the space between elements, is defined by a 4px rule (or pt/rem).

All UI elements align to a 4px square baseline grid to:

  • Increase visual consistency

  • Increase efficiency (fewer design choices = less code)

  • Make communication easier and reduce back and forth between design and engineering as the intent is clear and results are more predictable

  • Create a visual rhythm

If text is centred within a component (e.g. button) it’s already evenly distributed and doesn’t need to sit on the grid.

Why 4px?

In addition to the above:

  • Most popular screen sizes are divisible by four, so grid columns fit the screen in the majority of use cases.

  • Many platforms allow users to set their preferred ‘density’, increasing or decreasing font size or whitespace in and between page elements. A 4px rule lets you scale consistently while maintaining the grid.

Touch target areas

To ensure there’s always a sufficient area for users to click or tap on interactive elements, NewsKit has a variety of component sizes (e.g. small, medium and large buttons and text inputs).

On mobile breakpoints and devices, all interactive elements should have a touch target area no less than 44px². This is the minimum standard for iOS and Android.

In most cases when there are multiple interactive elements in close proximity, make sure touch target areas are separated by enough clear space (16px) to balance information density and usability.

Sizing tokens

Sizing tokens specify sizes throughout NewsKit, such as for icons, space and minimum or maximum widths or heights. Sizing tokens also define space tokens. The available sizes are:

ExampleTokenValue

Code Usage

You can override and apply sizing to components. See the component defaults page for details.

For more advanced use cases, you can access these values from the theme by calling getResponsiveSize, emotion’s useTheme hook, or getSizingCssFromTheme.

Spacing

Space provides content hierarchy, reduces visual clutter and shows relationships between elements.

Learn more about spacing

Spacing

Space provides content hierarchy, reduces visual clutter and shows relationships between elements.