Back to catalog
Web Design in Soft Neo-Brutalism Style
A prompt for creating stylish web applications with neo-brutalism elements — modern interface without typical AI design
Web Design in Soft Neo-Brutalism Style
Vibe-code like a professional web designer: a prompt for creating stylish web applications with neo-brutalism elements. It will make a website with a modern interface without typical AI design. Works when creating any service.

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 [описание вашего проекта] using this design system.
Usage Example
Replace [описание вашего проекта] 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
- Contrast: Black borders on light backgrounds
- "Pop" effect: Hard shadows without blur create a volume effect
- Rounded corners: Significant rounding for softness
- Yellow accent: Golden-yellow color for important elements
