website_designs

PC-98 Aesthetic – Design Reference

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. 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.

Visual Characteristics

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 with a limited palette
Limited color palette – typically 16 simultaneous colors on screen, selected from a bank of 4096; some later games pushed to 256 colors
Anime and manga art style – character designs reflect 1980s-1990s anime conventions: large expressive eyes, detailed hair with highlights, slender figures
Close-up character portraits – compositions focus on face and upper-body close-ups of characters, often occupying the right half or center of the screen
Thick ornate decorative borders – game UI features elaborate frames around the main viewport, often with Art Nouveau-inspired flourishes, columns, floral motifs, or stained-glass patterns
Distinct UI panels – text boxes, status displays, date/time indicators, and menu areas are clearly delineated with decorative borders and distinct background fills
Stylized custom fonts – UI text often uses pixel-rendered Japanese characters (kanji, hiragana, katakana) with careful attention to legibility at low resolution
Soft, warm color temperature – despite limited palettes, artists favored warm pastels, soft pinks, lavenders, and muted earth tones
Visible pixel structure – individual pixels are discernible, but dithering creates an overall softness that distinguishes PC-98 art from the hard-edged blockiness of 8-bit systems
CRT display softening – original viewing on CRT monitors blended adjacent pixels slightly, making dithered areas appear as smooth gradients
Atmospheric backgrounds – detailed pixel-art environments (school buildings, city streets, interiors, nature scenes) rendered with careful perspective and dithered sky 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
Warm pastels dominate – soft pinks, lavenders, cream, peach, and muted rose
Cool accents – slate blue, teal, muted purple, and dusty cyan for contrast and shadow
Skin tones created through careful dithering of 2-4 colors (peach, pink, cream, light brown)
Hair rendered with highlight bands – 3-4 color steps from dark base to bright highlight, dithered at transitions
Backgrounds use earthy and atmospheric tones – olive green, dusty blue, warm gray, faded amber
Pure black used sparingly for outlines, deep shadows, and text
Pure white used for specular highlights on eyes, hair, and metallic surfaces
No smooth gradients – all transitions achieved through dithering patterns

Suggested Implementation Palette

Based on characteristic PC-98 visual novel color selections:

Role	Color	Hex
Background Dark	Deep Navy	`#1A1028`
Background Mid	Dusty Indigo	`#2D2240`
Surface	Warm Charcoal	`#3A2E4A`
Surface Light	Muted Mauve	`#584870`
Primary Text	Cream	`#E8D8C8`
Secondary Text	Soft Lavender	`#C0A8D0`
Accent Warm	Rose Pink	`#D87890`
Accent Soft	Peach	`#E8A888`
Accent Cool	Slate Teal	`#689098`
Highlight	Pale Gold	`#F0D890`
Border Ornate	Antique Bronze	`#987858`
Border Light	Dusty Rose	`#B89088`
Shadow	Deep Purple	`#180820`
Sky Gradient Top	Faded Violet	`#6848A0`
Sky Gradient Low	Sunset Peach	`#E8A070`
Foliage	Muted Olive	`#608050`

Dithered Gradient Simulation Palette

For simulating the PC-98 dithering effect in CSS, these pairs work well when alternated:

Gradient Effect	Color A	Color B
Skin tone	`#E8B890`	`#D09078`
Hair highlight	`#F0D0E0`	`#B07898`
Evening sky	`#6848A0`	`#D88868`
Shadow on fabric	`#584870`	`#3A2E4A`
Water/pool	`#4878A0`	`#68A8B8`

Suggested CSS Custom Properties

