Elewacja
Cztery poziomy głębi wyrażone obramowaniami, warstwowymi cieniami, a w trybie ciemnym — jaśniejszymi powierzchniami. Głębia pokazuje, co do czego należy i co jest tymczasowe.
Elewacja mówi, jak elementy mają się do siebie. Treść leży na stronie; menu unoszą się nad elementem, który je otworzył; okna dialogowe przerywają wszystko. prfct ma cztery poziomy, a komponenty wybierają jeden z nich według swojej roli.
0. Płaski
Treść strony, elementy w tekście.
1. Wyniesiony
Karty, przyciski z obramowaniem, pola.
2. Pływający
Menu, popovery, podpowiedzi, listy wyboru.
3. Modalny
Okna dialogowe, panele, paleta poleceń.
Wyniesiony · karta
Obramowanie + ledwie widoczny cień.
Pływający · menu
Uniesiony nad treścią, do której należy.
Modalny · okno dialogowe
Ponad wszystkim; strona czeka.
Poziomy
Powierzchnie pływające i modalne mają też włoskowaty pierścień ring-edge: półprzezroczysty obrys, który wyznacza krawędź na każdym tle — tam, gdzie sam cień mógłby zniknąć.
Cienie
Każdy cień składa się z dwóch lub trzech warstw — ostrego cienia kontaktowego i miękkiego cienia rozproszonego — i jest zabarwiony odcieniem skali neutralnej, więc naturalnie osiada na powierzchni, zamiast wyglądać na szary i doklejony.
Tryb ciemny
Na ciemnym tle cienie są prawie niewidoczne, więc w trybie ciemnym elewację wyrażają jaśniejsze powierzchnie i krawędzie: karty mają gray-2 na stronie w gray-1, popovery dostają jaśniejszy włoskowaty pierścień, a cień poziomu wyniesionego znika całkowicie. Semantyczny token shadow-raised załatwia to za ciebie.
Wytyczne
- Elewacja to nie wyróżnienie. Nie dodawaj cieni, żeby coś wyglądało na ważne — do tego służą hierarchia i kolor.
- Nie nakładaj poziomów dowolnie. Powierzchnia pływająca należy do swojego wyzwalacza, a modalna — do strony. Nad powiadomieniem unoszą się tylko podpowiedzi.
- Na poziomie 1 wybieraj obramowania. Obramowanie 1 px robi dla struktury więcej niż cień i działa w każdym trybie.