F-05 · Foundation

Shadows

5 рівнів elevation, кожен — пара (xs detail + spread soft). Теплі тіні (rgba з warm-brown base), не сині.

Scale

--shadow-xs

0 1px 2px rgba(42,36,32,.04)

Hairline. For pressed states, dense surfaces.

--shadow-sm ★

soft layered: 1px + 6/20

Default for cards. Subtle lift.

--shadow-md

4/12 + 12/32

Hover state, popovers.

--shadow-lg

14/26 rgba(berry, .16)

Berry-tinted, CTA emphasis.

--shadow-xl

34/90 rgba(ink, .18)

Modals, overlays. Strong drop.

--ring-focus

0 0 0 4px rgba(berry, .18)

Keyboard focus ring.

Принципи

Робимо

  • 2-шарові тіні: short + long для природного вигляду
  • Теплі rgba (на ink або berry основі), не cool blue
  • Hover піднімає elevation на 1 крок + translateY(-1px)
  • Focus ring завжди берріш (тепло, видно на кремі)
  • Border + shadow разом, не замість

Не робимо

  • Box-shadow з blue-чорним як у Material Design
  • Inset shadow на полях форм — занадто skeu
  • Multiple stacked shadows для глибини — заплутано
  • Drop-shadow на тексті — ніколи
  • Shadow як заміна border — тінь не = розмежування