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.

Example of design in Soft Neo-Brutalism style

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

Comments (0)

Sign In Sign in to leave a comment.