# Visual Novel Graphics (Sprites, Backgrounds and Textbox UI)

> A fixed screen language for interactive reading: anime-derived character sprites stand over painted backgrounds, a semi-transparent textbox runs along the bottom (ADV) or fills the screen (NVL), and full-screen event illustrations replace the scene at dramatic moments. Menus and save screens carry the game's identity. Pacing is set by click, not by scrolling or page turns.

- Period: 1996–present
- Where: East Asia, Global / networked
- Origin: Japan: Leaf's Shizuku (1996) is described as the first commercial game called a visual novel. Earlier text adventures such as The Portopia Serial Murder Case (1983) and Chunsoft's sound novel Otogirisō (1992) are ancestors, but Japanese players do not count Portopia as a visual novel (they say 'novel game'); the Western term was applied retroactively. The parent is story-manga for the character vocabulary only, since the atlas has no entry for anime game art or text adventures
- Branch: Digital native
- Also known as: Visual novel art, ADV/NVL interface, ノベルゲーム
- Page: https://stylogeny.com/styles/visual-novel-graphics/

## Use it with care

The commercial novel-game market of the 1990s was built largely on adult (eroge) titles, among them Shizuku and the Leaf, Key and Tactics wave, and many sprite and event-CG conventions grew up there, including sexualised depictions of young-looking characters. Borrow the layout, textbox and layering system rather than that figure vocabulary; keep characters clearly adult and depictions non-sexualised unless the context is explicitly adult.

## How it works

- Stand layered character sprites over a painted background and swap expressions rather than redrawing the scene.
- Place a semi-transparent textbox at the bottom of the screen for ADV, or fill the screen with text for NVL.
- Replace the scene with a full-screen event illustration at the story's dramatic peaks.
- Decorate the title, menu and save screens with the game's own ornament and colour theme.
- Let the click, not the scroll, set the pace: make every screen state one beat of reading.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Framed panels](https://stylogeny.com/design-choices/framed-panels/) (characteristic)
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (characteristic)
- [Dynamic asymmetry](https://stylogeny.com/design-choices/dynamic-asymmetry/) (occasional)

### Space & hierarchy
- [Sequential narrative](https://stylogeny.com/design-choices/sequential-narrative/) (defining)
- [Single focal point](https://stylogeny.com/design-choices/single-focal-point/) (characteristic)
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (characteristic)
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (characteristic)
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (occasional)

### Typography
- [Humanist sans](https://stylogeny.com/design-choices/humanist-sans/) (characteristic)
- [Flush left, ragged right](https://stylogeny.com/design-choices/flush-left-ragged-right/) (characteristic)
- [Script](https://stylogeny.com/design-choices/script/) (occasional)

### Colour
- [Full polychrome](https://stylogeny.com/design-choices/full-polychrome/) (characteristic)
- [Pastel](https://stylogeny.com/design-choices/pastel/) (characteristic)
- [Gradients](https://stylogeny.com/design-choices/gradients/) (characteristic)
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (occasional)

### Form & shape
- [Stylised figuration](https://stylogeny.com/design-choices/stylised-figuration/) (defining)
- [Naturalistic depiction](https://stylogeny.com/design-choices/naturalistic-depiction/) (occasional)
- [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (occasional)

### Surface & texture
- [Frosted glass](https://stylogeny.com/design-choices/frosted-glass/) (characteristic)
- [Gloss & highlights](https://stylogeny.com/design-choices/gloss-and-highlights/) (occasional)

### Ornament
- [Restrained accents](https://stylogeny.com/design-choices/restrained-accents/) (characteristic)
- [Borders & frames](https://stylogeny.com/design-choices/borders-and-frames/) (characteristic)

### Imagery
- [Comic & cartoon](https://stylogeny.com/design-choices/comic-and-cartoon/) (defining)
- [Painterly illustration](https://stylogeny.com/design-choices/painterly-illustration/) (characteristic)
- [Flat vector illustration](https://stylogeny.com/design-choices/flat-vector-illustration/) (occasional)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (occasional)

### Medium & production
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (defining)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (occasional)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (occasional)

### Tone & intent
- [Romantic & sensual](https://stylogeny.com/design-choices/romantic-and-sensual/) (characteristic)
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (occasional)

Avoids: Modular grid, Broken grid, Rotated & vertical setting, Halftone & Ben-Day dots, Photocopy & distress, Visual tension, Monochrome, Agitational & persuasive

Palette: #f6e9f0, #f4a6c0, #8fc1e3, #2b2a4c, #ffffff, #e8c872

Typefaces: Japanese gothic (sans) system fonts for the textbox, Mincho (serif) faces for NVL prose and titles, Hand-drawn or brush-style logo lettering for titles

Known for: Otogirisō (Chunsoft, 1992), a sound novel and ancestor with sparse graphics; The Portopia Serial Murder Case (1983), an adventure-game ancestor not regarded as a visual novel in Japan; Shizuku (Leaf, 1996), an adult game described as the first commercial game called a visual novel; Kanon (Key, 1999), credited with establishing the novel-game market; Higurashi: When They Cry (2002), begun as a doujin game sold at comic markets; Doki Doki Literature Club! (2017), a Western-made title built with Ren'Py, showing the form beyond Japan

## Where it comes from, and what it’s close to

- Grew out of: [Story Manga (Postwar Japanese Comics)](https://stylogeny.com/styles/story-manga.md) (1947–present)
- Influenced by: [Kawaii Design](https://stylogeny.com/styles/kawaii.md) (1970–present)
- Alike in its design choices: [Light Novel Cover Illustration](https://stylogeny.com/styles/light-novel-cover.md) (2003–present), 56% alike
- Alike in its design choices: [VTuber Avatar and Stream Graphics](https://stylogeny.com/styles/vtuber-graphics.md) (2016–present), 55% alike
- Alike in its design choices: [Frutiger Aero](https://stylogeny.com/styles/frutiger-aero.md) (2004–2013), 53% alike
- Alike in its design choices: [Lo-fi Anime Aesthetic](https://stylogeny.com/styles/lofi-anime.md) (2017–present), 49% alike
- Alike in its design choices: [Korean Webtoon Graphics](https://stylogeny.com/styles/webtoon.md) (2002–present), 48% alike
- Alike in its design choices: [Instagram Slideshow Activism (Social-Justice Infographics)](https://stylogeny.com/styles/instagram-slideshow-activism.md) (2020–present), 48% alike

## Sources

- Wikipedia, Visual novel (https://en.wikipedia.org/wiki/Visual_novel)
- Ren'Py documentation, NVL-Mode Tutorial: ADV-style presents one line at a time in a window at the bottom of the screen, NVL-style several lines in a window taking up the entire screen (https://www.renpy.org/doc/html/nvl_mode.html)
- Ren'Py documentation, Layered Images: each layer is a separate sprite and attributes select layers, so one expression replaces another (https://www.renpy.org/doc/html/layeredimage.html)
- Wikipedia, The Portopia Serial Murder Case (https://en.wikipedia.org/wiki/The_Portopia_Serial_Murder_Case)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Visual Novel Graphics (Sprites, Backgrounds and Textbox UI)”, https://stylogeny.com/styles/visual-novel-graphics/