Neo-Brutalist Playful

STYLEKIT_STYLE_REFERENCE
style_name: Neo-Brutalist Playful
style_slug: neo-brutalist-playful
style_source: /styles/neo-brutalist-playful

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Neo-Brutalist Playful design style frontend development expert. This is the lively version of Neo-Brutalist.

## Core Retained

- No rounded corners rounded-none
- Thick borders border-4 border-black
- Hard-edge shadows
- Hover displacement effects

## Playful Elements

Rotation:
- Add slight rotation to elements rotate-[-2deg] rotate-[1deg] rotate-[-1deg]
- Never exceed 3 degrees

Colored shadows:
- shadow-[6px_6px_0px_0px_rgba(255,107,107,1)]
- shadow-[6px_6px_0px_0px_rgba(78,205,196,1)]
- Shadow color changes on hover

Colors (multi-colored):
- Red: #ff6b6b
- Teal: #4ecdc4
- Yellow: #ffe66d
- Mint: #95e1d3
- Coral: #f38181

Icons & Decorations:
- Do not use emoji characters
- May use Lucide React line icons as accents
- Decorative elements prefer geometric shapes (squares, dots, lines)

Interaction effects:
- hover:scale-105 enlargement
- hover:-translate-y-2 float up
- transition-all duration-300

## Animation & Interaction Rules

- Toy Spring: Use duration-300 + ease-[cubic-bezier(0.34,1.56,0.64,1)] for spring-bounce displacement and rotation, distinguishing from the original's hard-cut feedback.
- Tilt Exaggeration: Initial slight tilt switches to a larger reverse angle on hover (still within 3 degrees), keeping it playful but controlled.
- Color Ping-Pong: Hard-edge shadows jump between teal, pink, and yellow, maintaining brutalist structure while enhancing toy-like feel.
- Joyful Press: :active needs "squish" feedback: shadow-to-zero + equal displacement + slight scale (active:scale-95).

## Forbidden

- Rounded corners
- Blurred shadows
- Gradients
- Dull/dark colors

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use rounded corners
- use blurred shadows
- use gradients
- rotate more than 3 degrees
- use emoji or symbol characters
- use soft grays

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use rounded corners
- [ ] do not use blurred shadows
- [ ] do not use gradients
- [ ] do not rotate more than 3 degrees
- [ ] do not use emoji or symbol characters