palette · dna1In the files
Unbleached linen, lamp-black and one dusk blue
Anchored to
Intimate look quality · newNeutral Color Palette surface · newNatural Fibers surface · new
Translates: Intimate · Neutral Color Palette · Natural Fibers
InterpretationNeutral colour and natural fibres become undyed linen and stone greys with near-black ink, like a silver print on rag paper; intimacy keeps contrast soft on the grounds and lets a single dusk blue (the hour streetlamps come on) carry every action.
#3a4a66#8b8780#161616#efece6#d9d6cf
Made with design-tokens for “Close looking, plain materials”: The project keeps every colour as a token read through var(), so the palette changes in tokens.json and tokens.css only.
Away from the sketch: 2 colours
typography · dna2In the files
Editorial condensed serif over a literary humanist sans, with mono frame numbers
Anchored to
Intimate look quality · newThe New Yorker brand · new
Translates: Intimate · Signature Serif Font
InterpretationAn intimate look becomes a narrow, light serif for titles that reads like a caption under a print; a calligraphic humanist sans keeps the notes warm and legible; a calm mono numbers the frames. The magazine is evidence of a serif-led reading culture, not a font to copy.
Walk slowly. Notice the small things.
Instrument Serif
Walk slowly. Notice the small things.
Alegreya Sans
Walk slowly. Notice the small things.
DM Mono
letter-spacing: 0.08em
Made with library-font for “Close looking, plain materials”: The three families are fetched locally and set through the font tokens, so every screen picks them up.
Away from the sketch: 3 type families
imagery · dna3In the files
Hairline plan of Port Calder, hatched like woven thread
Anchored to
Natural Fibers surface · newHeritage Inspired surface · new
Translates: Natural Fibers · Heritage Inspired
InterpretationNatural fibres and heritage become an original single-weight line drawing of the fictional harbour, canal, hill and pier, with hatched water like a woven ground, set on the welcome screen as an old survey plan.
#welcome-plansvg#port-plan
Made with inline-svg for “Close looking, plain materials”: No image generator is available, and a hairline survey plan is naturally a vector drawing coloured by the ink token.
Away from the sketch: 1 new part
motion · dna5In the files
Slow breathing pulse on the current stop
Anchored to
Hypnotic pacing · newSlow burn mood quality · newAtmospheric mood quality · new
Translates: Hypnotic · Slow burn · Atmospheric
InterpretationHypnotic, slow-burning pacing becomes one even six-second swell of the current route mark, repeated four times and then still, with no overshoot; reduced motion removes it.
@keyframes slow-breathanimation: slow-breath 6s ease-in-out 4
Made with css-motion for “Atmosphere that takes its time”: A finite CSS keyframe loop on the current route mark, removed under reduced motion.
voice · dna8In the files
Short, warm, observant lines
Anchored to
Thoughtful tone · newLove meaning quality · newReflective mood quality · new
Translates: Thoughtful · Love · Reflective
InterpretationA thoughtful, reflective tone with affection for place becomes short sentences that invite slowing down and noticing, while every button still says what it does and no fact is added.
Walk slowly. Notice the small things.
Take your time. The next stop will wait.
A short note at every stop, for when you pause.
Made with copy for “Small episodes, felt deeply”: Interface copy in index.html is rewritten in the voice register; walk facts stay in walks.json untouched.
layout · dna4In the files
Square viewfinder for the stop you are at
Anchored to
Observational look quality · predictedBrothers film · new
Translates: Observational · Intimate · Curious
InterpretationObservational, intimate looking becomes a square 1:1 frame with crop marks at its corners holding the current stop's name and note, as if seen through a waist-level viewfinder.
#stop-viewfinderaspect-ratio: 1 / 1
Made with screen-layout for “Close looking, plain materials”: The viewfinder is a new component on the walk screen that wraps the existing stop-name and stop-note hooks.
Away from the sketch: 1 new part
structure · dna7In the files
A walk as a contact sheet of numbered episodes
Anchored to
Gururi no koto film · newForever TV · new
Translates: Episodic montage · Micro observational · Everyday intimacy · Episodic
InterpretationEpisodic montage and micro-observation become the detail screen's spine: the stops laid out as a contact sheet, each a numbered frame with its name, read as a sequence of small everyday episodes.
#contact-sheetfont-variant-numeric: tabular-nums
Made with screen-layout for “Small episodes, felt deeply”: The detail screen's stop list becomes a two-column grid of numbered square frames inside a new contact-sheet section, keeping the detail-stops hook.
Away from the sketch: 1 new part
interaction · dna6In the files
The stop develops like a print
Anchored to
Glass Beams music · newLo Fi Aesthetic pacing · new
Translates: Immersive · Intimate · Lo Fi Aesthetic
InterpretationImmersive, intimate, lo-fi atmosphere becomes a slow reveal: when you reach a stop its name and note rise from a soft blur and low contrast to sharp, as a print develops in a tray.
#stop-frame@keyframes developanimation: develop 1.6s ease-out both
Made with css-motion for “Atmosphere that takes its time”: A keyframe reveal on the stop frame, restarted by app.js each time the stop changes.
Away from the sketch: 1 new part