:root {
  /* Backgrounds */
  --pc98-bg-dark: #1A1028;
  --pc98-bg-mid: #2D2240;
  --pc98-bg-surface: #3A2E4A;
  --pc98-bg-surface-light: #584870;

  /* Text */
  --pc98-text-primary: #E8D8C8;
  --pc98-text-secondary: #C0A8D0;
  --pc98-text-muted: #887898;

  /* Accents */
  --pc98-accent-rose: #D87890;
  --pc98-accent-peach: #E8A888;
  --pc98-accent-teal: #689098;
  --pc98-accent-gold: #F0D890;
  --pc98-accent-lavender: #A080C0;

  /* Borders and ornamental */
  --pc98-border-bronze: #987858;
  --pc98-border-rose: #B89088;
  --pc98-border-dark: #483858;

  /* Shadows */
  --pc98-shadow: #180820;
  --pc98-shadow-soft: rgba(24, 8, 32, 0.6);

  /* Atmospheric */
  --pc98-sky-violet: #6848A0;
  --pc98-sky-peach: #E8A070;
  --pc98-foliage: #608050;

  /* Functional mappings */
  --pc98-bg-primary: var(--pc98-bg-dark);
  --pc98-bg-secondary: var(--pc98-bg-mid);
  --pc98-bg-card: var(--pc98-bg-surface);
  --pc98-text-heading: var(--pc98-accent-gold);
  --pc98-text-body: var(--pc98-text-primary);
  --pc98-accent-primary: var(--pc98-accent-rose);
  --pc98-accent-secondary: var(--pc98-accent-teal);
  --pc98-border: var(--pc98-border-bronze);
}

Typography

Typeface Characteristics

PC-98 typography reflects the constraints of rendering complex Japanese characters on a 640x400 pixel grid:

Pixel-rendered characters – all text drawn on a fixed grid, typically 16x16 or 8x16 pixel cells for Japanese, 8x16 for Latin characters
Monospaced Japanese text – each kanji, hiragana, and katakana character occupies a uniform square cell
Half-width Latin characters – English text and numbers rendered at half the width of Japanese characters
Clean, legible bitmap forms – text prioritizes readability within the pixel grid over decorative flourish
White or cream text on dark backgrounds – high-contrast text for dialog boxes, typically on solid dark or black backgrounds
Decorative title screens – game titles rendered as elaborate pixel art logotypes with custom letterforms
UI labels in small pixel fonts – date, time, money, and status indicators use compact pixel fonts
Dialog text is the primary typographic element – visual novels are text-heavy; the dialog box is the most important UI component

Recommended Web Fonts

Font	Style	Usage
M PLUS 1 Code	Japanese-supporting monospace	Primary text, dialog boxes – authentic CJK pixel feel at small sizes
Noto Sans JP	Clean Japanese sans-serif	Body text, dialog, readable Japanese
DotGothic16	Japanese pixel/dot-matrix style	Authentic retro Japanese text feel (Google Fonts)
Press Start 2P	Pixel Latin font	English headings, UI labels
Silkscreen	Clean pixel font	Small UI text, status labels
VT323	Monospace terminal pixel font	Terminal-style text, data displays
Kosugi Maru	Rounded Japanese pixel font	Softer UI text, friendly labels

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=M+PLUS+1+Code:wght@400;700&family=Press+Start+2P&family=VT323&display=swap');

/* Primary body text -- clean, readable, retro feel */
body {
  font-family: 'M PLUS 1 Code', 'DotGothic16', monospace;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--pc98-text-primary);
  image-rendering: pixelated;
}

/* Headings -- pixel font, warm gold */
h1, h2, h3 {
  font-family: 'Press Start 2P', 'DotGothic16', monospace;
  color: var(--pc98-accent-gold);
  text-shadow: 2px 2px 0px var(--pc98-shadow);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

h1 {
  font-size: clamp(1.2rem, 3vw, 2rem);
}

h2 {
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--pc98-accent-rose);
}

/* Dialog box text -- the core visual novel element */
.pc98-dialog {
  font-family: 'M PLUS 1 Code', 'DotGothic16', monospace;
  font-size: 15px;
  line-height: 2;
  color: var(--pc98-text-primary);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

/* Character name label */
.pc98-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--pc98-accent-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Small UI labels (date, time, status) */
.pc98-label {
  font-family: 'VT323', 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: var(--pc98-accent-peach);
  letter-spacing: 0.05em;
}

/* Monospace data display */
.pc98-mono {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--pc98-accent-teal);
}

Key Design Elements and Motifs

Ornate Decorative Borders

The defining UI element of PC-98 games – elaborate frames surrounding the main viewport:

Art Nouveau-inspired columns and flourishes along left and right edges
Floral and vine motifs woven into border decorations (roses, leaves, scrollwork)
Stained-glass panel effects with colored segments in border columns
Sculpted figure reliefs (classical female figures, angels) integrated into border pillars
Layered border construction – inner frame, ornamental middle zone, outer frame
Metallic bronze/gold appearance – borders simulate carved or embossed metal

