JRPG

STYLEKIT_STYLE_REFERENCE
style_name: JRPG
style_slug: jrpg
style_source: /styles/jrpg

# 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

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.

---

# JRPG Design System

> 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.

## Design 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.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-blue-700
Radius: rounded-md
```

### Shadow
```
sm: shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_1px_2px_rgba(0,0,0,0.3)]
md: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_2px_4px_rgba(0,0,0,0.5)]
lg: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_4px_12px_rgba(0,0,0,0.6)]
hover: shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_4px_8px_rgba(0,0,0,0.4)]
focus: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_0_2px_rgba(30,64,175,0.4)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:brightness-110
Hover opacity: (none)
Transition: transition-all duration-200
Active: active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]
```

### Typefaces
```
Heading: font-bold
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-3xl md:text-5xl lg:text-7xl
H1: text-2xl md:text-4xl
H2: text-xl md:text-2xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-12 md:py-20
Container: px-4 md:px-8
Card: p-4 md:p-6
Gap sm: gap-3
Gap md: gap-4
Gap lg: gap-6
```

### Color roles
```
Background primary: bg-[#0f172a]
Background secondary: bg-slate-900
Background accent: bg-[#1e40af], bg-[#fbbf24], bg-[#22c55e]
Text primary: text-[#f0f9ff]
Text secondary: text-[#fbbf24]
Text muted: text-blue-300/60
Button primary: bg-gradient-to-b from-blue-700 to-blue-900 text-[#f0f9ff]
Button secondary: bg-slate-900/80 text-blue-300 border-2 border-blue-400/60
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-white`
- `bg-gray-50`
- `bg-slate-50`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `rounded-full`
- `rounded-3xl`
- `border-0`

### Banned patterns
- matches `^bg-white`
- matches `^bg-gray-[1-3]`
- matches `^bg-slate-[1-3]`
- matches `^shadow-(?!\[)`
- matches `^rounded-full`
- matches `^rounded-3xl`

### Why they are banned
- `bg-white`: JRPG uses dark navy backgrounds only
- `shadow-md`: Use inset/beveled shadows: shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]
- `rounded-full`: RPG buttons use subtle rounding (rounded-md max)
- `border-0`: JRPG panels require visible borders for the menu box aesthetic

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
px-6 py-3
rounded-md
font-bold
tracking-wide
border-2
transition-all duration-200
```

### Every card must include
```
bg-gradient-to-b from-slate-800 to-slate-900
border-2 border-blue-700
rounded-md
ring-1 ring-blue-400/20
```

### Every input must include
```
bg-slate-900
border-2 border-blue-700
rounded-md
text-[#f0f9ff]
focus:border-blue-400
focus:ring-1 focus:ring-blue-400/30
shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]
```

---

## [COMPARE] JRPG wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="px-6 py-3 rounded-md font-bold tracking-wide border-2 transition-all duration-200 bg-gradient-to-b from-blue-700 to-blue-900 text-[#f0f9ff]">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-blue-700 rounded-md ring-1 ring-blue-400/20 p-4 md:p-6">
 <h3 class="font-bold text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-slate-900 border-2 border-blue-700 rounded-md text-[#f0f9ff] focus:border-blue-400 focus:ring-1 focus:ring-blue-400/30 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] JRPG page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#0f172a] text-[#f0f9ff] border-2 border-blue-700 px-4 md:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-4">
 <a href="/" class="font-bold text-lg md:text-xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 font-sans text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#1e40af] text-[#f0f9ff] py-12 md:py-20 px-4 md:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-bold text-3xl md:text-5xl lg:text-7xl">
 {HEADLINE}
 </h1>
 <p class="font-sans text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="px-6 py-3 rounded-md font-bold tracking-wide border-2 transition-all duration-200 bg-gradient-to-b from-blue-700 to-blue-900 text-[#f0f9ff]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#0f172a] text-[#f0f9ff] py-12 md:py-20 px-4 md:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-bold text-xl md:text-2xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <!-- Card template - repeat for each card -->
 <div class="bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-blue-700 rounded-md ring-1 ring-blue-400/20 p-4 md:p-6">
 <h3 class="font-bold text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-sans text-sm md:text-base text-blue-300/60">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-slate-900 border-2 border-blue-700 rounded-md text-[#f0f9ff] focus:border-blue-400 focus:ring-1 focus:ring-blue-400/30 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-slate-900 text-[#fbbf24] py-12 md:py-20 px-4 md:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div>
 <span class="font-bold text-lg md:text-xl">{LOGO_TEXT}</span>
 <p class="font-sans text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-bold text-lg md:text-xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] JRPG post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `px-6 py-3 rounded-md font-bold tracking-wide border-2 transition-all duration-200`
- [ ] Card includes: `bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-blue-700 rounded-md ring-1 ring-blue-400/20`
- [ ] Input includes: `bg-slate-900 border-2 border-blue-700 rounded-md text-[#f0f9ff] focus:border-blue-400 focus:ring-1 focus:ring-blue-400/30 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`

### Forbidden check
- [ ] Not using `bg-white`
- [ ] Not using `bg-gray-50`
- [ ] Not using `bg-slate-50`
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `rounded-full`
- [ ] Not using `rounded-3xl`

### Style rule check
- [ ] 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

### Style drift check
- [ ] Does not violate: No minimalist flat style (no borders, no shadows)
- [ ] Does not violate: No white or light backgrounds
- [ ] Does not violate: No modern sans-serif fonts only (must pair with serif or pixel fonts)
- [ ] Does not violate: No overly rounded rounded-full buttons
- [ ] Does not violate: No transparent/borderless panels

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as JRPG

---

## [EXAMPLES] Example prompts

### 1. 

 RPG 

```
Create a character status screen using JRPG style:
- Dark navy background with gradient
- Character info panel with gold title and corner decorations
- HP/MP/EXP stat bars with colored gradients
- Equipment slots with beveled borders
- Action buttons with inset shadow depth
- Stats grid showing STR, DEF, INT, SPD values
```

## Absolute Bans (Match and Refuse)

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

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

## 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
- [ ] 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