Newskit Logo
Newskit Logo
View Github

Foundations

Overlays

Overlays are used for styling UI elements. They can be decorative, but often have a functional use like communicating state on images or increasing the background contrast when a component is layered above the interface, e.g. a Modal.

Overview

Overlay foundations consist of tints in both ‘base’ styles (these are dark when used in a light theme) and ‘inverse’ styles (these are light when used in a dark theme).

Tint

Tints make colors in a UI more or less intense by aiding legibility contrast between the foreground and background elements.

'Base' tint tokens are used to darken a background or element.

'Inverse' tint tokens are used to lighten a background or element.

TintTokenValueCommon usage

Usage

The following guidance describes how and when to appropriately use overlays.

Do

Overlay contrasts should be distinct and clear. They can be used to obscure page content and emphasise an element for greater legibility, I.e. the Modal.

Don’t

Ensure overlays used do not obscure the legibility of important UI elements like text and icons, and contrasts are distinct and clear.

Accessibility considerations

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

Shadows

Shadows provide visual cues about the distance between layers. They add levels of depth and realism to the user’s visual experience and improve the UI visual hierarchy.

Shadows

Shadows provide visual cues about the distance between layers. They add levels of depth and realism to the user’s visual experience and improve the UI visual hierarchy.