Dialog Box

Solid dark background (black or very dark navy) with high-contrast text
Positioned at bottom of screen, spanning most of the width
Thin pixel border (1-2px) in a contrasting warm color
Character name displayed in a separate label area above or within the dialog box
Text appears character-by-character in the original games (typewriter reveal)

Status Panels

Date and time displays in dedicated UI regions (often bottom-left)
Currency/stats counters in bottom-right, using digital/segmented number fonts
Day-of-week indicators with styled labels
Small pixel-art icons for status indicators

Dithering Patterns

The visual signature of the PC-98 aesthetic – used everywhere to simulate gradients:

Checkerboard dithering – alternating pixels of two colors in a regular grid
Ordered dithering (Bayer matrix) – systematic dot patterns creating tonal steps
Horizontal-line dithering – alternating rows of two colors for subtle horizontal banding
Custom artistic dithering – hand-placed pixels in organic patterns for skin, hair, and fabric
Gradient simulation – progressive density changes in dither pattern to suggest smooth transitions

Character Art

Large, detailed character portraits – the focal point of most screens
1980s-1990s anime style – large eyes, detailed hair with multi-color highlights, expressive faces
Skin rendered with warm dithered tones – peach, pink, cream blended through dithering
Hair with prominent highlight bands – bright streaks suggesting shine, achieved with 3-4 color steps
Clothing with fabric texture – dithered folds, creases, and patterns
Characters positioned in right half or center of viewport, with background scene behind

Background Environments

Detailed architectural scenes – schools, city streets, residential interiors, parks
Atmospheric sky gradients – sunset and twilight skies created through extensive dithering
Perspective-correct environments – careful vanishing-point construction despite pixel limitations
Nature elements – trees, water, clouds rendered with dithered color transitions
Indoor scenes with furniture, windows, and ambient lighting effects

Layout Principles

Fixed 640x400 composition – the canonical PC-98 resolution; modern implementations should reference this 8:5 aspect ratio
Three-zone vertical layout – ornate border frame (sides), main viewport (center), dialog/UI strip (bottom)
Character portrait on one side, scene on the other – asymmetric compositions with character art overlapping or adjacent to background
Dialog box anchored to bottom – spanning the full width minus borders, with solid dark background
Status information in corners – date/time bottom-left, stats/money bottom-right
Generous border regions – decorative frames consume 10-15% of screen width on each side
Single-screen compositions – each scene is a complete tableau; no scrolling in original games
Dark backgrounds for UI regions – pure black or near-black behind text for maximum readability
Content framed within viewport – all imagery contained within the ornate border frame

Modern Web Adaptation

Use the ornate border as a page frame – decorative side panels flanking a central content area
Dialog box pattern for content sections – dark background panels with light text
Card-based layouts with thick decorative borders echoing the PC-98 UI frames
Fixed or max-width containers referencing the 8:5 aspect ratio
Dark mode by default – dark backgrounds with warm accent colors

CSS/Design Techniques

Dithering Pattern (CSS Simulation)

/* Checkerboard dither pattern -- the signature PC-98 texture */
.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);
}

/* Finer dither for subtle transitions */
.pc98-dither--fine {
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
}

/* Horizontal line dither */
.pc98-dither--lines {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--pc98-bg-surface) 0px,
    var(--pc98-bg-surface) 1px,
    var(--pc98-bg-mid) 1px,
    var(--pc98-bg-mid) 2px
  );
}

Ornate Border Frame

/* Main viewport frame mimicking PC-98 decorative borders */
.pc98-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);
  background: var(--pc98-bg-dark);
}

/* Simpler inner frame for content sections */
.pc98-frame--inner {
  border: 2px solid var(--pc98-border-bronze);
  box-shadow:
    inset 0 0 0 1px var(--pc98-border-dark),
    inset 0 0 0 3px var(--pc98-bg-surface);
  padding: 1.5rem;
}

/* Decorative corner accents */
.pc98-frame--corners {
  position: relative;
  border: 2px solid var(--pc98-border-bronze);
  padding: 2rem;
}

.pc98-frame--corners::before,
.pc98-frame--corners::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--pc98-accent-gold);
  border-style: solid;
}

.pc98-frame--corners::before {
  top: 4px;
  left: 4px;
  border-width: 2px 0 0 2px;
}

