Overlay

The overlay serves to temporarily highlight important content—such as modals, panels, or notifications—by isolating it from the primary interface, thereby directing user attention.

Usage

The overlay is designed to present transient content—such as modals, panels, or notifications—in a way that immediately captures the user's attention while maintaining a clear separation from the underlying interface.

Overlay

Appearance

Color & opacity

Utilize a semi-transparent dark background with an opacity of about 80%. This dims the underlying interface, providing sufficient contrast while maintaining context.

Overlay

rgba(0,0,0,0.7)

Default

Default background overlay for dialogs

Syntax: Web

var(--color-overlay-default)

Collection

UI colors

rgba(255,255,255,0.8)

Inverse

Inversed background overlay use inside a dialogs

Syntax: Web

var(--color-overlay-inverse)

Collection

UI colors

UI Motion

Entry and exit effects

As part of the overlay, Soul uses smooth fade-in and fade-out transitions, with durations typically around 180ms, to ensure that the overlay's appearance and disappearance feel natural and unobtrusive.

Avoid overly dramatic animations; the focus should remain on content clarity and user comprehension.

Accessibility

Focus management

Visually, the overlay should signal its active state clearly, and in the background, ensure that focus (both visual and programmatic) is appropriately managed to assist users navigating via keyboard or assistive technologies.

Readable & clear

All text and interactive elements within the overlay should maintain high readability standards, ensuring that critical information is accessible to all users.

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.