Shadows
Subtle depth -- never dramatic. Purpose is depth, not decoration.
shadow-sm
use: Inputs on focus
avoid: Static cards at rest — implies a lift/interaction, not a baseline state
shadow-md
use: Cards, Panels
avoid: Floating or temporary UI like dropdowns — reserve the next elevation step so floating layers read as on top
shadow-panel
use: The /dashboard content panel sitting on --canvas
avoid: Cards nested inside an already-elevated panel — stacking two elevations flattens both
shadow-lg
use: Dropdowns, Popovers
avoid: Static page content — using the highest elevation on something that never moves flattens the whole hierarchy

VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn