EARLY CYBER // Design Aesthetic Reference

Visual Characteristics [SEC.01]

Harsh pixelated imagery -- low-resolution bitmap graphics with visible pixel structure, not smoothed or anti-aliased
Thermographic color mapping -- false-color heat-map rendering applied to photographs and video, turning subjects into vivid rainbow gradients
Warped and distorted typography -- letterforms stretched, squeezed, fisheye-warped, and liquified using early digital transformation tools
Dot matrix patterns -- visible halftone-style dot grids from early printing and display technologies
Posterization and solarization -- reduced color depth creating flat, banded areas of tone with inverted highlight regions
Early greenscreen compositing -- crude chroma-key effects with visible edge artifacts and color spill
Kaleidoscope effects -- mirrored and rotationally tiled imagery creating symmetrical mandala-like patterns
HUD overlays -- wireframe targeting reticles, data readouts, and scan-line graphics layered over imagery
Squash, stretch, and fisheye distortion -- exaggerated perspective warps applied to faces, objects, and text
Fractals -- Mandelbrot and Julia set renders, often in rainbow colormaps, used as backgrounds and decorative elements
Water-drop / ripple tools -- circular displacement distortions simulating liquid surface effects
Glow effects -- soft luminous halos around text, lines, and shapes, often in neon colors against dark backgrounds
Abstract CGI -- early 3D renders with visible polygon edges, flat shading, and primitive ray-tracing

Color Palette [SEC.02]

The palette is fundamentally rainbow-spectrum -- thermographic false color applied with maximum saturation. Colors shift abruptly rather than blending smoothly, creating banded, posterized regions.

Primary Palette

#000000

Deep BG

#0A0A2E

Dark Navy

#FF1A1A

Hot Red

#FF6600

Blaze Orange

#FFD700

Bright Yellow

#00FF41

Neon Green

#00FFFF

Elec. Cyan

#0044FF

Deep Blue

#FF00FF

Hot Magenta

#8800FF

Deep Violet

Greenscreen Palette

#001100

Near-Black

#004400

Phos. Dark

#00AA00

Phos. Mid

#00FF41

Phos. Bright

#66FF99

Phos. Bloom

Fractal Accent Colors

#0055FF

Cobalt

#00CED1

Electric

#FFBF00

Amber

#FF3399

Neon Pink

#EEFFFF

Bloom White

Usage Notes

Backgrounds are predominantly black or very dark to let neon and thermographic colors glow
Color transitions should be abrupt and banded, not smooth gradients -- use hard color stops
Rainbow gradients should feel synthetic and computational, not natural
Green-on-black monochrome is equally authentic for terminal/HUD overlays
Avoid pastels, earth tones, or muted palettes entirely

Typography [SEC.03]

Warped and distorted display fonts -- the defining typographic trait; letterforms are never "clean"
Fisheye and bulge distortion applied to headlines
Pixelated bitmap fonts for body text and HUD readouts
Monospaced terminal fonts for data overlays and technical text
No conventional serif or sans-serif body text -- everything should feel digitally processed

Font Specimens

VT323 -- Terminal text, HUD readouts

ABCDEFGHIJKLM 0123456789 !@#$%

CRT-style pixel font // Monospace

Press Start 2P -- Headings, pixel-heavy sections

ABCDEFGHIJ 0123456789

Blocky pixel font // Display

Orbitron -- Futuristic headings

EARLY CYBER 2094

Geometric, digital display typeface

Silkscreen -- Small UI text, labels

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Minimal pixel font // UI elements

Major Mono Display -- Decorative headlines

Early Cyber Vision

Monospace with quirky digital character

Warped Text Effects

DISTORTION

THERMOGRAPHIC

Key Design Elements [SEC.04]

Thermographic Imagery

Photographs processed through false-color thermal mapping. Bodies rendered as rainbow heat signatures. Abrupt color bands rather than smooth gradients.

Fractals

Mandelbrot and Julia set renders as backgrounds or decorative panels. Rainbow or electric color ramps. Deep zoom with spiraling, self-similar structures.

Wireframe 3D

Simple geometric solids in wireframe rendering. Green or cyan lines on black. Visible polygon edges, no texture mapping or smooth shading.

HUD Overlays

Targeting reticles and crosshairs. Numeric data readouts with rapidly changing values. Scan-line sweeps and radar displays. Grid coordinates.

Kaleidoscope Patterns

Rotationally symmetric mirrored imagery. Derived from processed video or photos. Mandala-like decorative frames and backgrounds.

Dot Matrix & Halftone

Visible dot patterns from early digital printing. Oversized halftone dots as texture overlays. Grid-aligned circular elements creating tonal variation.

Composition & Layout [SEC.05]

