Each direction is a clickable set: Intro, Development, Episode 1, using one type, color, logo and motion system. Mockups only. The player and Save menu are fake, and Episodes 2, 3 and Soul Food 1 are placeholders. Every page works at phone width and desktop.
Reference Highway gantry signage at night (FHWA green sign panels, white reflective legend, Overpass = Highway Gothic descendant)
Unknown Motion is a path with no visible end. A night road is the one place everyone follows signs into a place they have not been. Steps become exits, the unreleased list becomes the dashed lane line.
Type Overpass 800 caps for signs, Overpass 400 for reading text
Color Asphalt, sign green, reflective white, one hazard amber for "open / released"
Logo Top-left in a white plaque, always
Motion Headlight sweep: content wipes in left to right in 500 ms, nothing bounces
02
Record Sleeve
Reference A 1960s jazz record sleeve (Blue Note / Reid Miles): flat color blocks, giant condensed type cropped to the edge, the back-cover track listing
The product is music first. A sleeve is how people meet music before they hear it, so the site reads like the thing in your hands: Episode 1 is a record, Development is its back-cover listing.
Type Anton caps for everything loud, Libre Franklin for reading
Color Cream stock, ink black, sleeve red, Prussian blue; flat, no gradients
Logo Top-left, ink, like a label stamp
Motion Slap: 260 ms snap up from 10 px, hard ease, no bounce
03
Swiss Grid
Reference Swiss International Style concert posters (Josef Müller-Brockmann): flush-left grotesque, one red, hairline rules, big numerals on a strict grid
Three steps, twelve items, one list: the story is already a numbered sequence, so a grid that counts is the most honest layout. Calm and anonymous, no personality performing, in line with the brand rule that the work speaks.
Type Hanken Grotesk 800 tight for display, 400 for text, flush-left ragged-right only
Color Paper, black, one signal red used only for "now / open"
Logo Top-left, black, on the left margin line of the grid
Motion Almost none: 240 ms fade with a 6 px slide from the left
04
Cut Paper
Reference Saul Bass film title design (Anatomy of a Murder, The Man with the Golden Arm): hand-cut black paper on a flat orange field
The Unknown is shown, not explained. A title card cut from black paper is the oldest way of saying "something is about to begin", and a cut arrow is literally a step in a direction.
Type Passion One caps (cut-letter weight), Work Sans for reading
Color Orange field, black paper, one cream paper for highlights
Logo Top-left, black, cut out of the field
Motion Stop-motion: 380 ms in 4 hard frames, a slight tilt that settles
05
Xerox Zine
Reference A photocopied fanzine: typewriter text, highlighter, marker circles, tape, toner-black on cheap copy paper
Unknown Motion says everyone is fumbling for the first time. A zine is the format of people who made the thing before they knew how. It is honest, hand-made, and it is the opposite of a polished brand site.
Type Special Elite typewriter for headings, Courier Prime for reading, Permanent Marker for hand notes only
Color Copy paper, toner black, highlighter yellow, marker red
Logo Top-left, stamped in toner, slightly tilted
Motion Photocopier flicker: two hard frames (steps), 240 ms, tiny jitter
06
Gallery Wall
Reference Museum wall text and object labels: large serif introductory text, small printed placards, a red dot for what has found a place
Unknown Motion is anonymous and says more by saying less. A gallery shows the work with nothing around it. Released episodes get the red dot, unreleased ones are only a pencil mark where they will hang.
Type Newsreader (serif) for wall text and writing, Public Sans for labels
Color Plaster white, charcoal, one gallery red dot, a touch of brass
Logo Top-left, charcoal, like the museum wordmark
Motion Gallery lights: slow 700 ms opacity fade, nothing moves
The Unknown is unmapped country. A survey sheet is what you hold when you walk into it. Released episodes are surveyed ground with a flag on them; unreleased ones are the dotted route that has not been walked yet.
Type IBM Plex Mono for coordinates and labels, Libre Baskerville for headlines and reading
Color Survey paper, graphite, flag orange for released, water blue for the current spot
Logo Top-left in the sheet margin like a map-maker stamp
Motion The route draws itself: dashed trail wipes down 600 ms, flags drop in
08
Departures Board
Reference Solari split-flap departure boards in rail stations: amber flaps on black, destination and platform columns
Everyone is leaving for somewhere they have not been. A departures board is the one screen people trust to tell them where to go next. Released episodes show flipped letters; unreleased ones are blank flaps waiting to turn.
Type B612 Mono (cockpit font) in flap cells, Barlow Condensed for station-sign headlines, Public Sans for reading
Color Board black, flap grey, amber for the destination, one go-green for open
Logo Top-left on the board housing
Motion Letters flip: each character rolls once, staggered, 360 ms
09
Riso Print
Reference Risograph gig posters: two or three spot-color inks overprinted on uncoated paper, misregistered, with a visible grain
UM is made by people, not a studio. Riso is the print method of small labels and open-mic flyers: cheap, loud, never quite lined up. Fumbles show as misregistration, which is the point of the brand line "your fumbles are the key."
Type Bricolage Grotesque (heavy, tight) for headlines and reading, Spline Sans Mono for labels
Color Uncoated paper, black ink, fluoro orange and teal that multiply where they overlap, sunflower as the third plate
Logo Top-left, black ink with a 3px orange misregistration shadow
Motion Plates land: the orange layer slides 8px into place 320 ms after the black
10
Dawn Line
Reference The existing UM Development look, tightened: a dark sky with a warm horizon glow (Kodak sunrise stills; Young Serif headlines)
The current Development page already feels right to Scott: dark, a light coming up from below. This direction keeps that and fixes what did not match: bolder, readable text, one glow color on all three pages, and released rows that visibly glow.
Type Young Serif for headlines (warm, a little soft), Hanken Grotesk 500+ for reading so it stays legible on the glow
Color Void, cream text, dawn amber, one ember red for emphasis
Logo Top-left, cream, never over the glow
Motion Rise: content lifts 14px and fades in over 600 ms, like the current page