Shadows express the degree of elevation between surfaces, indicating higher priority or position. The page covers 16 tokens in four categories: Shadow Bottom, Shadow Top, Designated Level and Component Specific.
Every example is drawn with the var(--shadow-…) from the package, so it follows the package when it changes. See .claude/skills/eco-elevation for the rules.
Shadows express the degree of elevation between surfaces. So elevation is the distance between any two elements along the z-axis.
Light from above. The shadow falls on the layer below.
Light from below. The shadow falls on the layer above.
Higher levels are narrower so each shadow stays visible. Every Bottom and Top level adds a 1px contour shadow (0 0 1px, 5% black) to the main shadow.
This is shadows and elevation used exclusively for specific components in the ECO Design System. These are specified in detail within each component.
This is intended for essential global components, such as main and left navigation menus, which must operate on a separate layer and should infrequently, if ever, be hindered by other elements.
The Bottom shadow elevation variant simulates a light source from the top direction to cast a shadow on surfaces beneath the component or surface it is connected with. This is the most commonly used set of elevations throughout the UI.
The lowest level visible container on which components, text etc. are placed upon.
The background color of our applications.
The Top shadow elevation variant simulates a light source from the bottom direction to cast a shadow on surfaces beneath the component or surface it is connected with. This is used sparingly.
When selecting an appropriate elevation level, it is essential to adhere to certain best practices.
Boost user focus by increasing elevation. Users pay more attention to items that appear closer, so raise the elevation of actions you want the users to prioritize.
Select an elevation that mimics authentic lighting conditions (as much as possible). Both a shadow’s size and amount of softness or diffusion express the degree of distance between two surfaces.
Don’t overuse elevation. Excessive use of elevation can detract from the user experience by causing distractions. It is advisable to apply elevation sparingly.
The ECO Design System offers two base variants of shadow & elevation: Bottom and Top.
We also use Designated Level elevations and Component specific sets of shadow and elevation.
The Bottom shadow elevation variant simulates a light source from the top to cast a shadow on top of the surface or surfaces beneath the component it is placed on. This is the most commonly used set of elevations throughout the UI.
| Example | Description | Token |
|---|
The Top shadow elevation variant simulates a light source from the bottom to cast a shadow on top of the surface or surfaces beneath the component it is placed on. This is used sparingly.
| Example | Description | Token |
|---|
This is intended for essential global components, such as main and left navigation menus, which must operate on a separate layer and should rarely, if ever, be hindered by other elements.
| Example | Description | Token |
|---|
Shadows used together with a specific component.
| Example | Description | Token |
|---|
Use the token as the whole box-shadow value. The list is generated from tokens.json.
.card { box-shadow: var(--shadow-elevation-b-20); }
.modal { box-shadow: var(--shadow-elevation-b-100); }
.drawer { box-shadow: var(--shadow-elevation-drawer-right); }
elevation-b-20 is the default for cards.elevation-b-100.elevation-drawer-* for drawers and navigation.var(--shadow-…).elevation-b-* on a drawer.