A CSS design system pinned to the evidence board. Every component a clue. Every color a lead. Follow the red string.
Cork board browns, caution yellows, forensic whites, and red string accents. The palette of a detective's war room under fluorescent lights.
Cork Board & Paper
Evidence & Danger
Forensic & Lab
Special Elite for typewriter notes, Oswald for bold case headers, Roboto Mono for data and labels, Inter for clean body text. Four voices of the investigation.
CASE NOTES - February 17, 2026
Arrived at scene 0847hrs. Perimeter secured by first responders. Evidence markers placed at locations 1 through 14. Photographed all entry/exit points. Collected samples from REDACTED near the northeast wall. Shell casings recovered: 3x 9mm.
Witness states the suspect vehicle was a dark sedan, possibly late model. Partial plate: XXXXXX.
- Det. R. Martinez, Badge #4471
A 4px base unit creates the measurement grid. Like measuring distances at a crime scene -- precision matters.
Action buttons styled like evidence labels, caution tape, and case file tabs. Each variant signals a different level of urgency.
Form elements styled as case file intake forms. Manila paper background, typewriter-font inputs, and official-feeling labels.
Polaroid photos pinned at angles, manila folder tabs, and index cards. Each card is a piece of the puzzle on the evidence board.
Northeast corner, main room
02.17.2026 - 08:47 AM
9mm recovered under desk
02.17.2026 - 09:12 AM
Rear exit camera, 23:42
02.16.2026 - 11:42 PM
Partial print, window latch
02.17.2026 - 10:05 AM
Martinez Homicide Investigation
Victim found at 0834hrs in ground floor office. Single GSW to the chest. No signs of forced entry. Three persons of interest identified. Forensic sweep in progress.
Waterfront Warehouse B&E
Commercial burglary reported 02.15.2026. Estimated $45,000 in electronics equipment missing. Alarm system bypassed. Possible insider involvement suspected.
LEAD #1:
Bartender at Rosie's confirms suspect was there until 11:30 PM. Check security cam footage to verify departure time.
LEAD #2:
Bank records show $12,000 cash withdrawal 48 hours prior. No record of deposit in any known account. Follow the money.
LEAD #3:
Neighbor reports hearing argument at 10:15 PM. Two male voices. Could not make out words. Dog was barking.
Status notifications styled as dispatch bulletins, lab results, and case updates. Color-coded by urgency level.
Numbered markers, typed tags, and rubber stamps -- the labeling system of an active investigation.
Tent Marker
Tent Marker
Tent Marker
Hex Marker
Hex Marker
Hex Marker
Red Pin
Primary / Urgent
Yellow Pin
Evidence / Caution
Blue Pin
Persons / Intel
Green Pin
Verified / Cleared
Structured case file header components for organizing investigation data at a glance.
Structured evidence registry in table format. Each row represents a catalogued item with chain of custody information.
| Item # | Description | Location Found | Collected By | Type | Time |
|---|---|---|---|---|---|
| 1 | 9mm shell casing | Floor, NE corner | Tech. Wilson | Physical | 08:52 |
| 2 | Latent fingerprint (partial) | Window latch, N wall | Tech. Reyes | Forensic | 09:15 |
| 3 | Blood sample (victim) | Desk surface | Tech. Wilson | Forensic | 09:23 |
| 4 | Surveillance hard drive | Security office, 2F | Det. Chen | Digital | 09:41 |
| 5 | Handwritten note (torn) | Wastebasket, office | Tech. Reyes | Document | 10:02 |
Unlike cinematic noir, crime scene investigation is about bright lights, precise documentation, and methodical processes. Every element should feel like it could be entered as evidence in a court of law.
An evidence board looks chaotic to the untrained eye, but every pin, string, and photo is placed with deliberate intent. Embrace the visual complexity while maintaining an underlying logic to the layout.
Cork, manila paper, polaroid borders, lined index cards. The design relies on real-world materials and their textures. Users should almost feel the grain of the cork and the weight of the paper.
Red means danger, urgency, connection. Yellow means caution, evidence, stop and look. Blue means information, digital, analytical. Green means cleared, approved, verified. Color is a functional tool, not decoration.