Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Foundations

Opacity

Opacity creates translucent interface elements. You can combine them into different visual effects using the block component.

Overview

Opacity foundations consist of a scale of styles that make interface elements more translucent. In some cases, a component will have an opacity applied to a background.

How to use opacity

Opacity makes UI interface elements more or less translucent. You can apply these elements to a block.

OpacityTokenValueCommon usage

Accessibility considerations

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

Overlays

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

Learn more about overlays

Overlays

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