This aurora gradient ui kit puts calm dark panels over soft violet, cyan and fuchsia glow. Primary buttons use a violet to fuchsia gradient with a glow, and everything else stays quiet.

What is included

• Gradient primary buttons with secondary, ghost and danger variants in five states and three sizes
• Dark fields with violet focus borders, textarea, select menu, checkbox, radio, toggle and slider
• Content, stat and profile cards, four tinted alerts, a light toast, a modal and tooltips
• A settings list, an empty state and a command palette
• Navbar, tabs, breadcrumb, pagination, avatars and an accordion

Where to use it

Use it for AI products, creative tools, crypto and music apps and launch pages with a night mood.

Design notes

Panels are solid #10132A on a #070914 page, so text never sits on the raw gradient. Buttons use #6D28D9 to #A21CAF with white text. The glow shapes use a layer blur of 400 and a 5 percent grain layer prevents color banding. Selected and focused states use a border and a glow.

Built for editing

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