PixelAnime
PaletteComponentsAI RulesDo/Don't
< StyleKit
>JRPG // 8-BIT // NES PALETTE>

PIXEL

ANIME

CLASSIC JRPG MEETS 8-BIT ANIME AESTHETICS

40+
STYLES
120+
COMPONENTS
4
AI RULES
MAX
LEVEL
> NES COLOR PALETTE

COLOR SYSTEM

Limited NES-inspired palette with bold primaries on deep purple backgrounds. Every color has a pixel-authentic purpose.

PIXEL BLUE
#4a90d9
Primary
DARK PURPLE
#2d1b69
Background
DEEP DARK
#1a1040
Surface
PIXEL RED
#ff6b6b
Accent 1
PIXEL GOLD
#ffd93d
Accent 2
PIXEL GREEN
#50c878
Accent 3

> PALETTE RULES

bg-[#2d1b69] as primary background
bg-[#1a1040] for surface / dialogue boxes
border-[#4a90d9] 2px solid — all containers
shadow-[4px_4px_0px_#1a1040] hard pixel depth
> ITEM SELECT

COMPONENT GALLERY

All components use monospace fonts, hard pixel shadows, step-based hover interactions, and NES-palette colors. No rounded corners. No blur. No gradients.

RPG ACTION BUTTONS — BLOCKY AURA + ANIME ACTION

SIZE VARIANTS — MONOSPACE ONLY

STATE VARIANTS

> AI DESIGN RULES

INTERACTION PHYSICS

Four named interaction rules from the AI design spec. Each demo lets you feel the rule in action. Interact with every element.

RULE 01

FRAMERATE DROP

duration-75 ease-linear — simulates 15fps GBA/NDS animation cadence. Abrupt state changes, not organic curves.

CLICK TO ANIMATE THE PIXEL SPRITE:

PIXEL MODE: Abrupt snap — authentic 8-bit feel

CORRECT: duration-75 ease-linear
WRONG: ease-in-out, cubic-bezier
RULE 02

BLOCKY AURA

Hard-edge multi-directional colored shadows, zero blur. hover:shadow-[4px_4px_0_#ffd93d,-2px_-2px_0_#ffd93d]

Hover the button to activate Blocky Aura

CORRECT (HARD)

shadow-[4px_4px_0_#ffd93d,-2px_-2px_0_#ffd93d]

WRONG (BLURRED)

blur glow — breaks 8-bit authenticity

RULE 03

ANIME ACTION

active:scale-x-110 active:scale-y-90 — squash-and-stretch on press. Classic Japanese animation physics, not a translate drop.

CLICK THE BUTTON — FEEL THE SQUASH:

CORRECT

active:scale-x-110
active:scale-y-90

WRONG

active:scale-95
(no squash-stretch)
RULE 04

CORNER BLINK

group-hover:animate-pulse on corner pixel squares — simulates idle game UI standby animation. Never animate in non-hover state.

HOVER EACH CARD TO TRIGGER CORNER BLINK:

CHEST A

HOVER ME

CHEST B

HOVER ME

CHEST C

HOVER ME

CHEST D

HOVER ME

CORRECT: group-hover:animate-pulse
WRONG: animate-pulse without group-hover (visual noise)
> BATTLE SYSTEM

RPG BATTLE UI

A fully interactive JRPG battle scene showcasing HP/MP/EXP bars, dialogue boxes, action menus, and party management panels.

BATTLE SCENETURN 07

SHADOW DRAGON

HP
780/1200
ACTION MENU — SELECT COMMAND

QUEST LOG

>RETRIEVE THE CRYSTAL ORB
2400 EXPACTIVE
DEFEAT THE SHADOW DRAGON
8000 EXPPENDING
RESCUE THE VILLAGE ELDER
1200 EXPCOMPLETE
FIND THE LOST TOME
3600 EXPPENDING

PARTY STATUS

LIVE STATUS BARS

HP SLIDER280/400
HP
280/400
MP SLIDER160/300
MP
160/300
> DESIGN CODEX

DO & DON'T

Strict rules define the Pixel Anime aesthetic. Every element must conform to these constraints to maintain 8-bit authenticity.

[]

RPG DIALOGUE BOXES

Window frames with chunky 2-4px borders and corner block decorations. References Final Fantasy and Dragon Quest menu systems.

  • border-2 border-[#4a90d9]
  • Corner 12px block squares
  • shadow-[4px_4px_0px_#1a1040]
##

HP/MP/EXP BARS

Status bars with pixel-precise flat color fills and bordered containers. No gradients. Solid NES-palette fills only.

  • Flat fill — no gradient
  • border-2 bordered container
  • h-[8-10px] precise height
//

PIXEL DEPTH

All depth created through hard offset shadows at 4px x 4px. Zero blur radius. Step-based hover translations in 2px increments.

  • shadow-[4px_4px_0px_...]
  • hover:translate-x-[2px]
  • Zero blur at all times
OK

DO

  • Use RPG dialogue box frames with 4px borders and corner block decorations
  • Include HP/MP/EXP status bar UI elements with flat fills
  • Apply hard offset shadows (4px_4px_0px) for pixel depth
  • Use monospace font exclusively for all text
  • Keep interactions step-based (translate in 2px increments)
  • Use NES-palette: blue #4a90d9, red #ff6b6b, gold #ffd93d, green #50c878
  • Add pixel corner block decorations on major containers
  • Use duration-75 ease-linear for all transitions (15fps simulation)
  • Apply Blocky Aura: hard multi-directional shadow with zero blur
  • Add Anime Action: active:scale-x-110 active:scale-y-90
  • Trigger Corner Blink only inside group-hover state
NO

DON'T

  • 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 — monospace only
  • Never use soft shadows (shadow-sm/md/lg/xl)
  • Never use ease-in-out or smooth bezier curves anywhere
  • Never use blurred glow shadows for Blocky Aura (zero blur mandatory)
  • Never trigger Corner Blink outside group-hover state
  • Never use proportional scale (always squash-stretch separately)
  • Never animate corners in non-hover state (visual noise on idle)
  • Never deviate from NES palette to soft pastels or neons
PixelAnime

Classic JRPG game UI merged with pixel-art anime aesthetics. Every element belongs in a 16-bit RPG menu screen.

STYLE> Documentation> Showcase> Cover
STYLEKIT> Home> All Styles
NES PALETTE
#4a90d9
#2d1b69
#1a1040
#ff6b6b
#ffd93d
#50c878
>STYLEKIT // PIXEL ANIME STYLE // NES PALETTE
< BACK TO STYLEKIT