Elevation

Overview

Elevation levels

The elevation concept consists of the following levels:

Lvl. 0 Lvl. 1 Lvl. 2 Lvl. 3 Lvl. 4 Lvl. 5

framecanvasstackedabovestickyoverlaynative

Liveelevation levels

HTML

<div style="font:400 0.875rem/1rem ui-monospace,SFMono-Regular,Menlo,monospace;padding:8px 0">
<div style="position:relative;height:232px">
  <span style="position:absolute;left:0;bottom:12px">Lvl. 0</span><span style="position:absolute;left:72px;right:0;bottom:19px;height:1px;background:var(--oc-semantic-color-divider)"></span>
  <span style="position:absolute;left:0;bottom:52px">Lvl. 1</span><span style="position:absolute;left:72px;right:0;bottom:59px;height:1px;background:var(--oc-semantic-color-divider)"></span>
  <span style="position:absolute;left:0;bottom:92px">Lvl. 2</span><span style="position:absolute;left:72px;right:0;bottom:99px;height:1px;background:var(--oc-semantic-color-divider)"></span>
  <span style="position:absolute;left:0;bottom:132px">Lvl. 3</span><span style="position:absolute;left:72px;right:0;bottom:139px;height:1px;background:var(--oc-semantic-color-divider)"></span>
  <span style="position:absolute;left:0;bottom:172px">Lvl. 4</span><span style="position:absolute;left:72px;right:0;bottom:179px;height:1px;background:var(--oc-semantic-color-divider)"></span>
  <span style="position:absolute;left:0;bottom:212px">Lvl. 5</span><span style="position:absolute;left:72px;right:0;bottom:219px;height:1px;background:var(--oc-semantic-color-divider)"></span>
  <span style="position:absolute;left:calc(72px + (100% - 72px) * 0 / 7 + 8px);width:calc((100% - 72px) / 7 - 16px);bottom:17px;height:5px;border-radius:3px;background:var(--oc-semantic-color-background-brand)"></span>
  <span style="position:absolute;left:calc(72px + (100% - 72px) * 1 / 7 + 8px);width:calc((100% - 72px) / 7 - 16px);bottom:57px;height:5px;border-radius:3px;background:var(--oc-semantic-color-background-brand)"></span>
  <span style="position:absolute;left:calc(72px + (100% - 72px) * 2 / 7 + 8px);width:calc((100% - 72px) / 7 - 16px);bottom:77px;height:5px;border-radius:3px;background:var(--oc-semantic-color-background-brand)"></span>
  <span style="position:absolute;left:calc(72px + (100% - 72px) * 3 / 7 + 8px);width:calc((100% - 72px) / 7 - 16px);bottom:97px;height:5px;border-radius:3px;background:var(--oc-semantic-color-background-brand)"></span>
  <span style="position:absolute;left:calc(72px + (100% - 72px) * 4 / 7 + 8px);width:calc((100% - 72px) / 7 - 16px);bottom:137px;height:5px;border-radius:3px;background:var(--oc-semantic-color-background-brand)"></span>
  <span style="position:absolute;left:calc(72px + (100% - 72px) * 5 / 7 + 8px);width:calc((100% - 72px) / 7 - 16px);bottom:177px;height:5px;border-radius:3px;background:var(--oc-semantic-color-background-brand)"></span>
  <span style="position:absolute;left:calc(72px + (100% - 72px) * 6 / 7 + 8px);width:calc((100% - 72px) / 7 - 16px);bottom:217px;height:5px;border-radius:3px;background:var(--oc-semantic-color-background-brand)"></span>
<div style="margin-left:72px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-items:center;font-weight:700;color:var(--oc-base-color-white-100)">
  <span style="padding:6px 12px;border-radius:16px;background:var(--oc-semantic-color-background-brand)">frame</span><span style="padding:6px 12px;border-radius:16px;background:var(--oc-semantic-color-background-brand)">canvas</span><span style="padding:6px 12px;border-radius:16px;background:var(--oc-semantic-color-background-brand)">stacked</span><span style="padding:6px 12px;border-radius:16px;background:var(--oc-semantic-color-background-brand)">above</span><span style="padding:6px 12px;border-radius:16px;background:var(--oc-semantic-color-background-brand)">sticky</span><span style="padding:6px 12px;border-radius:16px;background:var(--oc-semantic-color-background-brand)">overlay</span><span style="padding:6px 12px;border-radius:16px;background:var(--oc-semantic-color-background-brand)">native</span>