.pc98-frame--corners::after {
  bottom: 4px;
  right: 4px;
  border-width: 0 2px 2px 0;
}

Dialog Box

/* Classic PC-98 visual novel dialog box */
.pc98-dialog-box {
  background: rgba(0, 0, 0, 0.92);
  border: 2px solid var(--pc98-border-bronze);
  padding: 1.2rem 1.5rem;
  position: relative;
  box-shadow:
    inset 0 0 0 1px var(--pc98-border-dark),
    0 -2px 8px var(--pc98-shadow-soft);
}

/* Character name plate */
.pc98-dialog-box .name-plate {
  position: absolute;
  top: -14px;
  left: 16px;
  background: var(--pc98-bg-dark);
  border: 1px solid var(--pc98-border-bronze);
  padding: 2px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  color: var(--pc98-accent-gold);
  letter-spacing: 0.08em;
}

/* Typewriter text reveal animation */
@keyframes pc98-typewriter {
  from { width: 0; }
  to { width: 100%; }
}

.pc98-dialog-box .text-reveal {
  overflow: hidden;
  white-space: nowrap;
  animation: pc98-typewriter 2s steps(40) forwards;
}

CRT / PC-98 Monitor Effect

/* Simulate the CRT softening that made dithering look like smooth gradients */
.pc98-crt {
  position: relative;
}

/* Subtle scanline overlay */
.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;
  z-index: 100;
}

/* CRT screen curvature and vignette */
.pc98-monitor {
  border-radius: 8px;
  box-shadow:
    inset 0 0 80px rgba(24, 8, 32, 0.4),
    inset 0 0 20px rgba(24, 8, 32, 0.2),
    0 0 30px rgba(104, 72, 160, 0.08);
}

/* Slight warm color cast (PC-98 monitors had warm tint) */
.pc98-warm-cast {
  filter: sepia(0.05) saturate(1.1) brightness(0.98);
}

Pixel-Perfect Rendering

/* Prevent browser smoothing on scaled pixel art */
img, canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Snap to pixel grid */
.pc98-pixel-snap {
  transform: translateZ(0);
  will-change: transform;
}

Gradient Sky (Dithered Simulation)

/* Simulated PC-98 sunset sky with stepped dither-like gradient */
.pc98-sky {
  background: linear-gradient(
    to bottom,
    var(--pc98-sky-violet) 0%,
    var(--pc98-sky-violet) 15%,
    #8860B0 25%,
    #B07898 40%,
    #D08878 55%,
    var(--pc98-sky-peach) 70%,
    #E8C080 85%,
    var(--pc98-accent-gold) 100%
  );
}

/* Stepped gradient (discrete color bands instead of smooth) */
.pc98-sky--stepped {
  background: linear-gradient(
    to bottom,
    var(--pc98-sky-violet) 0%, var(--pc98-sky-violet) 16.6%,
    #8860B0 16.6%, #8860B0 33.3%,
    #B07898 33.3%, #B07898 50%,
    #D08878 50%, #D08878 66.6%,
    var(--pc98-sky-peach) 66.6%, var(--pc98-sky-peach) 83.3%,
    var(--pc98-accent-gold) 83.3%, var(--pc98-accent-gold) 100%
  );
}

Status Panel UI Elements

/* Date/time display panel */
.pc98-status-panel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pc98-bg-dark);
  border: 1px solid var(--pc98-border-bronze);
  padding: 4px 10px;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--pc98-accent-peach);
}

/* Segmented display numbers (money, stats) */
.pc98-segment-display {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  color: var(--pc98-accent-teal);
  background: #0A0818;
  border: 1px solid var(--pc98-border-dark);
  padding: 4px 8px;
  letter-spacing: 0.15em;
  text-shadow: 0 0 4px rgba(104, 144, 152, 0.4);
}

Decorative Floral Border (CSS-Only Approximation)

/* Ornamental sidebar column -- simplified version of PC-98 decorative borders */
.pc98-sidebar-ornament {
  width: 60px;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--pc98-border-bronze) 0px,
      var(--pc98-border-bronze) 2px,
      var(--pc98-bg-surface) 2px,
      var(--pc98-bg-surface) 18px,
      var(--pc98-border-bronze) 18px,
      var(--pc98-border-bronze) 20px,
      var(--pc98-bg-surface-light) 20px,
      var(--pc98-bg-surface-light) 40px
    );
  border-left: 3px solid var(--pc98-border-bronze);
  border-right: 3px solid var(--pc98-border-bronze);
  box-shadow:
    inset 2px 0 0 var(--pc98-border-dark),
    inset -2px 0 0 var(--pc98-border-dark);
}

