palette · dna1In the files
Neon tubes on a black club wall
Anchored to
party energy quality · own predictionneon surface · own predictionJ Balvin music · own prediction
Translates: party energy · neon
InterpretationParty energy becomes saturated hot pink, amber and teal glowing on near-black, with a sun-bleached cream for reading text.
#0d0b0a#ff2e88#ffb300#1fc8b0#f4ead8
Made with css-palette for “Neon night heat”: Colours live as custom properties used through var().
typography · dna2In the files
Poster capitals over a quirky street grotesk, with typed captions
Anchored to
street culture quality · own predictioncrime and power quality · own prediction
Translates: street culture · crime and power
InterpretationStreet culture and the weight of power become tall condensed capitals set huge and tight, over a contemporary grotesk for body text, with a typewriter face for dossier captions.
Two turntables. No lookouts. Drop the needle.
Bebas Neue
Two turntables. No lookouts. Drop the needle.
Space Grotesk
Two turntables. No lookouts. Drop the needle.
Courier Prime
letter-spacing: .02em
Made with library-font for “Barrio pride”: Bebas Neue, Space Grotesk and Courier Prime are fetched and loaded locally.
imagery · dna4In the files
Spinning record under neon palms
Anchored to
neon surface · own predictiontropical surface · own prediction
Translates: neon · tropical
InterpretationNeon and tropical surfaces become an inline drawing: a grooved record with a pink label, two neon palm fronds and a sun line behind it.
#herosvg#record-hero
Made with inline-svg for “Neon night heat”: No image generator; an inline SVG draws the record and palms and can spin.
motion · dna5In the files
Thirty-three and a third, with a flickering tube
Anchored to
tense pacing · own predictionparty energy quality · own prediction
Translates: tense
InterpretationTense pacing becomes a constant 1.8-second turn of the record (33 1/3 rpm) and a nervous neon flicker on the headline, both paused on request.
@keyframes spin@keyframes flickeranimation: spin 1.8s linear infinite
Made with css-motion for “Neon night heat”: Keyframes spin and flicker with reduced-motion fallback and a pause button.
voice · dna6In the files
Defiant counter talk
Anchored to
defiant tone · own predictionplayful tone · own predictionLatin American identity quality · own prediction
Translates: defiant · playful
InterpretationA defiant, playful tone becomes short street-wise lines spoken from behind the counter, with the facts kept exact.
Two turntables. No lookouts. Drop the needle.
Mondays we lie low.
Thursday, 19:30. Everybody in.
Made with copy for “Barrio pride”: Lines written around the fixed facts.
layout · dna7In the files
Taped evidence cards, tilted
Anchored to
gritty pacing · own predictionNarcos: Mexico TV · own prediction
Translates: gritty
InterpretationGritty becomes cards pinned slightly off-axis with tape strips, as on an evidence board.
#evidence-boardtransform: rotate(-1.5deg)
Made with css-layout for “The case file”: Rotated cards with pseudo-element tape on a grid.
Away from the sketch: 1 new part
structure · dna3In the files
The page as a numbered case file
Anchored to
documentary-like pacing · own predictionScarface film · own predictioncrime and power quality · own prediction
Translates: documentary-like
InterpretationDocumentary grit becomes exhibits: each section carries a typed exhibit number and a stamped caption, like a dossier on the shop.
#exhibit-crates#exhibit-corner#exhibit-thursday#visit#newsletter
Made with css-layout for “The case file”: Section ids and typed exhibit labels build the case-file order.
Away from the sketch: 3 new parts