Przejdź do treści
Spis treści

Fundamenty

Cienie

Jasne powierzchnie, mocna hierarchia i kontrolowana ilość akcentów. Cień jest nośnikiem informacji, nie ozdobą, i dlatego są tylko dwa.

Stan rozdziału:
gotowe
Aplikacja dziś:
rozjazd z brandbookiem

Co mówi brandbook

Brandbook nie definiuje cieni interfejsu. Przy logo zakazuje cienia wprost (s. 15: „Nie dodawaj cieni”). Karty na s. 10 i 11 leżą na tle neutralnym z cienką linią, bez widocznego cienia. Wniosek: cień jest w tej marce czymś wyjątkowym, nie domyślnym.

Dwa poziomy

0 1px 2px rgba(25, 29, 38, 0.06)
karta: Karta na tle neutralnym. Ledwo widoczny, razem z linią obrysu.
0 12px 32px -12px rgba(25, 29, 38, 0.24), 0 2px 6px -2px rgba(25, 29, 38, 0.08)
uniesiony: Menu podręczne, okno modalne, element przeciągany. Coś, co tymczasowo leży nad resztą.
  • Karta: ledwo widoczny cień razem z linią obrysu. Mówi, że karta leży na płótnie. Bez linii i cienia wszystko czyta się jak jedna płaska plama, co było głównym zarzutem wobec poprzedniej wersji aplikacji (komentarz w karta.tsx).
  • Uniesiony: menu podręczne, okno modalne, element przeciągany. Coś, co tymczasowo leży nad resztą i zaraz zniknie.
  • Trzeciego poziomu nie ma. Jeżeli coś potrzebuje „więcej cienia”, to znaczy, że potrzebuje innego układu.
  • Cień nigdy nie jest kolorowy i nigdy nie jest na logo, na tekście ani na przycisku w spoczynku.

Co zmienić w aplikacji