Level 0 (Frame) = Frame is the background where everything is placed on.

Level 1 (Canvas) = Canvas is the container where content is placed inside. For the Canvas, a Block or a Card can be used. Canvases work as a cluster for content that belongs together.

Level 1.5 (Stacked) = Stacked creates another level inside a Canvas. For example, if a Card is placed on/inside a Block.

Level 2 (Above) = Above is used when the content belongs to a certain canvas but needs to be placed on top. Example: Toggletip, Tooltip or Icon Button.

Level 3 (Sticky) = Sticky is used when the content has an overarching functionality which is not part of a certain canvas. It usually has a fixed position at the top or bottom of the view for example Snackbar.

Level 4 (Overlay) = Overlay sits on top of all the underlying levels and is used to provide additional content without navigating away from the current view. The background of the overlay is a Scrim. Example: Sheet

Level 5 (Native) = Native contains all app components that are placed on top of the underlying web view. Example: Searchbar or Tabbar.

Elevation levels in practice

The following image shows how to use the different elevation levels.

Level 0
Frame

Use Frame as background.

Level 1
Canvas

Place Card or Block with content on it.

Level 1.5
Stacked

Optionally you can place a stacked Card inside a Block.

Level 2 & 3
Above & Sticky

Optionally you can place an Elevated Icon Button or Floating Action Button on top.

Level 4
Overlay

Place a Sheet on top of everything.

Level 5
Native

Native components like the Top Bar are always above other levels.

Livepractical guide for using elevation levels

HTML

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:40px 24px;justify-items:center;font:400 0.8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,monospace">
<p style="text-align:center;color:var(--oc-semantic-color-text-brand)"><b>Level 0</b><br>Frame</p>
  <div style="height:290px;border:1px solid var(--oc-semantic-color-divider);background:var(--oc-semantic-color-background-frame)"></div>
  <p>Use <b>Frame</b> as background.</p></div>
<p style="text-align:center;color:var(--oc-semantic-color-text-brand)"><b>Level 1</b><br>Canvas</p>
  <div style="height:290px;border:1px solid var(--oc-semantic-color-divider);background:var(--oc-semantic-color-background-frame);display:grid;grid-template-rows:116px 118px 1fr">
    <div style="padding:16px 6px"><div style="height:100%;border-radius:8px;background:var(--oc-semantic-color-background-canvas)"></div></div><div style="background:var(--oc-semantic-color-background-canvas)"></div></div>
  <p>Place <b>Card or Block</b> with content on it.</p></div>
<p style="text-align:center;color:var(--oc-semantic-color-text-brand)"><b>Level 1.5</b><br>Stacked</p>
  <div style="height:290px;border:1px solid var(--oc-semantic-color-divider);background:var(--oc-semantic-color-background-frame);display:grid;grid-template-rows:116px 118px 1fr">
    <div style="padding:16px 6px"><div style="height:100%;border-radius:8px;background:var(--oc-semantic-color-background-canvas)"></div></div><div style="padding:10px 6px;background:var(--oc-semantic-color-background-canvas)"><div style="height:100%;border-radius:8px;background:var(--oc-semantic-color-background-stacked)"></div></div></div>
  <p>Optionally you can place a <b>stacked Card</b> inside a Block.</p></div>
<p style="text-align:center;color:var(--oc-semantic-color-text-brand)"><b>Level 2 &amp; 3</b><br>Above &amp; Sticky</p>
  <div style="height:290px;border:1px solid var(--oc-semantic-color-divider);background:var(--oc-semantic-color-background-frame);display:grid;grid-template-rows:116px 118px 1fr">
    <div style="padding:16px 6px;position:relative"><div style="height:100%;border-radius:8px;background:var(--oc-semantic-color-background-canvas)"></div><span style="position:absolute;right:0;top:50px;width:16px;height:16px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);filter:var(--oc-semantic-shadow-above)"></span></div><div style="padding:10px 6px;background:var(--oc-semantic-color-background-canvas)"><div style="height:100%;border-radius:8px;background:var(--oc-semantic-color-background-stacked)"></div></div>
    <div style="display:grid;place-items:center"><span style="width:78px;height:18px;border-radius:4px;background:var(--oc-semantic-color-background-brand);filter:var(--oc-semantic-shadow-sticky)"></span></div></div>
  <p>Optionally you can place an <b>Elevated Icon Button</b> or <b>Floating Action Button</b> on top.</p></div>