[01] Screen-as-monitor metaphor -- the viewport represents a CRT monitor or early digital display; frame content within a "screen" boundary
[02] Dark field composition -- imagery floats on black or very dark backgrounds, as if displayed in a darkened room
[03] Centered focal point -- key imagery or text placed centrally, often with radial symmetry
[04] Layered data overlays -- HUD elements, readouts, and grid lines layered over primary content
[05] Scan-line horizontal bias -- composition follows horizontal bands and sweep lines
[06] Generous negative space -- isolated glowing elements against darkness create dramatic contrast
[07] Frame-within-frame -- content enclosed in monitor bezels, wireframe boxes, or HUD targeting brackets
[08] No conventional grid layouts -- arrangement feels like a display terminal, not a magazine page

Textures & Surface Effects [SEC.06]

The Early Cyber surface language is defined by CRT display artifacts, digital processing residue, and the raw output of first-generation image manipulation software.

CSS // Scanline Overlay
/* Repeating 2px scanlines */
.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px
  );
}

CSS // Neon Glow
.neon-glow {
  color: #00FFFF;
  text-shadow:
    0 0 4px #00FFFF,
    0 0 11px #00FFFF,
    0 0 19px #00FFFF,
    0 0 40px #0088FF,
    0 0 80px #0088FF;
}

CSS // Thermographic Gradient
.thermographic {
  background: linear-gradient(180deg,
    #FF1A1A 0%, #FF6600 15%, #FFD700 30%,
    #00FF41 45%, #00FFFF 60%, #0044FF 75%,
    #8800FF 90%, #FF00FF 100%
  );
}

CSS // Pixelation Effect
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

SVG Distortion Filters [SEC.07]

SVG filters provide the key distortion effects that define Early Cyber typography and imagery -- fisheye warps, posterization, and solarization.

SVG // Fisheye Distortion
<filter id="fisheye-distort">
  <feTurbulence type="turbulence"
    baseFrequency="0.01" numOctaves="2"/>
  <feDisplacementMap in="SourceGraphic"
    scale="15"/>
</filter>

CSS // Solarization
.solarized {
  filter: saturate(2) contrast(1.5)
          invert(0.15) hue-rotate(30deg);
}

Animation & Motion [SEC.08]

CSS // Scan-Line Sweep
@keyframes scan-sweep {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
/* 6s linear infinite */

CSS // Data Flicker
@keyframes data-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%            { opacity: 0.7; }
  96%            { opacity: 0.4; }
}
/* Simulates CRT data readout instability */

CSS // Glitch Displacement
@keyframes cyber-glitch {
  0%, 95%, 100% { transform: translate(0,0); }
  96%  { transform: translate(-3px,1px);
         filter: hue-rotate(90deg); }
  97%  { transform: translate(2px,-1px);
         filter: hue-rotate(180deg); }
}
/* step-end timing for harsh digital artifacts */

CSS Techniques Summary [SEC.09]

Technique	CSS Property / Approach
Thermographic color	linear-gradient with rainbow hard stops on text or backgrounds
Neon glow	Multiple text-shadow or box-shadow with same-hue colors at increasing blur
CRT scanlines	repeating-linear-gradient with 2px transparent/dark alternation
Screen curvature	border-radius + deep inset box-shadow
Pixelation	image-rendering: pixelated on images and canvases
Fisheye distortion	SVG feTurbulence + feDisplacementMap filters
Posterization	SVG feComponentTransfer with discrete table values
Solarization	Combined saturate(), contrast(), invert(), hue-rotate() filters
HUD grid overlay	Two-axis linear-gradient background-image at fixed intervals
Wireframe borders	Thin solid borders (1px solid) in neon green or cyan on black
Data flicker	@keyframes with rapid opacity steps
Monitor frame	border-radius + border + box-shadow to simulate CRT housing
Rainbow text	background-clip: text with multi-stop linear gradient
Greenscreen mono	Single hue (green) at varying lightness for all UI elements

Cultural Context [SEC.10]

Television

Doctor Who title sequences (1982-1986) -- pioneering use of early CGI
ITV The Chart Show (1986-1998) -- computer-generated graphics for music programming
GamesMaster intro (1992-1998) -- CG head, wireframe environments, thermographic visuals
Red Dwarf (1988-1999) -- lo-fi spaceship computer interfaces
ReBoot (1994) -- first fully CGI-animated television series

Film

The Lawnmower Man (1992) -- virtual reality sequences with primitive CGI
Hackers (1995) -- stylized representations of cyberspace
Johnny Mnemonic (1995) -- data visualization and VR environments
Batman Forever (1995) -- neon-soaked Gotham computer interfaces

Music

Tangerine Dream -- album artwork with fractal imagery and electronic landscapes
Billy Idol, Cyberpunk (1993) -- thermographic and distorted digital imagery
Cabaret Voltaire -- pioneering electronic music with early digital video art