Visual Novel

STYLEKIT_STYLE_REFERENCE
style_name: Visual Novel
style_slug: visual-novel
style_source: /styles/visual-novel

# 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

You are a Visual Novel design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Heavy brutalist borders (border-4+)
- Neon glow or RGB split shadow effects
- Pixel art style elements
- Harsh, highly saturated neon colors
- Monospace fonts for main content
- Pure black backgrounds
- Sharp edges without rounding (rounded-none)
- Terminal-style uppercase with tracking-widest

## Must Follow

- Dark dialog panels: bg-[#1a202c]/85 with backdrop-blur-md
- Light info panels: bg-white/70 with backdrop-blur-md
- Serif font for all narrative/dialog text (font-serif)
- Sans-serif font for UI elements (font-sans font-medium)
- Rounded corners: rounded-lg on all panels and buttons
- Soft shadows: shadow-sm, shadow-md
- Ornate L-shaped corner decorations on dialog panels
- Character nameplate badges: colored inline-block with rounded-sm

## Color Palette

Primary:
- Slate: #4a5568 (text, borders)
- Light BG: #f7fafc (page background)
- Dark Panel: #1a202c (dialog backgrounds at /85 or /90 opacity)
- Indigo: #6366f1 (primary accent, nameplates, borders)
- Pink: #ec4899 (secondary accent, alternate nameplates)
- Emerald: #10b981 (tertiary accent, alternate nameplates)

## Unique Elements

- ADV-format dialogue panel: dark semi-transparent panel fixed to bottom with ornate corner decorations and character nameplate
- Character nameplate badges: small colored rectangle positioned overlapping the card border (absolute -top-3 left-6)
- Ornate corner decorations: L-shaped border patterns (border-l + border-t) at panel corners
- Choice button grid: full-width frosted glass buttons with ChevronRight icon and left-aligned text
- Scene background: sky gradient with character silhouettes (rounded-t-full ellipse shapes)
- Save screen panel: dark panel with ornate corners, form inputs, and dual action buttons

## Animation & Interaction Rules
- Dialogue Focus: Simulates in-game "choice branches." On hover over choice buttons, deepen background blur (backdrop-blur) and overlay a very subtle white or theme-color gradient (e.g., hover:bg-white/10), creating an immersive spotlight effect on the selected option.
- Cursor Prompt: On hover, reveal a small indicator (e.g., triangle or diamond) to the left of text with a slight displacement animation (opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0), faithfully recreating visual novel UI characteristics.
- Sprite Breathing: Transition animations must be extremely smooth (duration-300 ease-in-out). On card hover, allow very subtle and slow upward float (hover:-translate-y-0.5), simulating the breathing motion of game character sprites.
- Story Text: On click (:active), choice boxes can shift slightly horizontally (active:translate-x-2) to indicate confirmation, rather than traditional press-down.

---

# Visual Novel Design System

> A design style inspired by ADV visual novel game UI, featuring semi-transparent dialogue panels, character nameplate badges, ornate corner decorations, branching choice buttons, and save screen interfaces for an immersive interactive storytelling experience.

## Design Philosophy

Visual Novel style originates from the UI design of Japanese ADV (Adventure) visual novel games, emphasizing narrative immersion and character interaction.

Core principles:
- ADV dialogue system: Bottom-fixed semi-transparent dark panels carrying character dialogue text
- Character nameplate badges: Colored small labels above the dialogue box identifying the speaking character
- Ornate corner decorations: L-shaped decorative lines at the four corners of dialogue panels, creating an elegant frame feel
- Branching choice buttons: Center-aligned frosted glass buttons representing story branches
- Scene atmosphere rendering: Sky gradients, silhouettes, and soft light create time and emotional atmosphere
- Save screen design: Dark panels with ornate corners, containing input fields and action buttons

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#4a5568]/10
Radius: rounded-lg
```

### Shadow
```
sm: shadow-sm
md: shadow-md
lg: shadow-lg
hover: hover:shadow-lg
focus: focus:shadow-[0_0_12px_#6366f120]
```

### Interaction
```
Hover translate: hover:-translate-y-1
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-all duration-300 ease-in-out
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-serif font-medium
Body: font-sans leading-relaxed
Mono: font-mono
```

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

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

### Color roles
```
Background primary: bg-[#f7fafc]
Background secondary: bg-white/70
Background accent: bg-[#6366f1], bg-[#ec4899], bg-[#10b981]
Text primary: text-[#4a5568]
Text secondary: text-[#6366f1]
Text muted: text-[#4a5568]/50
Button primary: bg-[#6366f1] text-white shadow-sm hover:bg-[#6366f1]/90 hover:shadow-[0_0_15px_#6366f130]
Button secondary: bg-white/50 text-[#4a5568] backdrop-blur-sm border border-[#6366f1]/25
```

---

## [FORBIDDEN]

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

### Banned classes
- `border-4`
- `border-8`
- `rounded-none`
- `font-mono`
- `shadow-[3px_0_`
- `shadow-[0_0_30px`
- `bg-[#0a0a0a]`
- `bg-black`
- `text-[#00ffff]`
- `text-[#ff00ff]`
- `uppercase tracking-widest`

### Banned patterns
- matches `^border-(?:4|8)$`
- matches `^rounded-none$`
- matches `^font-mono$`
- matches `^shadow-\[\d+px_0_#`
- matches `^bg-(?:black|\[#0a0a0a\])$`
- matches `^text-\[#(?:00ffff|ff00ff)\]$`

### Why they are banned
- `border-4`: Visual Novel uses subtle, thin borders for its elegant aesthetic
- `rounded-none`: Visual Novel uses rounded-lg for soft UI panels, never sharp edges
- `font-mono`: Visual Novel uses serif for narrative text and sans-serif for UI, not monospace
- `bg-black`: Visual Novel uses light or semi-transparent dark backgrounds, never pure black
- `uppercase tracking-widest`: Visual Novel uses natural case text, not terminal-style uppercase

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

---

## [REQUIRED]

### Every button must include
```
rounded-lg
font-sans font-medium
transition-all duration-300 ease-in-out
```

### Every card must include
```
rounded-lg
backdrop-blur-md
border
```

### Every input must include
```
rounded-lg
border
font-sans
backdrop-blur-sm
focus:outline-none
```

---

## [COMPARE] Visual Novel 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="rounded-lg font-sans font-medium transition-all duration-300 ease-in-out bg-[#6366f1] text-white shadow-sm hover:bg-[#6366f1]/90 hover:shadow-[0_0_15px_#6366f130]">
 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="rounded-lg backdrop-blur-md border p-5 md:p-8">
 <h3 class="font-serif font-medium text-xl md:text-2xl">{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="rounded-lg border font-sans backdrop-blur-sm focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Visual Novel page skeletons

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

### Navigation
```html
<nav class="bg-[#f7fafc] text-[#4a5568] border border-[#4a5568]/10 px-4 md:px-8 lg:px-12">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
 <a href="/" class="font-serif font-medium text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-4 md:gap-6 font-sans leading-relaxed text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#6366f1] text-[#4a5568] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-serif font-medium text-4xl md:text-6xl lg:text-7xl">
 {HEADLINE}
 </h1>
 <p class="font-sans leading-relaxed text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-lg font-sans font-medium transition-all duration-300 ease-in-out bg-[#6366f1] text-white shadow-sm hover:bg-[#6366f1]/90 hover:shadow-[0_0_15px_#6366f130]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#f7fafc] text-[#4a5568] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-serif font-medium text-2xl md:text-3xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
 <!-- Card template - repeat for each card -->
 <div class="rounded-lg backdrop-blur-md border p-5 md:p-8">
 <h3 class="font-serif font-medium text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="font-sans leading-relaxed text-sm md:text-base text-[#4a5568]/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-lg border font-sans backdrop-blur-sm focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white/70 text-[#6366f1] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10">
 <div>
 <span class="font-serif font-medium text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="font-sans leading-relaxed text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif font-medium text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans leading-relaxed text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Visual Novel post-generation self check

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

### Token check
- [ ] Button includes: `rounded-lg font-sans font-medium transition-all duration-300 ease-in-out`
- [ ] Card includes: `rounded-lg backdrop-blur-md border`
- [ ] Input includes: `rounded-lg border font-sans backdrop-blur-sm focus:outline-none`

### Forbidden check
- [ ] Not using `border-4`
- [ ] Not using `border-8`
- [ ] Not using `rounded-none`
- [ ] Not using `font-mono`
- [ ] Not using `shadow-[3px_0_`
- [ ] Not using `shadow-[0_0_30px`
- [ ] Not using `bg-[#0a0a0a]`
- [ ] Not using `bg-black`

### Style rule check
- [ ] Use semi-transparent dark panels bg-[#1a202c]/85 as dialogue boxes
- [ ] Use semi-transparent light panels bg-white/70 as info cards
- [ ] Add frosted glass effect backdrop-blur-md to all panels
- [ ] Use serif font font-serif for narrative/dialogue text
- [ ] Use sans-serif font font-sans for UI labels and buttons

### Style drift check
- [ ] Does not violate: No heavy brutalist borders (border-4+)
- [ ] Does not violate: No neon RGB split shadow effects
- [ ] Does not violate: No pixel art style or monospace fonts for main content
- [ ] Does not violate: No pure black background bg-black
- [ ] Does not violate: No all-caps wide-tracking terminal-style text

### 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 Visual Novel

---

## [EXAMPLES] Example prompts

### 1. 

ADV，

```
Use Visual Novel style to create an interactive story page:
1. Scene: full-screen sky gradient with character silhouettes at bottom
2. ADV dialog panel: semi-transparent dark panel at bottom with ornate L-shaped corner decorations
3. Character nameplate: colored badge above the dialog box text
4. Choice buttons: full-width frosted glass panels with hover glow and right arrow
5. Cards: scene chapter cards with header image area and nameplate badge overlapping the border
6. Form: save screen with ornate corner frame, dark backdrop, and dual-color labeled inputs
```

## Absolute Bans (Match and Refuse)

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

- heavy brutalist borders (border-4+)
- neon RGB split shadow effects
- pixel art style or monospace fonts for main content
- pure black background bg-black
- all-caps wide-tracking terminal-style text
- sharp corners rounded-none (except nameplate rounded-sm)

## 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 heavy brutalist borders (border-4+)
- [ ] no neon RGB split shadow effects
- [ ] no pixel art style or monospace fonts for main content
- [ ] no pure black background bg-black
- [ ] no all-caps wide-tracking terminal-style text