Newskit Logo
Newskit Logo
View Github

Foundations

Opacity

Opacity is used to create translucent interface elements. These can be combined into different visual effects using the Block component.

Overview

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

Opacity

Opacity is used in a UI to make interface elements more or less translucent that can be applied 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 are used for styling UI elements. They can be decorative, but often have a functional use like communicating state on images or increasing the contrast backgrounds when a component is layered upon each other, e.g. a modal.

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 contrast backgrounds when a component is layered upon each other, e.g. a modal.