Newskit Logo

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.

ShadowTokenExample usage
shadow010
Card
Button (active state)
shadow020
Notification badges
shadow030
Navigation Menu Bar
shadow040
Card (hover state)
Button (hover state)
shadow050
Pickers
Popover
shadow060
Modals
Dialogs

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

Typography

Fonts define the font family, boldness, size, and the style of the text.

Fonts define the font family, boldness, size, and the style of the text.