Visual Design Guidelines

Bunker Constructivism: “Damp Basement Cyberinsurgency”

Art direction and visual design system for Babylon: The Fall of America.

Conceptual Foundation

The Shift from Poster to Terminal

We move from “Museum Poster” constructivism to something rawer:

Old Aesthetic

New Aesthetic

Clean geometric lines

Corroded edges

Bright propaganda colors

Phosphor burn, flickering

Flat surfaces

Depth, humidity, texture

Authoritative

Conspiratorial

Public declaration

Private revelation

Colors as Light Sources

Colors are not paint on surfaces. They are light emissions in a dark room. The UI is not a webpage. It is a CRT monitor in a concrete room.

  • The walls sweat. Humidity is visible in the vignette effect.

  • The screen flickers. Not broken—struggling against interference.

  • Dust particles float in the light cone from the monitor.

  • Cables snake along the floor (implied in border treatments).

The Narrative Frame

You operate from a scavenged terminal in a damp concrete bunker. The year is uncertain. The American empire is in its terminal phase. Your mission: Decode reality.

The terminal is not neutral infrastructure. It is a comrade—a piece of resistance technology cobbled together from surveillance equipment turned against its makers.

Art Direction

Scavenged Soviet Hardware

Primary Influence: Operating overheating machines in dark rooms.

  • Bold Constructivist geometry remains, but rendered as wireframes on CRT monitors instead of ink on paper

  • Dynamic diagonal lines traced by electron beams

  • Reference: Aging hardware, phosphor burn, electron beam aesthetics

  • El Lissitzky and Rodchenko, but viewed through a dirty glass screen

Brutalist/Industrial

  • Concrete textures visible in the darkness

  • Stark contrasts from monitor glow against void

  • The Chassis: server racks, inactive panels, cold metal

  • Monumental scale suggested by the unseen infrastructure

Color Palette

Primary Colors (Light Emissions)

Hex

Name

Role

#D40000

Phosphor Burn / The Laser

Active elements with bloom effect. Alert states, ruptured contradiction edges, critical thresholds, cursor blink. Used sparingly—when red appears, it burns. Slightly uncomfortable to look at.

#1A1A1A

Wet Concrete / The Void

The Room itself. Backgrounds with noise texture, film grain at 2-5% opacity. The darkness is information.

#F5F5F5

Terminal Glare

High intensity text, but rendered at lower opacity (60-80%) to simulate phosphor glow rather than paper white. Never pure white.

#FFD700

Exposed Circuitry / The Circuit

Edges, connectors, truth data. Verified data connections, solidarity edges (the real infrastructure), exposed mechanics (what the Prism reveals).

Secondary Colors

Hex

Name

Role

#8B0000

Thermal Warning

Overheating indicators, system stress, deep shadows on red elements.

#404040

The Chassis

Inactive panels, server racks, unlit portions of the interface. The cold metal of the machine.

#C0C0C0

The Dust / Silver

Terminal prompts, secondary text, inactive elements. The dust that settles on everything in the bunker.

Textures & Lighting

The interface is layered with atmospheric effects that simulate hardware decay:

+-------------------------------------+
| LAYER 4: Vignette (damp glass)      |
| +--------------------------------+  |
| | LAYER 3: Scanlines (CRT)       |  |
| | +---------------------------+  |  |
| | | LAYER 2: Film grain       |  |  |
| | | +----------------------+  |  |  |
| | | | LAYER 1: Content     |  |  |  |
| | | | (text, graphs, data) |  |  |  |
| | | +----------------------+  |  |  |
| | +---------------------------+  |  |
| +--------------------------------+  |
+-------------------------------------+

Scanlines

  • 1px horizontal lines every 3-4px

  • Opacity: 3-8%

  • Simulates CRT electron gun scan pattern

  • Subtle but present—the eye should feel them more than see them

