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

Sergiy Klymkovych

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