<p style="text-align:center;color:var(--oc-semantic-color-text-brand)"><b>Level 4</b><br>Overlay</p>
  <div style="height:290px;border:1px solid var(--oc-semantic-color-divider);background:var(--oc-semantic-color-background-frame);position:relative;overflow:hidden">
    <div style="position:absolute;inset:0;background:var(--oc-semantic-color-overlay-scrim)"></div>
    <div style="position:absolute;inset:26px 0 0;border-radius:16px 16px 0 0;background:var(--oc-semantic-color-background-canvas);display:flex;align-items:flex-end;gap:4px;padding:6px"><span style="flex:1;height:20px;border-radius:4px;background:var(--oc-component-button-secondary-background-color)"></span><span style="flex:1;height:20px;border-radius:4px;background:var(--oc-semantic-color-background-brand)"></span></div></div>
  <p>Place a <b>Sheet</b> on top of everything.</p></div>
<p style="text-align:center;color:var(--oc-semantic-color-text-brand)"><b>Level 5</b><br>Native</p>
  <div style="height:290px;border:1px solid var(--oc-semantic-color-divider);background:var(--oc-semantic-color-background-frame);display:grid;grid-template-rows:32px 84px 118px 1fr 28px">
    <div style="display:flex;align-items:center;gap:4px;padding:0 6px;background:var(--oc-semantic-color-background-canvas)"><oc-icon-v1 type="arrow-left" size="50" style="color:var(--oc-semantic-color-text-brand);flex:none"></oc-icon-v1><span style="flex:1;height:20px;border-radius:10px;background:var(--oc-semantic-color-background-frame);display:flex;align-items:center;padding-left:6px"><oc-icon-v1 type="search" style="zoom:0.6;--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1></span></div>
    <div style="padding:0 6px 16px"><div style="height:100%;border-radius:0 0 8px 8px;background:var(--oc-semantic-color-background-canvas)"></div></div><div style="padding:10px 6px;background:var(--oc-semantic-color-background-canvas)"><div style="height:100%;border-radius:8px;background:var(--oc-semantic-color-background-stacked)"></div></div><div></div>
    <div style="display:flex;align-items:center;justify-content:space-around;background:var(--oc-semantic-color-background-canvas)"><span style="width:26px;height:12px;display:flex"><oc-logo-v1 logo="otto" fill-parent></oc-logo-v1></span><oc-icon-v1 type="burger" style="zoom:0.6"></oc-icon-v1><oc-icon-v1 type="basket" style="zoom:0.6"></oc-icon-v1><oc-icon-v1 type="wishlist" style="zoom:0.6"></oc-icon-v1><oc-icon-v1 type="person" style="zoom:0.6"></oc-icon-v1></div></div>
  <p><b>Native components</b> like the Top Bar are always above other levels.</p></div>

Elevation styles

Elevation can be achieved through color, shadow or scrim. Whole sections may also be elevated using a divider.

Liveelevation styles color, shadow, and scrim

HTML

<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:-16px;padding:16px;background:var(--oc-semantic-color-background-frame)">
<div style="display:grid;place-items:center;height:180px;background:var(--oc-semantic-color-background-canvas)"><span style="width:120px;height:120px;border-radius:16px;background:var(--oc-semantic-color-background-stacked)"></span></div>
<div style="display:grid;place-items:center;height:180px;background:var(--oc-semantic-color-background-canvas)"><span style="width:120px;height:120px;border-radius:16px;background:var(--oc-semantic-color-background-canvas);filter:var(--oc-semantic-shadow-sticky)"></span></div>
<div style="display:grid;place-items:center;height:180px;background:var(--oc-semantic-color-overlay-scrim)"><span style="width:120px;height:120px;border-radius:16px;background:var(--oc-semantic-color-background-canvas)"></span></div>

Color

Different levels can be separated by using different Colors. For example, the white background color of the canvas makes it stand out from the gray frame. You have to use color for the elevation of level 0, level 1 and level 1.5.

Shadow

Different levels can also be separated by using different types of Shadows. Larger and lighter shadows suggest that a component is more elevated. Smaller and darker shadows suggest that a component is less elevated.
Use shadow for the elevation of level 2 and level 3.

Elevation styles in practice means the following: Levels 0, 1, and 1.5 use an alternating background color pattern of gray25 and white, while levels 2 and 3 use shadow200 and shadow300 to create depth and dimension.

Scrim

Level 4 is separated from the underlying levels by using a scrim. A Scrim is a transparent background that covers the entire view.

Divider

