Background layers

Background layers utilize Spectrum’s gray system, which contains many options for greater flexibility.

Three groups of flat diamond shapes with increasing stacked layers from left to right (one, two, and three layers), in translucent blue-to-white tones on a matching gradient background, illustrating layered surface elevation.

Layering system

In Spectrum, background layers are used differently depending on the primary context of the page. For pages where the primary purpose is the canvas and related actions for editing, view Editing contexts. For pages where the primary focus is browsing content, such as a Home or Files experience, view Browsing contexts. If you’re not sure whether a page is in an editing or browsing context, contact the Spectrum design team.

In addition to the three existing background layer options — background layer 1, background layer 2, and background base — Spectrum includes an elevated option. Elevated background layers create depth and emphasize content floating on top of a canvas.

A stack of five overlapping flat panels labeled with callouts from front to back: elevated, layer-2, layer-1, base, and pasteboard, illustrating a background layer hierarchy.
Background layer
Light theme
Dark theme
Elevated
gray-25 (with drop shadow)
gray-75 (with drop shadow)
Layer 2
gray-25
gray-75
Layer 1
gray-50
gray-50
Pasteboard
gray-100
gray-25

Editing contexts

Overview

In Spectrum, background layers are used differently depending on the primary context of the page. For pages where the primary purpose is the canvas and related actions for editing, view Editing contexts. For pages where the primary focus is browsing content, such as a Home or Files experience, view Browsing contexts. If you’re not sure whether a page is in an editing or browsing context, contact the Spectrum design team.

Editing application

Pages in editing contexts draw attention to the canvas, which is the primary focus.

A UI mockup showing a light gray toolbar and content area, with a small white vertical panel on the left labeled 'elevated.

An isometric exploded view of a UI panel showing stacked layers labeled layer-2, elevated, pasteboard, and layer-2 again, illustrating depth and stacking order.

Elevated (highest attention)

Elevated backgrounds create the illusion of depth through the use of a drop shadow, and display content that appears on top of other content. They draw attention and are used sparingly. In an editing application, this background option works well for parts of the app frame that appear on top of the canvas, such as a floating toolbar, panel, or popover.

The same UI mockup with a light gray toolbar and content area, with the surrounding background area labeled 'layer-2.'

Layer 2

Layer 2 is the color of the canvas. This background layer color can also be used in both professional and lightweight editing applications, in the app frame, to put it on the same dimension as the primary content.

The same UI mockup with a light gray toolbar and content area, with the outermost background area labeled 'pasteboard.'

Pasteboard

The pasteboard has a dedicated background layer. This is because no components are placed directly on top of it, with the exception of an artboard (which uses a white background color). Other components should be placed on a layer 1, layer 2, or elevated background.

Professional application

This example shows an editing application using background layer 2 for both the artboard and the app frame. An elevated background is used for a floating toolbar, which appears on top of the canvas.

An isometric exploded view of a UI panel with a floating button element, showing stacked layers labeled layer-1, elevated, pasteboard, and layer-2 (twice), illustrating depth and stacking order.

A UI mockup showing a toolbar, content area, and a floating rounded button, with the button labeled 'elevated.'

Elevated (highest attention)

Elevated backgrounds create the illusion of depth through the use of a drop shadow, and display content that appears on top of other content. They draw attention and are used sparingly. In an editing application, this background option works well for parts of the app frame that appear on top of the canvas, such as a floating toolbar, panel, or popover.

The same UI mockup with a toolbar, content area, and floating button, with the light gray sidebar area labeled 'Layer 2.'

Layer 2

Layer 2 is the color of the canvas. This background layer color can also be used in both professional and lightweight editing applications, in the app frame, to put it on the same dimension as the primary content.

The same UI mockup with a toolbar, content area, and floating button, with the white toolbar area labeled 'Layer 1.

Layer 1

Layer 1 can be used as the app frame color in professional editing applications, which require additional depth differentiation.

The same UI mockup with a toolbar, content area, and floating button, with the outermost background area labeled 'Pasteboard.'

Pasteboard

The pasteboard has a dedicated background layer. This is because no components are placed directly on top of it, with the exception of an artboard (which uses a white background color).

Browsing contexts

Pages in browsing contexts draw attention to the content, which is the primary focus. Examples of pages in browsing contexts include a Home or Files experience.

An isometric exploded view of a UI panel with a floating rounded element on top, showing stacked layers labeled base, layer 2, and elevated, illustrating depth and stacking order.

A UI mockup showing a toolbar, content area, and a floating rounded button, with the button labeled 'elevated.'

Elevated (highest attention)

Elevated backgrounds create the illusion of depth through the use of a drop shadow, and display content that appears on top of other content. They draw attention and are used sparingly. In browsing contexts, this background layer style is used in components like menus and tooltips.

A UI mockup showing a content area with a floating rounded card in the top-right corner, with the surrounding gray background labeled 'base.'

Layer 2

Layer 2 is used to group related content together and to create separation from the primary content on a page, such as in the background of the app frame.

The same UI mockup with a content area and floating card, with the white content panel labeled 'layer 2.'

Base

Spectrum 2 uses gray-25 as the base background color to draw attention to the primary content of a page. Using gray-25 allows for higher contrast between the background and content, and it provides a blank canvas for more vibrant colors.

For using a drop shadow to draw emphasis to a container that isn’t elevated, view container emphasis.

Two side-by-side diagrams, light theme and dark theme, each showing three overlapping square panels labeled elevated, Layer 2, and Base from front to back, illustrating background layer hierarchy in both color modes.
Background layer
Light theme
Dark theme
Elevated
gray-25 (with drop shadow)
gray-75 (with drop shadow)
Layer 2
gray-25
gray-75
Layer 1
gray-50
gray-50
Pasteboard
gray-100
gray-25