JRPG

# Visual style: JRPG

Classic Japanese RPG menu and dialogue box aesthetics with beveled borders, gradient backgrounds, status bars, and ornate frames. Ideal for game interfaces, interactive narratives, and fantasy-style products.

## Philosophy
JRPG style descends from the menu screens of 16-bit and 32-bit Japanese role-playing games -- the era when Final Fantasy, Dragon Quest and Chrono Trigger turned a simple status screen into a piece of worldbuilding. Every panel was carved, gilded and lit like an artifact from the game's own universe.

The look is built from a handful of deliberate choices: a deep navy field (#0f172a to #1e293b) that reads as night sky or dungeon stone, beveled frames that catch light on the top-left and fall into shadow on the bottom-right, and a two-color accent system -- gold #fbbf24 for anything the player can act on, crystal white #f0f9ff for anything the player must read.

Core principles:
- Beveled depth: No flat surfaces. Panels and buttons use paired inset shadows, light from the top-left and dark from the bottom-right, so every element reads as a physical plate with thickness
- Layered panels: Vertical ramps from slate-800 to slate-900 give large surfaces a subtle sheen, the way a backlit screen renders depth without any texture art
- Ornamental framing: Corner caps, double borders and hairline inner strokes turn a plain container into a framed window
- Status-driven color: HP, MP and EXP bars each own a color ramp (red-amber, blue-cyan, green-lime) so state is legible before a single number is read
- Textured restraint: Grain or scanline layers stay at low opacity in the background, so the interface never fights the numbers

Applying it to modern interfaces means treating every card as a menu entry and every action as a command: buttons click like a selection cursor landing, modals open with a short vertical wipe instead of a fade, and focus states glow gold rather than turning blue. Typography usually pairs a pixel or blocky display face for headers with a clean sans for body copy -- the display face carries the nostalgia, the sans keeps long text readable.

Suitable for: game UI and launcher screens, retro-gaming storefronts and wikis, achievement and leaderboard dashboards, esports overlays, and any product that wants the weight of a 90s adventure menu without becoming unreadable.

## Do
- Use deep navy blue backgrounds bg-[#0f172a] or bg-slate-900
- Use border-2 border-[#1e40af] with inset shadows for beveled effect
- Gold highlight text text-[#fbbf24] for titles and important info
- Use gradient backgrounds bg-gradient-to-b from-blue-900 to-slate-900
- Status bars use bg-[#22c55e] for HP, bg-blue-500 for MP
- Card panels use double-layer borders ring-1 ring-blue-400/20 border-2 border-blue-800
- Buttons use inset shadow shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] for raised effect
- Menu interactions use hard-cut feedback (duration-75 to 120) simulating controller selection rhythm

## Don't
- No minimalist flat style (no borders, no shadows)
- No white or light backgrounds
- No modern sans-serif fonts only (must pair with serif or pixel fonts)
- No overly rounded rounded-full buttons
- No transparent/borderless panels
- No low-contrast color combinations
- No slow web-style transitions (duration-300+) that dilute game menu feel

## Rules for the AI
STYLE: JRPG
TYPE: Classic Japanese RPG menu interface

MUST USE:
- Dark background: bg-[#0f172a] or bg-slate-900
- Beveled borders: border-2 with inset shadows
- Gold accent text: text-[#fbbf24]
- Crystal white text: text-[#f0f9ff]
- Gradient panels: bg-gradient-to-b from-slate-800 to-slate-900
- HP/MP bars with colored gradients
- Corner decorations on panels
- Shadow depth: shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]

MUST AVOID:
- White/light backgrounds
- Flat minimal design without borders
- Modern sans-serif only typography
- rounded-full buttons
- Transparent/borderless panels
- Low contrast color combinations

COLOR RULES:
- Primary: Royal Blue (#1e40af)
- Accent: Gold (#fbbf24)
- Background: Dark Navy (#0f172a)
- Text: Crystal White (#f0f9ff)
- HP: Green (#22c55e)
- MP: Blue (#3b82f6)
- Borders: Blue shades with glow

SPECIAL EFFECTS:
- Inset shadows for beveled/raised look
- Corner ornaments on panels
- Gradient overlays for depth
- Stat bar animations

Animation & Interaction Rules:
- Cursor Snap: Interaction feedback prioritizes hard-cut, using duration-75 to 120, simulating D-pad menu item selection.
- Retro Confirm Press: Active must have key press-down feel (scale + translate-y + inset shadow switch).
- Menu Hover State: Hover lights up gold border or highlight bar, maintaining high-contrast confirmation feedback.
- Flashing Prompts: Prompt labels can use lightweight pulse, avoiding large-area animations that interfere with readouts.