Generate Web Design in Soft Neo-Brutalism Style
Generate Soft Neo-Brutalism web UI code with hard shadows, thick black borders, and a chubby, tactile Tailwind design system.
1.0.0Add to Favorites
Why it matters
Create visually striking web applications with a unique Soft Neo-Brutalism aesthetic. This prompt guides AI to generate modern, tactile interfaces that stand out from typical AI designs, suitable for any service or product.
Outcomes
What it gets done
Generate HTML/Tailwind CSS or React code based on specific design guidelines.
Implement a high-contrast color palette with distinct 'pop' physics.
Apply 'chubby,' rounded elements and hard, unblurred shadows.
Style buttons, inputs, and cards according to the Neo-Brutalism system.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/vb-soft-neo-brutalism-design | bash Overview
Web Design in Soft Neo-Brutalism Style
A Soft Neo-Brutalism web design prompt covering a strict Tailwind CSS/React design system with hard shadows, thick borders, and a cream/black/yellow palette. Use it when generating a distinctive, tactile web interface in the Soft Neo-Brutalism style for any product type.
What it does
This prompt generates web UI code (HTML/Tailwind CSS or React) following a strict "Soft Neo-Brutalism" design system, positioning the model as a Senior UI Engineer designing tactile, high-contrast, sticker-like interfaces rather than standard corporate design. It specifies a color palette (cream/off-white page background, white surfaces/cards, black text and borders, golden yellow accent), the critical "pop" physics rules - all interactive elements and cards need a solid 2-3px black border, hard shadows with no blur (shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]) with a press-down hover effect that removes the shadow while translating the element, and generously rounded corners (rounded-xl/rounded-2xl) - typography guidance (bold lowercase sans-serif headings, clean readable body text), and component specifications for buttons (yellow background, black border, hard shadow, pill/rect shape), inputs (white background, thick black border, shadow only on focus), and cards (white background, thick border, hard shadow). It's parameterized by a project description slot usable for any product (SaaS landing page, fintech dashboard, portfolio site, e-commerce product page).
When to use - and when NOT to
Use this prompt when generating a distinctive, non-generic web interface - building a landing page, dashboard, portfolio, or product page in the Soft Neo-Brutalism style with hard drop shadows, thick black borders, and a cream/yellow/black palette, or replicating the press-down hover interaction across buttons and cards.
It does not produce a standard corporate or minimalist design system - it is intentionally opinionated toward the chubby, high-contrast, sticker-like Neo-Brutalism aesthetic and should not be used when a conventional, subdued design is wanted.
Inputs and outputs
Inputs are a project description (e.g. "landing page for a SaaS product", "dashboard for a fintech app") slotted into the task instruction. Outputs are HTML/Tailwind or React code following the design system, for example the button component spec:
<button class="bg-[#FCD34D] border-2 border-black rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none px-6 py-3 font-bold">
get started
</button>
Other outputs include card and input components with matching border/shadow treatment, a cream/white/black/yellow color palette applied consistently, and bold lowercase heading typography, all assembled into the requested page type.
Who it's for
Designers and developers building a distinctive web interface who want the Soft Neo-Brutalism look-and-feel generated consistently rather than a generic AI-default design.
Source README
Web Design in Soft Neo-Brutalism Style
Code with vibes like a professional web designer: a prompt for creating stylish web applications with neo-brutalism elements. It produces websites with modern interfaces that don't look like typical AI design. Works for any service or product.
Prompt
### ROLE:
Act as a Senior UI Engineer and Designer specializing in "Soft Neo-Brutalism."
### DESIGN SYSTEM INSTRUCTIONS:
You are to generate code (HTML/Tailwind CSS or React) using the following strict visual guidelines. Do not deviate to "standard" corporate design.
1. **Core Philosophy:** "Chubby," tactile, playful, and high-contrast. Everything looks like a sticker or a physical card.
2. **Color Palette:**
* Page Background: Cream/Off-White (`bg-[#FFFEF9]`)
* Surface/Cards: White (`bg-white`)
* Primary Text/Borders: Black (`text-black`, `border-black`)
* Accent/Brand: Golden Yellow (`bg-[#FCD34D]` or similar)
3. **The "Pop" Physics (CRITICAL):**
* **Borders:** ALL interactive elements and cards must have `border-2` or `border-3` solid black.
* **Shadows:** Use HARD shadows with NO blur.
* *Tailwind class:* `shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`
* *Hover effect:* `hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none` (press-down effect).
* **Corners:** Rounding must be significant. Use `rounded-xl` or `rounded-2xl`.
4. **Typography:**
* Headings: Bold, Sans-Serif (e.g., Inter/Jakarta). Use lowercase for main display titles.
* Body: Clean Sans-Serif, high readability.
5. **Components:**
* **Buttons:** Yellow background, black border, hard shadow, rounded pill or rect.
* **Inputs:** White background, thick black border, no shadow until focus.
* **Cards:** White background, thick border, hard shadow.
### TASK:
Create a [your project description] using this design system.
Usage Example
Replace [your project description] with a specific description, for example:
- "landing page for a SaaS product"
- "dashboard for a fintech app"
- "portfolio website"
- "e-commerce product page"
Key Style Features
- Tactility: All elements look like physical objects
- High Contrast: Black borders on light backgrounds
- "Pop" Effect: Hard shadows without blur create a sense of depth
- Rounded Corners: Generous rounding for softness
- Yellow Accent: Golden yellow color for key elements
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.