palette · dna1In the files
Copier grey, toner black, one riso-blue spot ink
Anchored to
Raw look quality · newLo-Fi mood quality · predictedthe Microphones music · new
Translates: Raw · Lo-Fi · Minimalist
Through the convention: Photocopied DIY cassette and zine inlays: grainy black toner on grey copier paper, heavy pasted-up headlines, one off-register spot ink
InterpretationRaw and Lo-Fi drawn as a photocopied tape inlay: a cool grey paper ground instead of cream, dense toner black, a mid toner grey for halftone, and a single cobalt spot ink printed slightly off register.
#dcdcd7#151515#2a45c9#8a8c8e
Made with css-palette for “Raw tape and abstract rap”: Custom properties hold the four inks for the whole page.
Away from the sketch: 2 colours
typography · dna2In the files
Pasted-up heavy grotesque over an indie grotesk, typewriter for times
Anchored to
Experimental mood quality · newAbstract Hip Hop look quality · newMadvillain music · new
Translates: Experimental · Abstract Hip Hop
Through the convention: Underground rap white-label 12-inch sleeves: plain stock, a rubber-stamped title, a round centre-label sticker
InterpretationExperimental, abstract rap sleeves stamp a heavy black title onto plain stock: Archivo Black set tight and cut against the edge, Familjen Grotesk for reading, Cutive Mono in lowercase for days and times like a typed insert.
Records for people who listen all the way through.
Archivo Black
Records for people who listen all the way through.
Familjen Grotesk
Records for people who listen all the way through.
Cutive Mono
letter-spacing: -0.04em
Made with library-font for “Raw tape and abstract rap”: The three families are loaded from fetched files.
Away from the sketch: 3 type families
imagery · dna5In the files
Stamped white-label record and the two-turntable corner, drawn in toner
Anchored to
Textural surface · newSculptural surface · new
Translates: Textural · Sculptural
InterpretationTextural and Sculptural surfaces become flat line drawings with halftone dots: a white-label record with a rubber-stamped name, and the listening corner's two turntables as stacked volumes.
#listening-corner-drawingsvg#white-labelsvg#turntable-pair
Made with inline-svg for “Raw tape and abstract rap”: No pictures on this server; the record and turntables are drawn inline.
Away from the sketch: 1 new part
motion · dna4In the files
A slow, pensive turn of the white label
Anchored to
Pensive pacing · newQuiet pacing · predicted
Translates: Pensive · Quiet
InterpretationPensive, quiet pacing becomes one record label turning slowly with linear easing and nothing else looping; a pause button stops it, and reduced motion halts it.
@keyframes slow-turnanimation: slow-turn 14s linear infinite
Made with css-motion for “Austere reflective indie cinema”: A keyframed rotation on the SVG label with a pause control.
voice · dna6In the files
Plain words to the regulars
Anchored to
Thoughtful tone · newIdentity meaning quality · newThe 1st Shop of Coffee Prince TV · new
Translates: Thoughtful · Identity · Character driven
InterpretationA thoughtful tone about who you become among a shop's regulars: short, plain sentences in the second person, no exclamation marks, nothing sold hard.
Records for people who listen all the way through.
Two turntables in the corner. Play it before you take it home.
Thursdays at 19:30, we listen together.
Made with copy for “Regulars of a small place”: The lines are written into the page.
layout · dna3In the files
Repertory programme week and a black Thursday title card
Anchored to
Atmospheric look quality · newReflective mood quality · newFrances Ha film · new
Translates: Atmospheric · Reflective
Through the convention: Repertory cinema programme sheets: a typewritten grid of days and times
InterpretationAtmospheric, reflective indie films open on a black title card with small plain type and wide margins; the shop's week is set as a typed repertory programme grid, Monday struck through.
#week-programme#thursday-cardgrid-template-columns: repeat(7, 1fr)
Made with css-layout for “Austere reflective indie cinema”: A seven-column grid and a dark card are plain CSS layout.
Away from the sketch: 2 new parts
structure · dna7In the files
Shelf cards tucked into the bins
Anchored to
Community-Oriented tone · newCharacter driven mood quality · new
Translates: Community-Oriented · Character driven
Through the convention: Hand-written staff-pick shelf cards tucked into record bins
InterpretationCommunity and character become the page's spine: the shop's offer is told on three tilted shelf cards, the way staff note a record in the bins, ending at a counter with the address and the newsletter.
#shelf-cards#countertransform: rotate(-1.5deg)
Made with css-layout for “Regulars of a small place”: Tilted cards in a grid are CSS layout.
Away from the sketch: 2 new parts