Homepage visual and motion system
Vincent L. Anderson
A demo built for a specific brief. Not client work: the material shown is placeholder content.
Route trace, state change and chart reveal, each playing beside its reduced-motion and static state
I designed a phase-one homepage visual system on a placeholder brand. It holds the stated system as tokens (warm paper, near-black ink, Geist and Geist Mono, 1 px hairlines, one orange accent, green, amber and red for status only), and every composition obeys it: no gradients, glows, blurs or shadows, at most one accent per composition, status colors only on status marks, the dot grid only inside diagram canvases. Three routes are drawn and measured; route B is proposed at 33% image and 39% operational marks under a stated rule. Four crops keep the focal point at least 38% inside every edge. 7 image moments are directed for the homepage and four secondary pages, each paired with an operational mark and given a provenance record to fill as each image is made. 8 modules, and 3 motion moments (route trace, state change, chart reveal) each shown playing, in its reduced-motion state and as its static poster, from one motion spec. Handoff files: tokens, motion spec, asset manifest, image moments, provenance.
The existing system as the source of truth, and three routes
Routes measured against the image rule
Image moments for the homepage and four secondary pages
Reusable modules
Motion, reduced-motion and static states side by side
Provenance record per image
Like this project
Posted Sep 23, 2026
I designed a phase-one homepage visual system on a placeholder brand: routes, image treatment, image moments, modules and motion, all held to the existing design system.
Likes
0
Views
2
