Тени

Тень — один из самых капризных визуальных инструментов. 
При правильном применении она помогает задать глубину, иерархию
и лёгкость интерфейсу. При неправильном — делает дизайн «замыленным», грязным и устаревшим. Важно понимать, зачем ты используешь тень,
 а не лепить её по инерции.

Основы работы с тенями

Тень — не украшение

Она используется не для красоты, а чтобы визуально отделить один уровень интерфейса от другого: карточку от фона, всплывающее окно от основного экрана, кнопку от подложки.

Избегай чёрных и резких теней

Прозрачный чёрный цвет (rgba(0,0,0,0.2)) или тень с жёстким радиусом — сразу выдают новичка. Хорошая тень — это мягкий размазанный градиент.

Контрастность — с умом

Тень не должна перетягивать внимание на себя. Она работает фоном,
а не как главный элемент. Особенно аккуратно с тёмными темами —
там тени почти не нужны.

Свет = логика

Представь, что у тебя есть источник света сверху. Всё, что ближе к «зрителю» — должно отбрасывать тень вниз. Не ставь тени вверх и вбок
без причины.

Не на всех элементах

Не нужно ставить тень на всё подряд: иконки, текст, кнопки. Используй
её только на элементах, которым нужно создать ощущение отделённости
и приоритета.

Чек-лист по теням

• Есть ли у элемента логическая необходимость в тени?

• Тень мягкая и размазанная, без жёсткого края

• Цвет тени — полупрозрачный, а не глухой чёрный

• Уровень тени соответствует уровню элемента (всплывашка > карточка > кнопка)

• Нет дублирования: и тень, и обводка, и фон одновременно

• Тень не конфликтует с фоном (например, не «пылит» на тёмном фоне)