Pixel Noir -- Design Aesthetic Reference

// System.fonts

Typography

Bitmap fonts stamped on the pixel grid -- no curves, no smoothing, no mercy.

Display / Hero -- Press Start 2P

The Case Goes Cold

Subheading -- Pixelify Sans

Shadows in the alleyway whisper forgotten names

Terminal / Narrative -- VT323

> The detective lit a cigarette and stared at the rain. The case was going nowhere, but the night was still young.

Body / Long-form -- IBM Plex Mono

In the constrained world of pixel noir, every character must be deliberately placed. There is no room for ambiguity in the grid -- only purpose, restraint, and the relentless pursuit of atmospheric clarity.

Data Readout -- Share Tech Mono

CASE: #0091 | STATUS: ACTIVE | PRIORITY: HIGH
LAST_UPDATED: 2026-03-04T23:47:00Z

UI Labels -- Silkscreen

Navigation / Metadata / Tags / Timestamps

Type Scale Reference

2.5rem Hero Display

1.8rem Section Heading

1.3rem Terminal Narrative

0.95rem Body text for long passages

0.85rem DATA_READOUT: 0x4A6580

0.75rem UI Label / Metadata

All typography renders with -webkit-font-smoothing: none to maintain crisp pixel edges. No anti-aliasing. No sub-pixel rendering. Every glyph snaps to the grid.

// System.palette

Color Palette

Extreme darkness punctuated by rationed amber, blood red, and cold blue moonlight.

Void Black

#080808

Soot

#121212

Charcoal

#1C1C1E

Gunmetal

#2A2A2D

Smoke

#3A3A3E

Ash

#555558

Fog

#7A7A80

Bone

#C8C0B0

Lamplight Amber

#D4A020

Whiskey Gold

#B8860B

Blood Red

#8B1A1A

Neon Red

#CC2222

Midnight Blue

#1A1A2E

Rain Blue

#4A6580

Fluorescent Green

#2A8A2A

// Case.files

Design Elements

Dossiers from the investigation -- each card a piece of the puzzle.

01

Dithering Patterns

Checkerboard and ordered dithering create mid-tones and atmospheric fog without introducing new colors. The pattern is the texture -- embrace the grid.

Texture Atmosphere

02

Chiaroscuro Lighting

Harsh pools of light surrounded by deep shadow, mimicking the high-contrast cinematography of classic noir. Light is earned, never given freely.

Contrast Mood

03

Bitmap Typography

All text rendered on the pixel grid with no anti-aliasing. Monospaced and mechanical -- like typewritten case reports from a 1940s police station.

Pixel Font Monospace

04

Terminal Readouts

Data displays with amber or green phosphor glow, mimicking old CRT monitors. Status readouts, case numbers, and timestamps reinforce the investigative narrative.

CRT Data

05

Neon Sign Accents

Occasional bright color used sparingly to simulate glowing signage against dark cityscapes. One or two neon accents per viewport -- never more.

Glow Restraint

06

Single-Pixel Borders

UI elements use crisp 1px borders with no rounded corners, no gradients, and no soft shadows. Every line is hard, every edge deliberate.

Borders Minimal

// Render.effects

CSS Effects

Pure CSS techniques that bring the noir atmosphere to life -- no images required.

Checkerboard Dithering

Dual 45-degree gradients at 4px scale create authentic pixel dither patterns for mid-tone simulation.

Venetian Blind Shadows

Skewed repeating gradients cast horizontal stripe shadows -- the iconic motif of film noir cinematography.

Neon Flicker

Keyframe-driven text-shadow flicker simulates a faulty neon bar sign buzzing in a rain-soaked alley.

CRT Vignette

Radial gradient darkening at edges replicates the barrel distortion and phosphor fade of old CRT monitors.

Rain Streaks

SVG data-URI rain drops animated in a linear loop -- pixel-scale precipitation on a midnight backdrop.

Terminal Glow

Amber text with soft glow shadows on a void background, complete with a blinking cursor for authenticity.

// UI.buttons

Button Variants

Hard borders, pixel shadows, and rationed color -- every click feels deliberate.

"

Darkness is the default state; light must be justified and deliberate. Every pixel matters -- at low resolution, a single misplaced pixel changes the entire composition.

-- Pixel Noir Design Principles

Pixel Noir