palette · dna1In the files
Sunlit blush ground with a coral chorus and a cobalt night
Anchored to
Intimate look quality · newClassic surface · newMen in Trees TV · new
Translates: Intimate · Classic · Warm
InterpretationIntimate, naturally lit closeness becomes a pale blush-white ground like afternoon light on skin, with a deep indigo ink instead of brown; one coral accent carries the feeling and one cobalt carries the evening (Thursday, the night side). Sunlight yellow is a small highlight only. Classic keeps it to few colours used with restraint.
#fff5f0#1c1a40#ff4f6d#2b4ad8#ffd23f#ffd9e0
Made with css-palette for “Sunlit intimacy with a classic finish”: Colours live as custom properties used through var().
Away from the sketch: 4 colours
typography · dna2In the files
Fashion didone headlines over an expressive grotesque
Anchored to
Energetic look quality · newParisian Elegance surface · new
Translates: Energetic · Parisian Elegance
InterpretationParisian Elegance becomes a high-contrast didone (Prata) set very large and tight for headlines, like a sleeve title; Energetic becomes an expressive, playful grotesque (Bricolage Grotesque) for text, labels and track numbers, set with bold weights and tight tracking on display.
Records for every phase you're in.
Prata
Records for every phase you're in.
Bricolage Grotesque
letter-spacing: -0.02em
Made with library-font for “Anthemic, emotional pop”: Prata and Bricolage Grotesque are fetched from the library and loaded with @font-face.
Away from the sketch: 2 type families
imagery · dna4In the files
Drawn vinyl whose label waxes like a moon
Anchored to
Parisian Elegance surface · newNaturalistic look quality · new
Translates: Parisian Elegance · Naturalistic
InterpretationA classic, elegant surface becomes a fine-lined inline SVG record: concentric groove rings, a coral label with a crescent cut by a cobalt shadow, and a light sheen, drawn in single weights rather than a photo.
#sleevesvg#hero-record
Made with inline-svg for “Sunlit intimacy with a classic finish”: No pictures on this server; a hand-drawn SVG record carries the classic surface.
Away from the sketch: 1 new part
motion · dna3In the files
Chorus rise and a 33 1/3 spin
Anchored to
Anthemic pacing · new
Translates: Anthemic
InterpretationAnthemic pacing becomes headline lines that rise into place one after another like a chorus building, and a hero record that turns at a real 33 1/3 rpm (1.8 s per turn), with a visible pause button and a reduced-motion stop.
@keyframes groove-spin@keyframes chorus-riseanimation: groove-spin 1.8s linear infinite
Made with css-motion for “Anthemic, emotional pop”: Keyframes for the spin and the chorus rise, with a pause control and reduced-motion fallback.
voice · dna5In the files
Emotional, hopeful lines in plain words
Anchored to
Emotional mood quality · newChristina Perri music · newHopeful tone · new
Translates: Emotional · Expressive · Hopeful
InterpretationEmotional and expressive becomes direct second-person lines that admit feelings, kept short and hopeful; the facts stay plain beside them. No lyrics or quotes.
Records for every phase you're in.
Put the needle down. Feel all of it.
Every Thursday at 19:30, we listen together.
Made with copy for “Anthemic, emotional pop”: Lines written in the voice around the fixed facts.
layout · dna8In the files
The newsletter as a letter in an envelope
Anchored to
Letters to Juliet film · newIntimate look quality · new
Translates: Charming · Warm · Intimate
InterpretationA warm, charming film about letters becomes a sign-up laid out as a letter card with a stamp corner and an envelope flap edge, asking for one thing only: an email address.
#b3-lettersclip-path: polygon(0 0, 50% 38%, 100% 0, 100% 100%, 0 100%)
Made with css-layout for “Sunlit intimacy with a classic finish”: A clip-path envelope flap and card layout for the form.
Away from the sketch: 1 new part
structure · dna6In the files
The page as a two-sided tracklist
Anchored to
Gilmore Girls: A Year in the Life TV · predictedComing of age meaning quality · predictedRomantic meaning quality · predicted
Translates: Seasonal anthology · Coming of age · Romantic
InterpretationA seasonal anthology told in chapters becomes a page cut into Side A (the shop: crates, listening corner) and Side B (the evening: Thursday session, visit, letters), each section numbered as a track, A1 to B3, with a tracklist at the top that jumps to each.
#tracklist#side-a#side-b#a1-crates#b1-thursday
Made with css-layout for “Romantic coming of age, in chapters”: Sections and a tracklist nav built in HTML and laid out in CSS.
Away from the sketch: 5 new parts
interaction · dna7In the files
A week of moon phases for the opening hours
Anchored to
Whimsically Reflective pacing · newVulnerable mood quality · new
Translates: Whimsically Reflective
InterpretationWhimsically reflective pacing becomes the hours drawn as seven moons: Monday a new, dark moon (closed), Tuesday to Sunday waxing to full. Today's moon is ringed by a small script, and each moon lifts gently on hover or focus.
#hourssvg#moon-weektransition: transform .4s cubic-bezier(.2,.8,.2,1)
Made with inline-svg for “Romantic coming of age, in chapters”: Seven moons drawn in SVG; a small script marks today.
Away from the sketch: 1 new part