Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Foundations

Gradients

Gradients, also known as colour transitions, are often used to provide realism, increase colour contrast, or to create the illusion of content fading into an interface or image.

Overview

Gradient foundations consist of ‘base’ and ‘inverse’ styles.

Base

  • Dark when used in a light theme

  • 'Base' gradient tokens fade elements into the interface background

Inverse

  • Light when used in a dark theme

  • 'Inverse' gradient tokens fade elements into a dark background in a light theme

GradientTokenValue

Accessibility considerations

When using gradients, ensure important UI elements like text and icons are legible without compromising the aesthetic.

Iconography

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

Learn more about icons

Iconography

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