Foundations

Shadows

Shadows provide visual cues about the distance between layers.

Overview

The NewsKit design system offers a series of depths of shadows. They improve the overall aesthetics, add levels of depth and realism to the user’s visual experience and improve the UI visual hierarchy. This helps users discover and interact with UI elements. These have been mapped to commonly used components to ensure they work together in harmony.

Shadow	Token	Example usage

Shadows can be applied to a UI element using the boxShadow attribute on a Style Preset.

Sizing

A simple, standardised approach to size increases consistency and visual rhythm. Appropriate sizing is important for providing an inclusive experience.

Sizing

A simple, standardised approach to size increases consistency and visual rhythm. Appropriate sizing is important for providing an inclusive experience.