This bento grid ui kit pairs the usual buttons, fields and alerts with a tile grid you can rearrange. Cards use a large radius, even gaps and a clear order from the main number to the supporting detail.

What is included

• A bento tile grid with a large stat tile, a chart tile, a music tile, a quick settings tile and a profile tile
• Indigo buttons with secondary, ghost and danger variants in five states and three sizes
• Text fields, textarea, select menu and choice controls with soft focus rings
• Content, stat and profile cards, tinted alerts, a toast and a modal
• Navbar, tabs, breadcrumb, pagination, avatars, accordion and a settings list

Where to use it

Use it for product overview pages, dashboards and feature sections that need a modular layout.

Design notes

Cards use a 24 px radius and the tile grid keeps a 16 px gap in both directions. The accent is indigo #4F46E5 on a mist background #EEF0F4. Tiles have different sizes, so the eye starts at the biggest number and moves to the smaller tiles.

Built for editing

Spacing sits on a 4 point grid and layers have clear names. Fonts are free on Google Fonts (Inter) 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.