Neo-Brutalist Design Prompts

Design a neo-brutalist portfolio website. All elements: 3px solid black borders, no border-radius, hard shadows (4px 4px 0px #000). Background: #ffffff. Accent colors: hot pink (#ff006e) and electric yellow (#ccff00). Typography: monospace for body, bold condensed sans-serif for headings. Layout: intentionally asymmetric grid, overlapping elements, rotated cards (-2 to 2 degrees). Navigation: brutalist text links with underline offset animation. Project cards with image, bold title, and raw HTML-style tags.

Build a neo-brutalist task manager using shadcn/ui with overridden styles. Override all components: border-radius to 0, borders to 2px solid black, shadows to '4px 4px 0px black'. Cards with yellow (#fbbf24) and pink (#f472b6) accent backgrounds. Buttons with black background, white text, and transform: translate(-2px, -2px) on hover with shadow change. Include: task list, add task form, priority tags (raw colored labels), and a drag-to-reorder interface.

Create a neo-brutalist blog in Next.js. Design tokens: border-width 3px, border-color black, border-radius 0, shadow '5px 5px 0px #000'. Implement a CSS utility .brutal-card that applies the standard brutalist treatment. Header: oversized site title with a colored highlight background. Post cards in a masonry grid with varying accent colors (rotate through: #ff006e, #ccff00, #00d9ff, #ff9500). Each card tilts slightly on hover. Code blocks with monospace font and a visible line-number gutter.

Generate a neo-brutalist React component library with TypeScript. Components: BrutalButton (variants: primary/secondary/danger, all with thick borders and hard shadows), BrutalCard (no radius, thick border, accent color strip at top), BrutalInput (thick bottom border only, monospace placeholder), BrutalBadge (inline-block, uppercase, small, colored background), BrutalModal (centered, thick border, no backdrop blur - use a solid color overlay instead). All interactive elements shift shadow on click (4px 4px to 2px 2px). Use Tailwind CSS.

Design a neo-brutalist product landing page for a budgeting app. Background #fef6e4, all blocks with 3px solid #000 borders, zero border-radius, shadow 6px 6px 0px #000. Hero: 96px uppercase condensed headline in #000, a sticker-style badge rotated -6deg in #ff006e with white text, and a CTA button in #ccff00 that shifts to 3px 3px shadow on press. Feature section: three cards in alternating #8ecae6, #ffb703, #ffffff backgrounds. Marquee strip of repeating text between sections. Footer as one giant bordered block. Body text 18px monospace; keep contrast at least 4.5:1 — never place #ccff00 text on white.

Build a neo-brutalist pricing page with shadcn/ui, overriding all radii to 0. Three tier cards with 3px black borders and 5px 5px 0px #000 shadows on a #f4f1ea background: Free on #ffffff, Pro on #ffde59 with a 'BEST DEAL' banner strip crossing the top corner at -4deg, Team on #a2d2ff. Prices in 56px black extra-bold; feature rows separated by 2px dashed black dividers with X or check glyphs. Billing toggle styled as a chunky physical switch (2px border, hard shadow, instant snap — no easing). Comparison table below with a solid black header row and white uppercase text. Focus states: 3px offset black outline for keyboard users.

Create a neo-brutalist habit tracker mobile UI in Next.js, mobile-first at 390px width. Palette: background #fffbeb, black #111111, accents #f97316 and #22d3ee. Every card: 2px solid black border, 4px 4px 0px #111 shadow, radius 0. Top bar: app name in 24px uppercase monospace with a hand-drawn-style underline SVG. Habit cards as a vertical stack with 16px gaps; tapping toggles a fat 28px checkbox that fills black with a white check, no transition (instant, mechanical). Streak counter in a rotated 3deg badge. Bottom tab bar: 4 equal cells divided by 2px black rules, active cell inverted to black/white. Touch targets minimum 48px.

Generate a neo-brutalist documentation site in React with TypeScript. Layout: fixed 260px sidebar with a 3px black right border on #e9ff70 background, nav links as uppercase monospace 14px with a solid black square marker for the active page. Content area on #ffffff, max-w-3xl, headings with #ff006e highlight bars behind them. Code blocks: #111111 background, #ccff00 monospace text, 3px black border, 5px 5px 0px #ff006e shadow, and a bordered COPY button top-right. Tables with 2px black borders on every cell. Blockquote-style callouts on #8ecae6 with a bold 'NOTE:' prefix. Skip-to-content link and 3px black focus outlines for accessibility.