Full-width dividers may be used as a more subtle way instead of Shadows to imply elevation for distinct sticky sections. This may apply to elements in level 3, 4 or 5.

0: frameColor

1: canvasColor

1.5: stackedColor

2: aboveShadow

3: stickyShadow

4: overlayScrim

5: nativeDivider

LiveDefault Elevation styles

HTML

<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:24px 14px;padding:16px 0;font:400 0.9375rem/1.25rem ui-monospace,SFMono-Regular,Menlo,monospace">
<span style="width:72px;height:72px;background:var(--oc-semantic-color-background-frame)"></span><span style="padding:3px 8px;border-radius:14px;font-weight:700;font-size:0.75rem;white-space:nowrap;color:var(--oc-base-color-white-100);background:var(--oc-semantic-color-background-brand)">0: frame</span><span style="margin-top:8px">Color</span></div>
<span style="width:72px;height:72px;padding:8px;box-sizing:border-box;background:var(--oc-semantic-color-background-frame)"><span style="display:block;height:100%;border-radius:8px;background:var(--oc-semantic-color-background-canvas)"></span></span><span style="padding:3px 8px;border-radius:14px;font-weight:700;font-size:0.75rem;white-space:nowrap;color:var(--oc-base-color-white-100);background:var(--oc-semantic-color-background-brand)">1: canvas</span><span style="margin-top:8px">Color</span></div>
<span style="width:72px;height:72px;padding:8px;box-sizing:border-box"><span style="display:block;height:100%;border-radius:8px;background:var(--oc-semantic-color-background-stacked)"></span></span><span style="padding:3px 8px;border-radius:14px;font-weight:700;font-size:0.75rem;white-space:nowrap;color:var(--oc-base-color-white-100);background:var(--oc-semantic-color-background-brand)">1.5: stacked</span><span style="margin-top:8px">Color</span></div>
<span style="width:72px;height:72px;padding:8px;box-sizing:border-box"><span style="display:block;height:100%;border-radius:8px;background:var(--oc-semantic-color-background-canvas);filter:var(--oc-semantic-shadow-above)"></span></span><span style="padding:3px 8px;border-radius:14px;font-weight:700;font-size:0.75rem;white-space:nowrap;color:var(--oc-base-color-white-100);background:var(--oc-semantic-color-background-brand)">2: above</span><span style="margin-top:8px">Shadow</span></div>
<span style="width:72px;height:72px;padding:8px;box-sizing:border-box"><span style="display:block;height:100%;border-radius:8px;background:var(--oc-semantic-color-background-canvas);filter:var(--oc-semantic-shadow-sticky)"></span></span><span style="padding:3px 8px;border-radius:14px;font-weight:700;font-size:0.75rem;white-space:nowrap;color:var(--oc-base-color-white-100);background:var(--oc-semantic-color-background-brand)">3: sticky</span><span style="margin-top:8px">Shadow</span></div>
<span style="width:72px;height:72px;padding:8px;box-sizing:border-box;background:var(--oc-semantic-color-overlay-scrim)"><span style="display:block;height:100%;border-radius:8px;background:var(--oc-semantic-color-background-canvas)"></span></span><span style="padding:3px 8px;border-radius:14px;font-weight:700;font-size:0.75rem;white-space:nowrap;color:var(--oc-base-color-white-100);background:var(--oc-semantic-color-background-brand)">4: overlay</span><span style="margin-top:8px">Scrim</span></div>
<span style="width:72px;height:72px;box-sizing:border-box;border:1px solid var(--oc-semantic-color-divider);display:grid;grid-template-rows:2fr 1fr"><span></span><span style="border-top:1px solid var(--oc-semantic-color-divider)"></span></span><span style="padding:3px 8px;border-radius:14px;font-weight:700;font-size:0.75rem;white-space:nowrap;color:var(--oc-base-color-white-100);background:var(--oc-semantic-color-background-brand)">5: native</span><span style="margin-top:8px">Divider</span></div>

Best practices

DoUse the default style.

Don'tChange the elevation style.

Label

DoUse the default shadow style.

Label

Don'tUse custom shadows.

DoOnly use gray for the frame.

Don'tChange the color of the frame.

Überschrift

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

DoOnly place cards or block inside a frame.

Überschrift

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

CautionPlace content inside a frame.

DoOnly use white for the canvas.

CautionUse colors other than white for the canvas.

Overview

Elevation levels

Elevation levels in practice

Elevation styles

Color

Shadow

Scrim

Best practices

Fragments

Shadow

Status

Implementation