Elevacja i cienie
System elevacji definiuje głębię i hierarchię elementów interfejsu za pomocą cieni, blurów i warstw. Pomaga użytkownikowi zrozumieć, które elementy są na wierzchu.
Co to jest?
Elevacja w Design Systemie to system warstw określający, jak wysoko element “unosi się” nad powierzchnią. Im wyższa elevacja, tym większy cień. System definiuje dyskretne poziomy (np. elevation-0 do elevation-5), każdy z określonym box-shadow, rozproszoną przejrzystością i opcjonalnie kolorem tła. Elevacja buduje hierarchię wizualną i informuje użytkownika o relacjach między elementami.
Jak to działa?
Każdy poziom elevacji ma przypisany styl cienia. Elevation-0 to element na powierzchni (bez cienia). Elevation-1 to lekkie uniesienie (przyciski). Elevation-2 to karty i dropdowny. Elevation-3 to modale i dialogi. Wyższe poziomy są rzadko używane. Cienie składają się zwykle z 2–3 warstw box-shadow o różnym blur i offset, co daje realistyczny efekt.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Material Design 3 definiuje 6 poziomów elevacji (0–5) z odpowiadającymi surface tint colors. Carbon IBM stosuje 4 warstwy (layer-01 do layer-03 + popover). Fluent 2 definiuje shadow2, shadow4, shadow8 i shadow16 wg rozmiaru blur.