Mechanical watch-inspired precision with gears, jewels, and timed delivery states. Audience: Founders who buy exact delivery and systems thinking.. Emotional target: calm, engineered, valuable.
Implementation guide
Clockwork guide
This guide records the brief, asset pipeline, implementation choices, proof labels, iteration notes, and reusable lessons for fable 29.
CSS dials and SVG gear diagrams. The generated mark is CSS-first, so it deploys without heavy media and stays fast on mobile.
Static HTML, one CSS file, one JavaScript file, semantic landmarks, one H1 per route, internal guide link, and a reduced-motion branch.
Proof labels
Real: JD Workshop process language and the existence of this built demo. Concept: the client scenario, sample artifacts, and art direction. Built demo: the live static page, guide route, interaction button, responsive layout, and local verification script.
Iteration notes
Pass 1Established visual system and proof labels.
Pass 2Added responsive grid, mobile collapse, and contrast checks.
Pass 3Added interaction upgrade, reduced-motion handling, and static verification.
Reusable lesson
Timepiece metaphor makes this variation distinct from the other fables. The production lesson is to make the proof surface match the buyer's decision style while keeping labels explicit.