PC-98
NEC PC-9800 Series Aesthetic // 1982-1998
PC-98 is an aesthetic originating from the NEC PC-9800 series of personal computers, dominant in Japan from the early 1980s to the late 1990s...
Visual Characteristics
The visual style is most closely associated with visual novels and eroge of the era, characterized by high-resolution pixel art (640x400), severely limited color palettes (16-256 colors from a 4096-color bank), and meticulous dithering techniques that create the illusion of depth and gradient with minimal colors.
Artists placed pixels individually, exploiting dithering patterns to simulate smooth shading, soft skin tones, and atmospheric lighting within extreme technical constraints. The result is a uniquely warm, intimate, and melancholic visual language distinct from both Western pixel art and later anime CG.
- High-resolution pixel art at 640x400 -- far more detailed than contemporary 8-bit Western systems, allowing fine facial features, fabric folds, and architectural detail
- Heavy dithering -- checkerboard, ordered, and custom dither patterns used extensively to simulate gradients, soft shadows, and color transitions
- Limited color palette -- typically 16 simultaneous colors on screen, selected from a bank of 4096
- Anime and manga art style -- character designs reflecting 1980s-1990s anime conventions: large expressive eyes, detailed hair with highlights
- Close-up character portraits -- compositions focus on face and upper-body close-ups, often occupying the right half or center of the screen
- Thick ornate decorative borders -- elaborate frames with Art Nouveau-inspired flourishes, columns, floral motifs, or stained-glass patterns
- Soft, warm color temperature -- warm pastels, soft pinks, lavenders, and muted earth tones despite limited palettes
- CRT display softening -- original CRT monitors blended adjacent pixels slightly, making dithered areas appear as smooth gradients
- Emotional intimacy -- compositions emphasize character emotion, eye contact, and personal moments rather than action or spectacle
Color Palette
The PC-98 palette is defined by careful selection from a limited bank, with dithering used to extend perceived range. 16 simultaneous colors typical per scene, chosen from a 4096-color (12-bit RGB) total bank.
Implementation Palette
Dithered Gradient Simulation Pairs
For simulating the PC-98 dithering effect in CSS, these color pairs work well when alternated in checkerboard patterns:
| Effect | Color A | Color B | Preview |
|---|---|---|---|
| Skin tone | #E8B890 |
#D09078 |
|
| Hair highlight | #F0D0E0 |
#B07898 |
|
| Evening sky | #6848A0 |
#D88868 |
|
| Shadow on fabric | #584870 |
#3A2E4A |
|
| Water/pool | #4878A0 |
#68A8B8 |
Dithering Patterns
The visual signature of the PC-98 aesthetic -- used everywhere to simulate gradients. Without visible dithering patterns, the result will look like generic dark-mode anime, not PC-98.
Atmospheric Sky Gradients
PC-98 games rendered sunset and twilight skies through extensive dithering. Modern CSS can simulate both smooth and stepped (discrete band) versions:
Typography
PC-98 typography reflects the constraints of rendering complex Japanese characters on a 640x400 pixel grid. All text was drawn on a fixed grid, typically 16x16 pixel cells for Japanese characters and 8x16 for Latin characters. Modern web fonts that evoke this feel:
Key Design Elements
Ornate Decorative Borders
The defining UI element of PC-98 games -- elaborate frames surrounding the main viewport. Art Nouveau-inspired columns, floral motifs, stained-glass effects, and layered border construction with metallic bronze/gold appearance.
Multiple layers -- inner frame, ornamental middle zone, outer frame. Even a simplified version with layered box-shadows and warm bronze borders evokes the aesthetic. The ornate borders are what immediately distinguish PC-98 games from other pixel art styles.
Dialog Box
The core visual novel element: solid dark background with high-contrast text, positioned at the bottom of the screen, spanning most of the width.
The summer breeze carried the scent of jasmine through the open window. She turned to face me, her eyes catching the amber light of the setting sun. In that moment, the world was reduced to just the two of us and the sound of cicadas in the distance...
Status Panels
Date/time displays, currency counters, and status indicators in dedicated UI regions using digital/segmented number fonts.
Character Art
Large, detailed character portraits are the focal point of most screens. 1980s-1990s anime style with large eyes, detailed hair with multi-color highlights, and skin rendered with warm dithered tones -- peach, pink, and cream blended through dithering.
Background Environments
Detailed architectural scenes -- schools, city streets, residential interiors, parks. Atmospheric sky gradients created through extensive dithering. Careful perspective-correct environments despite pixel limitations. The mood is soft, melancholic: twilight, sunset, quiet moments, rainy windows, school hallways.
Layout Principles
The canonical PC-98 resolution is 640x400 (8:5 aspect ratio). Layouts follow a three-zone vertical structure: ornate border frame (sides), main viewport (center), and dialog/UI strip (bottom).
- Fixed 640x400 composition -- the canonical resolution
- Three-zone vertical layout -- borders, viewport, dialog
- Character portrait on one side, scene on the other
- Dialog box anchored to bottom spanning full width
- Generous border regions consuming 10-15% of screen width
- Single-screen compositions -- no scrolling
- Ornate border as page frame -- decorative side panels flanking content
- Dialog box pattern for content sections -- dark panels with light text
- Card-based layouts with thick decorative borders
- Fixed or max-width containers referencing the 8:5 ratio
- Dark mode by default -- dark backgrounds with warm accent colors
- Status information in corners -- date/time, stats, money
CSS / Design Techniques
Key CSS techniques for implementing the PC-98 aesthetic on the modern web:
Checkerboard Dither Pattern
.pc98-dither {
background-image:
linear-gradient(45deg,
var(--pc98-bg-surface) 25%, transparent 25%,
transparent 75%, var(--pc98-bg-surface) 75%),
linear-gradient(45deg,
var(--pc98-bg-surface) 25%, transparent 25%,
transparent 75%, var(--pc98-bg-surface) 75%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
background-color: var(--pc98-bg-mid);
}
Ornate Border Frame
border: 3px solid var(--pc98-border-bronze);
box-shadow:
inset 0 0 0 1px var(--pc98-border-dark),
inset 0 0 0 4px var(--pc98-bg-surface),
inset 0 0 0 5px var(--pc98-border-rose),
0 0 0 1px var(--pc98-border-dark),
0 0 0 4px var(--pc98-bg-surface-light),
0 0 0 5px var(--pc98-border-bronze);
}
CRT Monitor Effect
.pc98-crt::after {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
to bottom,
transparent 0px, transparent 2px,
rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
pointer-events: none;
}
Pixel-Perfect Rendering
image-rendering: pixelated;
image-rendering: crisp-edges;
}
Materials & Textures
Translating physical and game-era visual metaphors to modern web equivalents:
| Physical / Game Reference | Web Equivalent |
|---|---|
| Dithered pixel gradients | CSS checkerboard background-image patterns with two alternating colors at 2-4px scale |
| Ornate Art Nouveau border columns | Multi-layered box-shadow frames, repeating background-image patterns |
| CRT monitor softening | Subtle scanline overlay via repeating-linear-gradient, slight filter: blur(0.3px) |
| Pixel art character portraits | Scaled images with image-rendering: pixelated, or SVG pixel art |
| Dark dialog box overlay | Semi-transparent black rgba(0,0,0,0.92) panels with thin colored borders |
| Bronze/gold metallic UI trim | Warm brown/gold border colors with subtle box-shadow for depth |
| Atmospheric sunset skies | Multi-stop linear-gradient with stepped (non-smooth) color bands |
Component Showcase
Buttons
PC-98 styled interactive elements with stepped transitions mimicking the discrete feel of pixel-era interfaces:
Content Cards
Text is the primary interactive element. Dialog boxes, character name plates, and typewriter text reveals form the core interaction pattern. Generous line-height and warm text colors on dark backgrounds ensure reading comfort during extended play sessions.
640x400 resolution with 16 simultaneous colors from a 4096-color bank. Artists exploited dithering patterns -- checkerboard, ordered, and custom arrangements -- to simulate smooth shading, soft skin tones, and atmospheric lighting within these severe technical limits.
Dialog Variants
I wonder if you'll remember this place. The classroom where we first met, the afternoon light painting everything in gold. It was summer, just like now...
-- SAVE DATA LOADED SUCCESSFULLY --
Chapter 03: "The Rooftop" // Progress: 42% // Play Time: 02:34:17
Related Aesthetics
PC-98 exists within a constellation of related visual cultures, from its pixel art roots to the nostalgic movements it inspired:
| Aesthetic | Relationship |
|---|---|
| 8-Bit | Earlier generation; PC-98 is far more detailed with higher resolution and more colors, but shares pixel art foundation |
| Animecore | Overlapping visual language; PC-98 is the pixel-art-era predecessor of digital anime aesthetics |
| Cassette Futurism | Shares retro-tech nostalgia and 1980s-90s Japanese computing culture |
| Cyberpunk | Some PC-98 games (Policenauts, Night Slave) share cyberpunk themes and neon-accented visuals |
| Future Funk | Borrows PC-98 and city pop era imagery for nostalgic Japanese retro-futurism |
| Lo-fi | Shares melancholic, low-fidelity, nostalgic mood; PC-98 screenshots are common lo-fi visual elements |
| Vaporwave | Heavily draws from PC-98 limited palettes and nostalgic Japanese computing imagery |
Implementation Notes
- Warm and intimate, not cold or clinical. Avoid the temptation to make it look like generic retro-tech. The defining mood is soft melancholy, not hard-edged futurism.
- Dithering is the visual signature -- without visible dithering patterns, the result will look like generic dark-mode anime, not PC-98. Use CSS checkerboard patterns, stepped gradients, and pixelated textures.
- Ornate borders are essential -- the elaborate decorative UI frames are what immediately distinguish PC-98 games from other pixel art styles.
- CRT viewing context matters -- original art was designed for CRT monitors that softened pixels. A subtle scanline overlay can approximate this.
- Color restraint is critical -- resist using more than 12-16 distinct colors in any single view.
- Sound design complements the aesthetic: FM synthesis music (Yamaha YM2203/YM2608) with bright, clear, bell-like tones.
- Dialog-driven interaction -- design for reading comfort with generous line-height, warm text colors, and dark backgrounds.