Pixel Anime

STYLEKIT_STYLE_REFERENCE
style_name: Pixel Anime
style_slug: pixel-anime
style_source: /styles/pixel-anime

# 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 Pixel Anime design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Smooth gradients (linear-gradient, radial-gradient for decoration)
- Rounded corners (rounded-lg, rounded-xl, rounded-full)
- Blur effects (blur, backdrop-blur)
- Serif fonts
- Soft shadows (shadow-sm, shadow-md, shadow-lg, shadow-xl)

## Must Follow

- Dark purple background: bg-[#2d1b69] as primary, bg-[#1a1040] as secondary
- RPG dialogue box frames with 2-4px borders and corner block decorations
- HP/MP/EXP status bar UI elements with flat color fills
- Hard offset pixel shadows: shadow-[4px_4px_0px_#1a1040]
- Monospace font: font-mono for ALL text
- Bold 2px borders: border-2 border-[#1a1040]
- Flat colors only, no gradients
- Step-based hover: hover:translate-x-[2px] hover:translate-y-[2px]
- Linear easing: ease-linear, duration-75

## Color Palette (NES-inspired)

Primary:
- Pixel Blue: #4a90d9
- Dark Purple: #2d1b69
- Deep Dark: #1a1040
- Pixel Red: #ff6b6b
- Pixel Gold: #ffd93d
- Pixel Green: #50c878
- Light Text: #e0e0ff

## Unique Elements

- RPG dialogue box frame with corner block decorations
- HP/MP/EXP status bar progress indicators
- Pixel-grid background pattern (8px grid)
- Blinking pixel arrow cursor/continue indicators
- Step-based pixel-aligned hover translations

## Animation & Interaction Rules

- Framerate Drop: All transitions must use duration-75 ease-linear to simulate 15fps GBA/NDS-era animation. Never use ease-in-out or smooth bezier curves -- pixel animations are abrupt state changes.
- Blocky Aura: Hover glow must use multi-directional hard-edge colored shadows with zero blur. No blur() or drop-shadow() ever.
- Anime Action: Button active state applies squash-and-stretch: active:scale-x-110 active:scale-y-90 -- Japanese animation physics on press, not a translate drop.
- Corner Blink: Card corner pixel squares must use group-hover:animate-pulse to simulate idle game UI animation. Never animate in non-hover state -- blink only when the player's cursor is over the card.

## Absolute Bans (Match and Refuse)

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

- use smooth gradients (linear-gradient, radial-gradient)
- use rounded corners (rounded-lg/xl/full)
- use blur effects (blur, backdrop-blur)
- use serif fonts
- use soft shadows (shadow-sm/md/lg/xl)
- use ease-in-out or ease curves -- only ease-linear or transition-none (pixel animations are abrupt, not organic)
- use blurred glow shadows for the Blocky Aura effect -- zero blur is mandatory for 8-bit authenticity
- trigger Corner Blink animation outside of group-hover state -- idle blinking on load creates visual noise

## 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
- [ ] never use smooth gradients (linear-gradient, radial-gradient)
- [ ] never use rounded corners (rounded-lg/xl/full)
- [ ] never use blur effects (blur, backdrop-blur)
- [ ] never use serif fonts
- [ ] never use soft shadows (shadow-sm/md/lg/xl)