Where 1940s detective cinema collides with near-future dystopia. Dark backgrounds, singular neon accents, rain-slicked reflections, and Art Deco elegance wrapped in monospaced data streams.
Open Case FileTypeface Specimens
Art Deco display headings paired with utilitarian monospace body text
Rain-Slicked Neon Palette
Near-blacks punctuated by rationed accent light -- one neon sign reflected in a rain puddle
Active Investigations
Cards with top-edge light bars, Art Deco inner frames, and neon hover states
Every illuminated element should feel motivated by a source -- a desk lamp casting amber across a dossier, a terminal screen washing cold blue over the operative's face, headlights cutting through rain.
Horizontal light-stripe patterns cut across surfaces, borrowing the quintessential noir visual signature -- slats of light falling through half-closed blinds in a private investigator's office.
Art Deco-influenced display faces with geometric elegance share space with monospaced terminal readouts. Cinzel headlines beside IBM Plex Mono data -- the detective's desk meets the server room.
Surfaces glisten with moisture, stretching and distorting neon reflections across asphalt, glass, and metal. Rain streaks are rendered as subtle repeating gradients that drift slowly downward.
Unlike cyberpunk's maximalist neon overload, Tech Noir restricts itself to one primary accent with a secondary used sparingly. The scarcity of color makes each glow emotionally powerful.
Corrugated metal, brushed steel, concrete, diamond plate, and wire mesh textures ground futuristic elements in physical grit. Every surface tells a story of weathering and use.
Operative Directives
Rules for constructing interfaces that breathe shadow and speak in neon
Every illuminated element should feel like it has a source and a reason. Light is not decoration but storytelling -- an amber desk lamp, a cold blue terminal, a red neon sign bleeding through rain-streaked glass. Build your layout on the deepest background color first, then introduce lighter surfaces and accent glows incrementally.
Unlike minimalism's white space, Tech Noir uses black space -- empty areas are not empty but filled with shadow, danger, and hidden information. Use shadow to suggest depth and let content emerge from darkness rather than sit on a flat background. The majority of each composition lives in darkness.
Restrict accent colors to one or two per composition for maximum emotional impact. With such a restricted palette, each accent color carries consistent semantic meaning: blue for interactive, amber for informational, red for danger and dramatic emphasis. Scarcity makes each glow worth noticing.
Rain streaks, venetian blind overlays, and fog gradients create cinematic depth and mood -- but never at the expense of readability. Body text must maintain strong contrast ratios even on the darkest backgrounds. One atmospheric overlay per section; stacking too many creates mud, not mood.
Visual Techniques
Cinematic effects built entirely with CSS -- no image assets required
Repeating linear gradients at a slight angle, animated with translateY to drift downward continuously.
Horizontal stripe overlays with slight rotation, layered over a directional amber light source.
Layered text-shadow with decreasing opacity at increasing blur radius, plus a subtle flicker animation.
Overlapping radial gradients at different positions create volumetric depth between foreground and background.
Typewriter font with stamped classification headers and redacted text blocks using matching background-color.
Fine repeating horizontal lines over a terminal-green radial glow simulate vintage display output.
Interactive Elements
Transparent buttons with thin borders and extending light-line hover effects
In a city drowning in data, some secrets still prefer the dark. The future is not bright and clean -- it is smoky, rain-soaked, and morally ambiguous. Every shadow hides a story. Every neon glow illuminates a choice.— The Tech Noir Directive
Initiate Contact
If the data tells one story and your instincts tell another, trust the instincts. We operate in the spaces between jurisdictions, between the neon and the shadow.
Open Encrypted Channel