JRPG Menu System

A Design System for Classic RPG Interfaces

I

Color Palette

Classic JRPG color scheme featuring deep blue menu gradients, golden accents, and status-specific colors for HP, MP, and effects.

Menu Colors

Menu Dark
#0a0a2e
Menu Mid
#1a1a4e
Menu Light
#2a2a6e
Menu Purple
#3a2a5e

Gold Accents

Gold Bright
#ffd700
Gold Mid
#daa520
Gold Dark
#b8860b
Bronze
#cd7f32

Status Colors

HP Green
#22cc44
HP Warning
#ddcc00
HP Critical
#dd3322
MP Blue
#4488ff
II

Typography

RPG-styled fonts with fantasy flair, drop shadows for readability against gradient backgrounds, and clear hierarchy for menu navigation.

Display / Cinzel / 40px
Final Quest
Heading / Cinzel / 32px
Equipment
Subheading / Cinzel / 24px
Character Status
Fantasy / MedievalSharp / 20px
The adventure continues...
Body / Quattrocento Sans / 16px
A legendary sword forged in the flames of Mount Doom. Increases ATK by 50 and grants Fire elemental damage.
Small / Quattrocento Sans / 14px
Potion x99 | Gold: 12,500 | Play Time: 45:32
III

Spacing System

A 4px-based scale for pixel-perfect alignment, maintaining the crisp feel of classic 16-bit RPG interfaces.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
IV

Buttons

Menu-style buttons with ornate borders and animated cursor indicators. Hover states reveal golden highlights.

Button Variants

With Cursor Indicator

Sizes

V

Form Elements

Input fields and controls styled for item quantity selection, character naming, and configuration screens.

Quantity Selector

Potion
x 500 Gil
VI

Cards / Menu Windows

Ornate bordered containers that serve as the foundation for all JRPG menu interfaces. Features corner decorations and gradient backgrounds.

Status LV 45
C
Cloud Strife
Soldier 1st Class
HP
2890/3400
MP
186/310
Items 24/99
  • Potion x 15
  • Hi-Potion x 8
  • Ether x 5
  • Phoenix Down x 3
  • Elixir x 0
Equipment
R
Right Hand
Buster Sword
L
Left Hand
Crystal Shield
H
Head
Mythril Helm
B
Body
Dragon Mail

Dialog Box

The legendary crystal has been shattered. You must journey to the four corners of the world to restore its power before darkness consumes everything...

Press A to continue
VII

Data Tables

Character statistics and equipment comparison tables with clear value highlighting and modifier indicators.

Stat Base Bonus Total
Strength 85 +15 100
Vitality 72 +8 80
Magic 45 -5 40
Spirit 50 - 50
Dexterity 68 +12 80
Luck 55 - 55
VIII

Badges

Status effects, elemental types, and item rarity indicators with distinctive colors and iconography.

Elements

Fire Ice Thunder Earth Wind Holy Dark

Status Effects

Poison Haste Protect Slow Curse

Item Rarity

Common Rare Epic Legendary
VIII-B

HP/MP Bars

Animated stat bars with warning states and critical flashing effects.

HP
Full
HP
Warning
HP
Critical!
MP
720/1000
EXP
To Next Lv
IX

Design Principles

Core guidelines for creating authentic JRPG menu interfaces.

Ornate Borders

Multi-layer borders with beveled edges create the classic menu window look. Use corner decorations and golden accents for headers and important elements.

Gradient Depth

Blue-to-dark gradients give menus a sense of depth and dimensionality. The darker bottom edge grounds the interface while the lighter top draws the eye.

Text Shadows

Drop shadows on text ensure readability against gradient backgrounds. Cream and white text with subtle shadows feels both legible and stylistically authentic.

Animated Cursors

The bouncing arrow cursor is iconic to JRPGs. Use smooth animations to indicate selection and guide player attention through menu navigation.

Status at a Glance

HP and MP bars with color-coded warning states let players quickly assess their party condition. Red flashing for critical health creates urgency.

Nostalgic Typography

Fantasy-styled fonts for headers evoke the genre while clean body text maintains usability. Balance decorative flair with functional clarity.