Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Theme

NewsKit offers a robust and flexible theming system, enabling brands to retain a unique identity while building consistent, accessible products.

Foundations

NewsKit foundations define the look and feel of digital products. Foundations include borders, breakpoints, colours, fonts, motion, shadows, sizing and space.

Borders

Borders can help direct attention and communicate state.

Breakpoints allow content to adapt to different viewports responsively.

Colours express brand identity and convey meaning.

Design tokens are used in the place of hard-coded values to allow a scalable and cohesive system.

Fonts establish styles for content such as headlines and paragraphs.

Gradients are a gradual blending from one colour to another, used to fade content and overlay images.

Icons reinforce interactions and can provide additional context through visual cues.

Motion creates movement and narrative in a product.

Outlines provide visual cues about the focus or active states of elements.

Opacity creates translucent interface elements.

Overlays can be decorative or have a functional use like increasing the colour contrast of backgrounds.

Shadows provide visual cues about the distance between layers.

Standardised sizing increases visual consistency.

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

Presets

A collection of related foundational design tokens combined into a preset to define reusable styles, typography or transitions. There are three categories of presets:

A collection of foundational design tokens combined into a preset.

A collection of motion attributes combined into a preset to define reusable motion.

A collection of foundational font design tokens combined into a preset to define reusable typography.

Creating and using themes

Learn how to create NewsKit themes in Figma and code, and unlock the power of presets and component defaults to further customise NewsKit components.

Creating a theme enables the brand identity to be managed from a single location across multiple products.

A guide covering how to populate and apply a brand’s theme.

A preselected option that is applied to a component to define its appearance or behaviour.