neo-brutalism

Generate React and Tailwind UIs with hard borders, shadows, and uppercase Space Grotesk typography.

Updated Feb 19, 2026
One-click install
npx skills add https://github.com/TheBlueBear02/drip-skills --skill neo-brutalism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neo-brutalism
Source: https://github.com/TheBlueBear02/drip-skills/tree/main/drip-skills/neo-brutalism
Command: npx skills add https://github.com/TheBlueBear02/drip-skills --skill neo-brutalism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Neo-brutalism solves the problem of shipping bold, border-driven UIs by enforcing hard borders, hard shadows, uppercase typography, and a cream background for high-contrast readability and AI-friendly reasoning.

Core Features & Use Cases

  • Deterministic visual language: border-4 border-black everywhere, hard zero-blur shadows, Space Grotesk typography in uppercase.
  • Texture-forward, color-blocked sections with sticker-like accents for punchy marketing pages and dashboards.
  • Use cases include landing pages, admin dashboards, and marketing sites that require a rebellious, high-contrast aesthetic.

Quick Start

Generate a LandingPage.jsx using a cream canvas background (#FFFDF5), bold black borders, hard shadows, uppercase Space Grotesk typography, and a push-button interaction.

Frequently Asked Questions about neo-brutalism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a neo-brutalism UI in React and Tailwind?▼

Neo-brutalism design uses bold black borders, hard zero-blur shadows, uppercase typography, and cream backgrounds to create high-contrast, rebellious interfaces. It solves the problem of shipping punchy, border-driven UIs for marketing sites, dashboards, and prototypes without relying on logos.

What are the core styling rules for neo-brutalism hard shadows and borders?▼

Neo-brutalism requires a fixed five-color palette, border-4 black borders on all elements, zero-blur hard shadows, uppercase Space Grotesk typography, and a cream #FFFDF5 canvas background. These constraints ensure deterministic, high-contrast readability across your project.

Can I use neo-brutalism design for admin dashboards and landing pages?▼

Yes, neo-brutalism is designed for React and Tailwind projects including landing pages, admin dashboards, and marketing sites. It provides a punk, high-contrast aesthetic with sticker-like accents, push-button interactions, and card lift effects suitable for these applications.

How do I implement push button and card lift interactions in a bold UI?▼

Implement push button and card lift interactions by applying hard shadow translation on active and hover states within your Tailwind project. These interaction rules are enforced by the neo-brutalism framework to ensure components respond physically while maintaining the bold, border-driven aesthetic.

Does this bold UI approach work without adding custom logos or images?▼

Yes, neo-brutalism supports a logo-free aesthetic by relying on texture-backed backgrounds, sticker-like accents, and color-blocked sections. It creates a punk, rebellious look through bold borders, uppercase Space Grotesk typography, and a fixed five-color palette without requiring custom images.