/* Diamond/rosette repeating motif for border decoration */
.pc98-border-pattern {
  background-image:
    radial-gradient(circle at 50% 50%,
      var(--pc98-accent-rose) 2px,
      transparent 2px
    ),
    radial-gradient(circle at 0% 50%,
      var(--pc98-border-bronze) 1px,
      transparent 1px
    ),
    radial-gradient(circle at 100% 50%,
      var(--pc98-border-bronze) 1px,
      transparent 1px
    );
  background-size: 20px 20px;
  background-color: var(--pc98-bg-surface);
}

Card / Content Panel

/* PC-98 styled content card */
.pc98-card {
  background: var(--pc98-bg-surface);
  border: 2px solid var(--pc98-border-bronze);
  padding: 2rem;
  position: relative;
  box-shadow:
    inset 0 0 0 1px var(--pc98-border-dark),
    inset 0 0 20px rgba(24, 8, 32, 0.3),
    4px 4px 0px var(--pc98-shadow);
}

/* Hover: warm glow */
.pc98-card:hover {
  border-color: var(--pc98-accent-rose);
  box-shadow:
    inset 0 0 0 1px var(--pc98-border-dark),
    inset 0 0 20px rgba(24, 8, 32, 0.3),
    0 0 12px rgba(216, 120, 144, 0.15),
    4px 4px 0px var(--pc98-shadow);
  transition: all 0.3s ease;
}

Button

/* PC-98 styled button */
.pc98-button {
  display: inline-block;
  padding: 0.5rem 1.8rem;
  background: var(--pc98-bg-surface);
  border: 2px solid var(--pc98-border-bronze);
  color: var(--pc98-accent-gold);
  font-family: 'Press Start 2P', 'DotGothic16', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    2px 2px 0px var(--pc98-shadow),
    inset 0 0 0 1px var(--pc98-border-dark);
  transition: all 0.15s steps(2);
}

.pc98-button:hover {
  background: var(--pc98-bg-surface-light);
  border-color: var(--pc98-accent-gold);
  color: var(--pc98-text-primary);
  box-shadow:
    1px 1px 0px var(--pc98-shadow),
    inset 0 0 0 1px var(--pc98-border-dark);
  transform: translate(1px, 1px);
}

.pc98-button:active {
  box-shadow:
    0 0 0 var(--pc98-shadow),
    inset 0 0 0 1px var(--pc98-border-dark);
  transform: translate(2px, 2px);
}

Materials and Textures (Visual Metaphors for Web)

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, CSS border-image
Stained-glass border panels	`radial-gradient` and `linear-gradient` patterns in border sidebars with warm jewel tones
CRT monitor softening	Subtle scanline overlay via `repeating-linear-gradient`, slight `filter: blur(0.3px)`
Pixel art character portraits	Scaled pixel art 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
Segmented number displays	Monospace pixel fonts with subtle `text-shadow` glow
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

Imagery and Visual Content Guidelines

When creating or sourcing imagery for a PC-98 styled site:

Favor anime-style character illustrations with visible pixel structure or retro styling
Use limited color palettes – restrict illustrations to 16-32 colors maximum for authenticity
Apply dithering to photographs – convert photos to limited-palette dithered versions using tools like Dither Me This or ImageMagick’s ordered dither
Warm color temperature – all imagery should lean warm (pinks, peaches, golds) rather than cool
Close-up character compositions – faces and upper bodies, not wide action scenes
Soft, melancholic mood – twilight, sunset, quiet moments, rainy windows, school hallways
Interior and urban Japanese settings – classrooms, train stations, residential neighborhoods, parks
Avoid photorealism – everything should feel pixel-rendered or illustrated, not photographic
Scale pixel art at integer multiples (2x, 3x, 4x) with image-rendering: pixelated
Frame imagery within decorative borders – images should feel contained in a viewport, not edge-to-edge

