StyleKit →
Style日式RPG
Docs

StyleKit Design System

JRPG

日本語ロールプレイング

Classic JRPG menu and dialog UI — bevel borders with deep shadow, deep navy backgrounds, gold highlights, HP/MP status bars, ornate corner decorations, and the timeless fantasy aesthetic.

Party StatusLV MAX: 99
AriaWhite Mage
LV 24
HP312/420
MP198/240
ZephyrDark Knight
LV 26
HP478/520
MP88/160
LumiSummoner
LV 22
HP224/380
MP310/360

System — UI

Menu System

Hover or click to move the cursor

Command
Selected
⚔

Battle

Option 1 of 5

Initiate combat. Choose your party action: Attack, Defend, Magic, or Item. Turn-based combat resolves by speed stat.

Implementation Notes

  • ◆Gold cursor ▶ uses pure JS activeMenu state — no CSS animation
  • ◆Active bg: bg-[#1e40af]/40 — royal blue tint
  • ◆Dividers: 1px border-[#1e40af]/30 between rows
  • ◆Transition duration-75 ease-linear for JRPG snap feel

Party — Stats

Character Status

A
Portrait

Aria

LV 24

White Mage

Vital Statistics

HP312/420
MP198/240
EXP4850/6000

1150 to next level

HP Status

NORMAL

MP Status

STABLE

Battle Parameters

ATK48
DEF72
MAG110
SPD64

Element Resist

FireIceLitWind

Design — Tokens

Color System

#0f172a

Deep Navy

Background

#1e40af

Royal Blue

Primary Panel

#fbbf24

Gold

Accent / Cursor

#f0f9ff

Crystal White

Text / Highlight

#22c55e

HP Green

HP Bar

#3b82f6

MP Blue

MP Bar

#ef4444

Danger Red

Critical / Low HP

Usage Principles

◆Gold #fbbf24 is reserved exclusively for cursor, active states, and highlight text. Never use for body copy.
◆HP green #22c55e indicates health and positive status only. When HP falls below 25%, switch to danger red #ef4444.
◆MP blue #3b82f6 represents magical resource. Panel borders use royal blue #1e40af at full opacity, not the brighter shade.

Elements — UI

Component Showcase

Button Variants

Gold / Action
Primary / Select
Cancel / Back

All buttons: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_4px_0_rgba(0,0,0,0.8)] + active:translate-y-[4px] at duration-75 ease-linear

Input Field — RPG Frame

Focus ring: border-[#fbbf24] transition-colors duration-150. Corner ornaments remain gold on both states. bg-[#0f172a] inner background.

Item Rarity Tags

Click a rarity to highlight — tracks activeRarity state

Common
Rare
Epic
Legendary

Tutorial — Guide

Design Rules

Tutorial: Do
▶Recommended Practices
  • ◆Use bevel button shadows: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 0 rgba(0,0,0,0.8)
  • ◆Deep navy bg-[#0f172a] on all panels and the page background
  • ◆Gold #fbbf24 for cursor arrow, highlights, and active state indicators
  • ◆Double border: border-2 border-[#1e40af] with ring-1 ring-blue-400/20
  • ◆Corner ornaments: absolute divs with gold border-t-2 border-l-2 at all four corners
  • ◆font-mono for stat numbers, tracking-widest uppercase for section labels
PRESS ▶ TO CONTINUE6 entries
Warning: Avoid
!Common Mistakes
  • ✕Never use bright or pastel backgrounds — JRPG panels live in deep navy darkness
  • ✕Never omit corner decorations — they define the ornate fantasy frame
  • ✕Never use rounded-full for panels — use sharp corners (rounded-none or rounded-sm)
  • ✕Never use sans-serif body weight for stat values — always font-mono
  • ✕Never use thin borders (border) — use border-2 for panel definition
  • ✕Never animate with slow transitions — button press should be duration-75 for snap feel
HEED THESE WARNINGS6 entries

Design Philosophy

JRPG UI is defined by the tension between ornate decoration and extreme clarity. Every element must feel as if it belongs inside a 16-bit or 32-bit game engine — bevel shadows that suggest depth on a flat screen, gold accents that whisper of treasure and legend, and monospace fonts that communicate data with military precision. The darkness of the navy background makes every gold highlight shine like starlight on a crystal cave wall.

GAME OVER

— Press Start to Continue —

Navigation

  • ▶All Styles
  • ▶StyleKit
  • ▶JRPG Docs

Sections

  • ▶Menu
  • ▶Status
  • ▶Colors
  • ▶Components
  • ▶Rules

Party Stats

  • ★Aria — LV 24
  • ★Zephyr — LV 26
  • ★Lumi — LV 22

Design Tokens

  • #0f172a
  • #1e40af
  • #fbbf24
  • #f0f9ff
© 2025 StyleKit Guild — All Rights Reserved日式RPG Design SystemVersion 1.0.0