Shadows

latest

Shadows indicate depth to the user. Depth is used to make content stand out from the background, elevating what matters to the user.

Definitions

Drop shadow

Arc provides a drop shadow with a 12px offset and 36px blur, using a black with 40% opacity.

The offset is directed down and to the left. This is for two reasons:

1. The BT Portal brand device is typically placed in the top right of the page, which is treated as a source of light.
2. Shadows may safely render over other UI elements, following the document order.

The 36px blur softens the shadow significantly whilst providing definition on all sides of the object being elevated.

Black with a 40% opacity is used because it is visible on all supported background colours.

-12px 12px 36px rgb(0 0 0 / 40%)

Components

The Elevation Component

Use Elevation to apply the Arc drop shadow to an element.

View the Elevation component

In Figma

Use the Elevation effect to add the Arc drop shadow to an object.

View the Figma setup guide

Usage guidelines

Elevate the most important elements on the screen

Apply the Arc drop shadow to the most important elements on the screen, like the primary CTA for a key user journey. Avoid applying it to everything.

Don't use custom shadows

When using Arc, it's important to use the brand-approved shadow.

Don't use shadows on transparent objects

Avoid the use of shadows on transparent objects, as this creates an unappealing visual effect.

Don't add shadows to images

Images are usually supplementary content, and are therefore almost never the most important element on a page.

Don't nest shadows

Arc uses a single elevation layer, and so shadows should not be nested. This avoids creating "drop shadow lasagne".