Design System

Layers

Layers are sets of styles that can be applied to any container. They separate the container visually from its background content.

Blur

Blur layers simply apply a blur effect to the container's background. Usually, a glass layer should be used, but blur is available for cases where a custom background color needs to be applied in combination with the blur effect.

blur.50
blur.100

Glass

Glass layers apply a glass effect to the container's background. Glass is usually applied to containers on top of media such as images. Use glass.50 for smaller elements, such as Badge, and glass.100 for larger elements, such as Toast and cards.

glass.50
glass.100

Dark

glass.50
glass.100

Usage

React

Layer styles can be applied using the layerStyle prop on any component. The available layer styles are:

  • blur.50 - Light blur effect
  • blur.100 - Strong blur effect
  • glass.50 - Glass effect for smaller elements
  • glass.100 - Glass effect for larger elements

The glass layer styles respect color mode.

Blur

Blur should always be used in combination with a translucent background color.

Loading

Glass

Loading

Copyright ยฉ 2025 Hover Inc. All Rights Reserved.