This layered depth ui kit shows hierarchy with shadows. Parts sit on four elevation levels, from flat fields to a floating modal, and a stacked card deck shows how layers add up.

What is included

• Blue buttons with secondary, ghost and danger variants in five states and three sizes, shadows grow on hover
• Fields, textarea, select menu, checkbox, radio, toggle and slider on white
• Content, stat and profile cards, four tinted alerts, a toast and a modal
• A three layer card stack and an elevation scale with four levels
• Navbar, tabs, breadcrumb, pagination, avatars, accordion and a settings list

Where to use it

Use it for dashboards, booking and finance apps and any layout where cards, menus and dialogs sit above each other.

Design notes

Shadows follow a four level scale. Buttons use level 1, cards level 3 and the modal level 4, and each level stacks two to four soft shadows with low opacity. The accent is blue #2F5BFF on a fog page #F1F3F7, and borders are #E3E7EE.

Built for editing

Spacing sits on a 4 point grid and layers have clear names. Fonts are free on Google Fonts (DM Sans) and every color is a fill you can change in the fill panel. Text sizes stay at 12, 14, 16, 20 and 36 px, so the scale is easy to follow.

How to use it

Copy the kit with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. Install the free Google Fonts first so the text looks the same.