This brutalist ui kit is raw on purpose: black on white, thick borders, no rounded corners and mono text. A single orange accent marks hover and focus, and big type does the decorating.

What is included

• Black buttons with outline, ghost and danger variants in five states and three sizes, hover turns orange
• Square fields, textarea, select menu, checkbox, radio, toggle and slider with 3 px borders
• Content, stat and profile cards, four solid alerts, a yellow toast and a modal
• Two marquee strips, a big numbered list and overlapping cards that break the grid
• Navbar, tabs, breadcrumb, pagination, avatars and an accordion

Where to use it

Use it for studios, art and music sites, manifestos and portfolios that want a strong voice.

Design notes

Borders are 3 px black, corners are square and the only shadow is a hard 12 px offset on dialogs. Headings use Archivo Black and body text uses Space Mono. The palette is black, white and grey with orange #FF3B00, yellow #FFD600 and blue #1F4FFF for status.

Built for editing

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