Inspired by 1940s Hollywood cinema. Built with extreme contrast, rain-soaked streets, and the quiet elegance of monochrome.
The Archive
Scene I
A single bulb swings overhead. Shadows carve the room into two halves — light and darkness, guilty and innocent.
Case File #001
ColdShe walked into my office on a Tuesday. By Thursday, every trace of her had disappeared from the city records.
Case File #002
ActiveThe fog rolled in thick enough to hide a body. When it lifted, the cargo was gone — and so was the captain.
Case File #003
ClosedA single page, typed on a 1940 Remington. No fingerprints. No return address. Just an accusation.
Case File #004
ActivePhotographs taped beneath a loose floorboard — each timestamped three days before the crime.
The Palette
A grayscale world with two rare accents. Crimson for danger. Gold for revelation. Everything else lives in near-black through ivory.
Void
Background
Smoke
Card BG
Ash
Card Border
Fog
Border Hover
Mist
Text Muted
Bone
Text Sub
Ivory
Text Primary
Crimson
Accent — Rare
Sepia
Accent — Age
Gold
Accent — Clue
Danger. Blood. Revelation. Reserved for calls to action and bleed lines only. Never decorative.
Memory. Age. Evidence worn by time. Secondary accents and vintage texture backgrounds.
A hidden clue. The glint of something important. Focus ring colours and highlight moments only.
Typography Scale
Display — font-serif italic font-bold
Every Shadow Tells a Story
Heading — font-serif italic
The Detective's Notebook
Subheading — font-serif italic text-neutral-400
Scene Two: The Interrogation Room
Label — font-sans text-xs uppercase tracking-[0.25em] text-neutral-500
Case File No. 1947
Body — font-sans text-sm text-neutral-400 leading-relaxed
The rain hammered against the window pane as the detective turned the photograph over in his hands. Something about the reflection in the glass did not add up. He reached for the telephone.
Mono — font-mono text-xs text-neutral-500
#c41e3a — crimson — use sparingly
Building Blocks
Primary — Light Shaft Sweep + Harsh Monochrome Swap
Every button wraps content in a group element. The inner div travels from -translate-x-[200%] to translate-x-[200%] at duration-700, creating a diagonal flashlight sweep through venetian blinds.
Size Variants
Icon Buttons — Light Shaft on Square Format
Interaction System
Four named interaction patterns define Film Noir. Each is slow and deliberate — never below 500ms on buttons, never below 700ms on cards. Hover each demo to feel the difference.
from-transparent via-white/30 to-transparent
-translate-x-[200%] skew-x-[-20deg] → translate-x-[200%]
transition-transform duration-700 ease-in-out
A diagonal “flashlight beam” sweeps across the button face on hover, like light cutting through a venetian blind at 20 degrees. Slow and cinematic at 700ms.
Hover the button to trigger the light shaft
hover:bg-neutral-100 hover:text-neutral-950
hover:border-neutral-100
transition-colors duration-500
A complete binary inversion — dark to light — not a gradual shade change. Reflects 1940s film drama where scenes cut hard between shadow and light. Abrupt and intentional.
Hover to trigger the harsh monochrome swap
repeating-linear-gradient(180deg,
transparent 0px, transparent 4px,
#fff 4px, #fff 6px)
opacity-0 → group-hover:opacity-[0.06] duration-700
Barely perceptible horizontal stripes appear on card hover — like light filtering through half-closed window blinds in a detective's office. opacity-[0.06] is intentionally faint.
Hover this card
Blinds appear at 0.06 opacity
Hover the demo card above to see the blinds appear
w-12 h-[2px] bg-[#c41e3a]
group-hover:w-full
transition-all duration-700 ease-out
A 48px crimson line expands to full card width over 700ms on hover. Simulates a film title card's crimson underline unfurling, or blood slowly spreading across a surface.
Hover this card
Watch the crimson line expand to fill the full width
Hover the demo card above to trigger the bleed
Additional Interaction Rules
Tactile Confirmation
active:scale-[0.98]Every button must include this. Without it, buttons feel like decorative elements — broken affordance.
Focus Ring Dark
focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-950The ring-offset-neutral-950 separates the ring from the dark element, making it visible on black backgrounds.
Slow Easing
buttons: duration-500 / cards: duration-700Noir is slow and dramatic. Never use duration below 300ms. Slowness is inherent to noir weight.
The Code
Pre-Ship Self Check
The Film Noir design system is fully documented and ready. Every shadow, every crimson mark — all by design.