Aesthetic	Relationship to PC-98
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
Heisei Retro	PC-98 is a core artifact of Heisei-era (1989-2019) Japanese media culture
Lo-fi	Shares melancholic, low-fidelity, nostalgic mood; PC-98 screenshots are common lo-fi visual elements
Pixel UI	Western parallel development of pixel-based interface design during the same era
Retrofuturism	PC-98 represents a Japanese branch of retro computing culture
Vaporwave	Heavily draws from PC-98 limited palettes and nostalgic Japanese computing imagery

Implementation Notes

The PC-98 aesthetic is 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. Even a simplified version with layered box-shadows and warm bronze borders evokes the aesthetic.
CRT viewing context matters – original PC-98 art was designed for CRT monitors that softened pixels and blended dithered colors. A subtle scanline overlay and slight blur can approximate this. Without it, dithering patterns appear harsher than intended.
Color restraint is critical – resist using more than 12-16 distinct colors in any single view. The beauty of PC-98 art comes from maximizing visual richness within severe limitations.
Sound design complements the aesthetic: FM synthesis music (Yamaha YM2203/YM2608 chip sound) with bright, clear, bell-like tones. Consider ambient chiptune audio loops for immersive implementations.
Dialog-driven interaction – the visual novel format means text is the primary interactive element. Design for reading comfort with generous line-height, warm text colors, and dark dialog box backgrounds.

Quick-Start: Minimal PC-98 Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PC-98 Page</title>
  <link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=M+PLUS+1+Code:wght@400;700&family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
  <style>
    :root {
      --pc98-bg-dark: #1A1028;
      --pc98-bg-mid: #2D2240;
      --pc98-bg-surface: #3A2E4A;
      --pc98-bg-surface-light: #584870;
      --pc98-text-primary: #E8D8C8;
      --pc98-text-secondary: #C0A8D0;
      --pc98-accent-rose: #D87890;
      --pc98-accent-peach: #E8A888;
      --pc98-accent-teal: #689098;
      --pc98-accent-gold: #F0D890;
      --pc98-border-bronze: #987858;
      --pc98-border-dark: #483858;
      --pc98-shadow: #180820;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--pc98-bg-dark);
      color: var(--pc98-text-primary);
      font-family: 'M PLUS 1 Code', 'DotGothic16', monospace;
      font-size: 16px;
      line-height: 1.8;
      min-height: 100vh;
      overflow-x: hidden;
      image-rendering: pixelated;
    }

    /* Page frame with ornate borders */
    .pc98-page {
      max-width: 960px;
      margin: 2rem auto;
      display: grid;
      grid-template-columns: 50px 1fr 50px;
      grid-template-rows: auto 1fr auto;
      min-height: 90vh;
    }

    /* Decorative side borders */
    .pc98-border-left,
    .pc98-border-right {
      background:
        repeating-linear-gradient(
          to bottom,
          var(--pc98-border-bronze) 0px, var(--pc98-border-bronze) 2px,
          var(--pc98-bg-surface) 2px, var(--pc98-bg-surface) 18px,
          var(--pc98-border-bronze) 18px, var(--pc98-border-bronze) 20px,
          var(--pc98-bg-surface-light) 20px, var(--pc98-bg-surface-light) 40px
        );
      border: 2px solid var(--pc98-border-bronze);
    }

    .pc98-border-left {
      grid-column: 1;
      grid-row: 1 / -1;
      border-right: 3px solid var(--pc98-border-bronze);
    }

    .pc98-border-right {
      grid-column: 3;
      grid-row: 1 / -1;
      border-left: 3px solid var(--pc98-border-bronze);
    }

    /* Main content viewport */
    .pc98-viewport {
      grid-column: 2;
      grid-row: 1 / 3;
      background: var(--pc98-bg-mid);
      padding: 3rem 2.5rem;
      position: relative;
      border-top: 2px solid var(--pc98-border-bronze);
    }

    /* Dithered background texture */
    .pc98-viewport::before {
      content: '';
      position: absolute;
      inset: 0;
      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;
      opacity: 0.15;
      pointer-events: none;
    }

    .pc98-viewport > * {
      position: relative;
      z-index: 1;
    }

    /* Hero heading */
    .pc98-viewport h1 {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(1rem, 2.5vw, 1.6rem);
      color: var(--pc98-accent-gold);
      text-shadow: 2px 2px 0px var(--pc98-shadow);
      margin-bottom: 1.5rem;
      letter-spacing: 0.05em;
      line-height: 1.8;
    }

    .pc98-viewport h2 {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(0.7rem, 1.8vw, 1rem);
      color: var(--pc98-accent-rose);
      text-shadow: 1px 1px 0px var(--pc98-shadow);
      margin: 2rem 0 1rem;
      letter-spacing: 0.04em;
      line-height: 1.8;
    }

    p {
      margin-bottom: 1rem;
      color: var(--pc98-text-secondary);
    }

    /* Dialog box at bottom */
    .pc98-dialog-box {
      grid-column: 2;
      grid-row: 3;
      background: rgba(0, 0, 0, 0.92);
      border: 2px solid var(--pc98-border-bronze);
      padding: 1.2rem 1.5rem;
      position: relative;
    }

    .pc98-dialog-box .name-plate {
      position: absolute;
      top: -12px;
      left: 16px;
      background: var(--pc98-bg-dark);
      border: 1px solid var(--pc98-border-bronze);
      padding: 2px 12px;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.6rem;
      color: var(--pc98-accent-gold);
      letter-spacing: 0.08em;
    }

    .pc98-dialog-box p {
      color: var(--pc98-text-primary);
      font-size: 14px;
      line-height: 2;
      margin: 0;
    }

    /* Status bar */
    .pc98-status {
      display: flex;
      justify-content: space-between;
      margin-top: 0.8rem;
    }

    .pc98-status span {
      font-family: 'VT323', monospace;
      font-size: 0.9rem;
      color: var(--pc98-accent-teal);
    }

    /* Scanline overlay */
    .pc98-scanlines {
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.06) 2px,
        rgba(0, 0, 0, 0.06) 4px
      );
      pointer-events: none;
      z-index: 9999;
    }

    /* Card styling */
    .pc98-card {
      background: var(--pc98-bg-surface);
      border: 2px solid var(--pc98-border-bronze);
      padding: 1.5rem;
      margin: 1.5rem 0;
      box-shadow:
        inset 0 0 0 1px var(--pc98-border-dark),
        3px 3px 0px var(--pc98-shadow);
    }

    .mono {
      font-family: 'VT323', monospace;
      color: var(--pc98-accent-teal);
      font-size: 0.95rem;
    }
  </style>
