DESIGN SYSTEM
恋愛シミュレーション
01 / Palette
02 / Typography
03 / Spacing
04 / Choices
Interactive story choices with glow effects on hover. Each choice leads to different story branches.
05 / Forms
06 / Characters
Childhood Friend
Your neighbor since elementary school. Reliable and kind, but hides a secret passion for writing poetry.
Student Council President
The school's perfect student - top grades, elegant, and seemingly unapproachable. But is that really who she is?
Transfer Student
Mysterious and brooding, he arrived mid-semester with no explanation. His past seems to be catching up with him.
07 / Dialog
The signature visual novel dialog box with semi-transparent blur, nameplate accent, and text continuation indicator.
I've been meaning to tell you something... something important. Ever since that day at the festival, I haven't been able to stop thinking about what you said.
You shouldn't have come here. This place... it's not safe. If they find out you're looking for the truth, there's no telling what they'll do.
08 / Status
09 / Philosophy
Use soft bokeh backgrounds, falling petals, and dreamy gradients to create an immersive, romantic atmosphere that draws players into the story.
Dialog boxes must prioritize readability with high contrast text, comfortable line spacing, and semi-transparent backgrounds that don't obscure character art.
Choice buttons should be visually distinct with hover states that indicate interactivity. Players should never be confused about what's clickable.
Every UI element should enhance, not compete with, character portraits. The characters are the stars - the interface supports their story.
The color system supports both romantic (soft pastels) and dramatic/mystery (deep darks with crimson accents) story tones through CSS variables.
Affection meters, route indicators, and ending badges give players clear feedback about their progress and unlock status without spoiling the story.