StyleKit →|Visual Novel
▶hero▶dialog▶chapters▶components▶palette▶rules
視覚小説
Chapter I

視覚小説風

ADV visual novel aesthetics — translucent dialog panels, character nameplates, ornate corner frames, and atmospheric scene compositions.

Narrator
▼

"The sky burned amber as evening claimed the town. Two figures stood beneath the ancient cherry tree — their meeting, though neither knew it yet, would change the course of everything that followed..."

SCROLL
Section 01 — Story Branches

Chapter Selection

Choose a chapter to follow. Each path leads somewhere different.

"The story awaits. Which chapter will you open?"
Section 02 — Dialog System

ADV Dialog Box

The core ADV interface — bottom-anchored dialog panel with character nameplate, L-shaped corner decorations, and speaker switching.

SakuraThe Dreamer

"The cherry blossoms are beautiful this time of year... Every petal that falls carries a story of its own."

1 / 3
Sakura
▼

"The cherry blossoms are beautiful this time of year... Every petal that falls carries a story of its own."

Hana
▼

"I have seen a hundred towns just like this one. But this lantern light... there is something here I cannot name."

Kenji
▼

"Every document tells two stories: the one written in ink, and the one hidden in the margins."

Section 03 — Component Library

Component Showcase

All interactive elements styled to the visual novel aesthetic.

Choice Button — Primary Interaction
Section 04 — Color System

Palette

Five tones form the visual novel world — from deep slate through luminous indigo, pink, and emerald.

Primary
Slate
#4a5568
Primary — text, dark panels
Secondary
Light
#f7fafc
Secondary — bg, card fills
Accent A
Indigo
#6366f1
Accent A — primary UI
Accent B
Pink
#ec4899
Accent B — Hana character
Accent C
Emerald
#10b981
Accent C — Kenji character
Section 05 — Design Rules

The Tutorial

"Pay attention — these rules will serve you well on this journey."

DO
"These are the principles that keep the world coherent..."
  • Semi-transparent dialog panels: bg-[#1a202c]/85 backdrop-blur-md
  • L-shaped corner decorations using absolute-positioned spans
  • Character nameplates as colored badge strips — -top-4 left-6
  • Frosted glass choice buttons with shimmer on hover
  • Serif fonts (font-serif) for all in-world dialog text
  • Atmospheric gradients for scene backgrounds
  • Indigo accent (#6366f1) as the primary UI interaction color
DON'T
"...and these are the mistakes that break the immersion."
  • Never use flat white or solid opaque panels for dialog boxes
  • Never omit corner decorations on key interactive panels
  • Never use sans-serif fonts for in-world character dialog
  • Never use bright primary colors outside of the defined palette
  • Never use thick borders — 1px at 20–40% opacity only
  • Never animate choice buttons with aggressive scaling transforms
  • Never use drop shadows without specifying rgba with low opacity
FIN
To be continued...
Chapter I — Visual Novel // Interactive Storytelling // StyleKit
▶StyleKit|Visual Novel|#6366f1 / #ec4899 / #10b981