</head>
<body>
  <div class="pc98-scanlines"></div>
  <div class="pc98-page">
    <div class="pc98-border-left"></div>
    <div class="pc98-viewport">
      <h1>Title Here</h1>
      <div class="pc98-card">
        <h2>Section Heading</h2>
        <p>Content styled with the PC-98 aesthetic -- warm pastels, dithered textures, ornate borders, and the intimate atmosphere of 1990s Japanese visual novels.</p>
        <p class="mono">STATUS: OPERATIONAL // COLORS: 16</p>
      </div>
    </div>
    <div class="pc98-border-right"></div>
    <div class="pc98-dialog-box">
      <span class="name-plate">NARRATOR</span>
      <p>The screen glows softly in the dim room. Each pixel placed with care, each color chosen from a palette of just sixteen...</p>
      <div class="pc98-status">
        <span>AUG.12 Tue</span>
        <span>PM 3:15</span>
      </div>
    </div>
  </div>
</body>
</html>

This site is open source. Improve this page.

website_designs

PC-98 Aesthetic – Design Reference

Visual Characteristics

Color Palette

Suggested Implementation Palette

Dithered Gradient Simulation Palette

Suggested CSS Custom Properties

Typography

Typeface Characteristics

Recommended Web Fonts

Typography CSS Example

Key Design Elements and Motifs

Ornate Decorative Borders

Dialog Box

Status Panels

Dithering Patterns

Character Art

Background Environments

Layout Principles

Modern Web Adaptation

CSS/Design Techniques

Dithering Pattern (CSS Simulation)

Ornate Border Frame

Dialog Box

CRT / PC-98 Monitor Effect

Pixel-Perfect Rendering

Gradient Sky (Dithered Simulation)

Status Panel UI Elements

Decorative Floral Border (CSS-Only Approximation)

Card / Content Panel

Button

Materials and Textures (Visual Metaphors for Web)

Imagery and Visual Content Guidelines

Related Aesthetics

Implementation Notes

Quick-Start: Minimal PC-98 Page Template