Bloom Effect

  • Gaussian blur applied to Phosphor Burn (#D40000) and Exposed Circuitry (#FFD700) elements

  • Creates light bleed at edges

  • Simulates phosphor overload on aging CRT

  • More intense on critical/alert elements

Film Grain / Noise

  • ISO grain overlay on Wet Concrete (#1A1A1A) backgrounds

  • Opacity: 2-5%

  • Constant subtle animation (not static)

  • Creates texture in the darkness

Flicker

  • Border opacity oscillates +/-5% at 0.5-2Hz

  • Applied to active panels and windows

  • Simulates unstable power or signal interference

  • Increases during high system load (contradiction accumulation)

Vignette

  • Radial gradient darkening edges

  • Simulates curved CRT glass

  • Creates focus toward center of attention

  • Enhances “looking through a screen” effect

Typography

Hierarchy (Monospace-First)

Primary: Roboto Mono or Source Code Pro

Data streams, most UI content, statistics, graph labels, narrative text. The terminal speaks in monospace.

Secondary: Futura or DIN

System alerts only. Hardware labels. Rare emphasis moments. The machine’s voice for critical warnings.

Characteristics

  • Monospace dominates—this is a terminal, not a brochure

  • Sans-serif reserved for system-level alerts and hardware identifiers

  • Clear hierarchy through opacity and size, not font variation

  • Text rendered with subtle glow (1-2px blur at low opacity)

Icon Design

Vector Traces on Screen

Icons are not ink on paper. They are vector traces rendered on a CRT screen, phosphor-burned into the display.

The primary icon represents the Tower of Babylon motif with dialectical splits and the suggestion of collapse/transformation:

+-------------+
|     A       |
|    / \      |
|   /   \     |
|  /_____\    |
|     |       |
|  V  |  V    |
+-------------+

Rendered as glowing lines against The Void, with subtle bloom on vertices.

Alternative Icons

Dialectics Symbol

Two opposing arrows forming a circle, representing continuous transformation. Traced in Exposed Circuitry (#FFD700).

Broken Industry

Fractured gear wheel, symbol of systemic breakdown. Rendered with intentional pixel artifacts suggesting data corruption.

Class Struggle

Interlocking class symbols, unified yet contradictory. Pulsing between Phosphor Burn and The Dust states.

UI Elements

Windows and Panels

  • Sharp corners (keep the Constructivist geometry)

  • Glowing borders instead of thin lines—phosphor effect with subtle bloom

  • Borders pulse subtly (flicker effect) to simulate hardware activity

  • No gradients—light comes from the content, not the chrome

  • High contrast for readability against The Void

Interactive Elements

  • Hover states increase glow intensity (phosphor brightening)

  • Click feedback: brief flicker + intensity spike

  • Consistent click/tap targets with visible bounds

  • Active elements glow; inactive elements fade to The Chassis

Data Visualization

  • Geometric shapes rendered as wireframes

  • Strong grid systems in The Dust (#C0C0C0) at low opacity

  • Data points as light sources (bloom on nodes)

  • Constructivist-inspired charts, but rendered as oscilloscope traces

Animation Guidelines

Hardware-Inspired Motion

  • Quick, purposeful movements—electrons don’t meander

  • Geometric paths traced by electron beams

  • Minimal easing—hardware doesn’t smooth, it switches

  • Angular motion paths following Constructivist diagonals

Effects

  • Particle effects as static discharge or data fragments

  • Geometric shape transformations with trace trails

  • Flicker and pulse on state changes

  • Screen tearing on heavy load (contradiction accumulation)

Sound Design

  • Industrial/mechanical ambient: fan hum, drive spin, relay clicks

  • Soviet-era music influences filtered through degraded speakers

  • Static and interference that rises with system stress

  • Alert sounds: sharp electronic tones, phosphor buzz

  • Minimal but impactful audio cues that feel like hardware feedback

Environmental Design

The Bunker

  • Implied concrete walls beyond the screen edge

  • Humidity visible in vignette and occasional condensation effects

  • Cables and infrastructure suggested in border treatments

  • The sense of operating hidden equipment in a forgotten space

Signal Conditions

  • Weather/environmental effects manifest as signal degradation

  • Day/night cycle affects baseline noise levels

  • High repression periods increase static and interference

  • Environmental factors visualized through signal quality, not graphics

Implementation Notes

Priority Elements

  1. Texture layers (scanlines, grain, vignette)

  2. Glow/bloom system for light-emitting elements

  3. Flicker animation system

  4. Typography with monospace dominance

  5. Color semantics as light sources

Technical Considerations

  • Texture overlays via CSS pseudo-elements or canvas layers

  • Bloom effects via CSS filter: blur() or WebGL

  • Flicker via CSS animation on opacity/brightness

  • Performance: texture layers should be GPU-accelerated

  • Consider reduced-motion preferences for flicker effects

Accessibility

  • High contrast ratios maintained (glowing text on void)

  • Flicker effects respect prefers-reduced-motion

  • Alternative text for all icons

  • Keyboard navigation with visible focus glow

  • Scanlines and grain subtle enough to not impair readability

See Also