This dark mode ui kit is built on dark grey, not pure black, with lighter surfaces for higher layers. It includes a sidebar, a data table and a code snippet next to the standard parts.

What is included

• Soft blue buttons with secondary, ghost and danger variants in five states and three sizes
• Dark fields with visible borders, a textarea, select menu, checkbox, radio, toggle and slider
• Content, stat and profile cards, four tinted alerts, a light toast, a modal and tooltips
• A sidebar, a code snippet in JetBrains Mono, a data table and a command palette
• Navbar, tabs, breadcrumb, pagination, avatars and an accordion

Where to use it

Use it for developer tools, analytics dashboards, admin panels and any product that has a night theme.

Design notes

The page color is #10131A and panels step up through #171B24 and #202636, so depth shows without shadows. The accent is a softened blue #7AA2FF, and text is #F2F4F8 instead of pure white. Form controls have borders that reach 3 to 1 contrast against the page.

Built for editing

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