Elevations

Elevations refer to the overlapping position of elements with one another, while shadows create the illusion of depth and separate elements from the background. Together they create visual depth and dimension.

Elevation color

Sample Token Value Contrast

--uxa-elevation-color--base

#f6f6f6
rgba(246,246,246,1)

19.48:1

12.2:1

--uxa-elevation-color--1

#ffffff
rgba(255,255,255,1)

21:1

13.15:1

--uxa-elevation-color--2

#ffffff
rgba(255,255,255,1)

21:1

13.15:1

--uxa-elevation-color--3

#ffffff
rgba(255,255,255,1)

21:1

13.15:1

--uxa-elevation-color--4

#ffffff
rgba(255,255,255,1)

21:1

13.15:1

--uxa-elevation-color-contrast

#323435
rgba(50,52,53,1)

1.6:1

1:1

Sample Token Value Contrast

--uxa-elevation-color--base

#101629
rgba(16,22,41,1)

19.08:1

7.54:1

--uxa-elevation-color--1

#1d2238
rgba(29,34,56,1)

16.71:1

6.6:1

--uxa-elevation-color--2

#24293f
rgba(36,41,63,1)

15.21:1

6.01:1

--uxa-elevation-color--3

#2a2f45
rgba(42,47,69,1)

13.92:1

5.5:1

--uxa-elevation-color--4

#33384c
rgba(51,56,76,1)

12.12:1

4.79:1

--uxa-elevation-color-contrast

#dce0e8
rgba(220,224,232,1)

1.31:1

1.93:1

Box shadow

Sample Token Value Usage

--uxa-elevation__box-shadow--1

box-shadow: 0px 2px 6px rgba(0,0,0,0.06);

usually applied on cards, dashboards, tables

--uxa-elevation__box-shadow--2

box-shadow: 0px 2px 4px rgba(0,0,0,0.1);

used on the masthead and side panels

--uxa-elevation__box-shadow--3

box-shadow: 0px 6px 10px rgba(0,0,0,0.1);

used for dialogs and notifications

--uxa-elevation__box-shadow--4

box-shadow: 0px 12px 24px rgba(0,0,0,0.12);

used on tooltips, pickers and menus

Sample Token Value Usage

--uxa-elevation__box-shadow--1

box-shadow: 0px 1px 4px rgba(0,0,0,0.32);

usually applied on cards, dashboards, tables

--uxa-elevation__box-shadow--2

box-shadow: 0px 6px 12px rgba(0,0,0,0.32);

used on the masthead and side panels

--uxa-elevation__box-shadow--3

box-shadow: 0px 12px 24px rgba(0,0,0,0.32);

used for dialogs and notifications

--uxa-elevation__box-shadow--4

box-shadow: 0px 18px 32px rgba(0,0,0,0.32);

used on tooltips, pickers and menus