# Design Language for undo.systems ## Aesthetics and Tone undo.systems is staged as **a working archaeology of its own page** — a site that is visibly being un-made and re-made in front of you. The governing conceit: every screen is a *palimpsest*, a surface that remembers what it used to be. Older states of the layout bleed through as faint, mis-registered ghosts beneath the current one, the way a wiped chalkboard keeps a grey memory of yesterday's diagram, or a manuscript scraped clean still shows the under-writing in raking light. The aesthetic word is **glitch — but slowed down, deliberate, almost reverent**: not the violent datamosh of a corrupted MP4, but the gentle *temporal smear* of a long-exposure photograph, of an oscilloscope trace fading, of a tape head dragging across a half-erased reel. The emotional register is **mysterious-moody crossed with grounded-earthy** — the calm of a restorer in a quiet workshop, not the panic of a system crash. `undo.systems` should never feel like an error state. It feels like *control over time*: the dignity of being able to step backward, the small mercy of Ctrl+Z, the engineer's quiet confidence that nothing is ever truly destroyed if there's a log. Tone: a conservation lab that happens to be a version-control system. Whispered, not shouted. Precise, not slick. There is grit in this world — film grain, paper tooth, the analog hiss under the digital signal — and the grit is the point. This is **not** a glassmorphism site, **not** a hand-drawn site, **not** a card-grid landing page. There are no frosted panels, no marketing photography, no pricing tiles. The frequency analysis shows glassmorphism at 85%, hand-drawn at 95%, card-grid at 93%, cursor-follow at 89% — undo.systems refuses all four. ## Layout Motifs and Structure The structural spine is a **single horizontal timeline that scrolls right-to-left** — but the experience runs *backward*: you begin at the present (chapter "now", far left of the conceptual film strip) and scroll into the past, each screen-width section peeling back one revision. This is **horizontal-scroll** layout (8% in the cohort) fused with a **timeline-vertical** logic rotated 90°. The page is roughly seven full-viewport panels wide, ~700vw, joined by no gutters — sections butt directly against each other like frames of celluloid, with **sprocket-hole perforations** running along the top and bottom 6vh of the entire strip as a continuous decorative rail. Within each panel the composition is **layered-depth** done as *strata*, not parallax-blur: 4–5 stacked translucent sheets, each one a "previous version" of the panel's content, offset by 2–6px and progressively desaturated/blurred toward the back, so the live layer reads crisp on top of its own fossil record. Think of it as **registration drift** — the misalignment of colour plates in cheap offset printing — used as the primary spatial device. A faint cyan/magenta fringe separates the front layer from the ghosts. A persistent **scrub-bar** lives along the bottom edge: a thin horizontal track with a draggable playhead, marked with notches at each panel boundary, labelled `v7 · v6 · v5 …`. Dragging it scrubs the whole strip. There is **no top navigation menu** — the scrub-bar *is* the navigation, and it is the only persistent chrome. Section breaks are marked by a **2px hairline rule that "rewinds"**: it draws itself right-to-left when a panel enters view, like a tape counter ticking down. Negative space is used as **margin-of-revision**: generous empty bands left of and right of each block of text, where the ghost-layers are allowed to peek out farthest, so the eye reads "here is the thing, and here, in the margin, is what it was." ## Typography and Palette **Three Google Fonts, each with a clear job.** - **Major Mono Display** (display + headings, regular only). A monospace with crisp engineered terminals — carries every chapter title and the version labels. Set huge: 88px / 1.0 line-height for panel titles, **always uppercase, tracked +80**, and **always rendered twice**: a sharp live copy plus one or two offset ghost copies in 18% opacity behind it (the headline as its own palimpsest). This is the **tech-mono** voice — undo.systems is, after all, a *systems* site. (tech-mono sits at 16% — common enough to be legible, uncommon enough to feel chosen.) - **Newsreader** (body + long-form running text, regular + italic). A screen-tuned serif revival with a warm, slightly inky colour on the page — used for all paragraph text and the narrative voice. Set 19px / 1.7, max 62ch measure. Italic is reserved for *quoted previous versions* of a sentence — struck-through-then-restored phrasing rendered in Newsreader italic with a faint underline-draw. (serif-revival 17%.) - **Space Mono** (captions, scrub-bar labels, marginalia, timestamps). Tiny — 12px, tracked +40, used for every `v6`, every `2026-05-11T09:14Z`, every diff marker (`+`/`−`) in the gutters. Lowercase. **Palette — a developed-photograph / aged-paper world, warm but desaturated, with two cold accents that read as "the signal".** - `#15110D` — *bistre black*: the deepest ground, the colour of exposed-and-fixed photo paper in shadow. Primary background of the present panel. - `#241D14` — *peat*: secondary ground, the strata behind the front layer. - `#E8DDC8` — *bone bond paper*: primary text colour on dark, the warm not-quite-white of old typing paper. - `#A89878` — *raked-light grey*: the colour of the ghost-layers, marginalia, secondary text — the "memory" colour. - `#C9402E` — *redline vermilion*: the editor's-pencil accent. Used only for *deletions in the diff*, the scrub-playhead, and the single most important word per panel. Sparing. Loud when it appears. - `#3FA7B8` — *oscilloscope cyan*: the cold "live signal" accent — the colour of *additions in the diff*, the right-to-left rule lines, and the chromatic-aberration fringe (paired with a faint `#B83F8E` magenta ghost). This is the only thing on the page that ever looks digital. Warm-vs-cold is doing real work here: **the past is warm and grainy; the present-edit is cold and sharp.** As you scroll backward, panels grow progressively warmer and lower-contrast — the deep past is almost monochrome sepia. ## Imagery and Motifs No photography of people or products. The imagery is **generative-art + grain-overlay + paper-aged textures**, built entirely in CSS/SVG/canvas: - **The sprocket rail.** A continuous SVG band of film perforations top and bottom — but each perforation is subtly *different* (some rounded, some torn, some doubled) so it reads hand-spliced, not machine-perfect. - **Registration-drift fringe.** Every front-layer block carries a 1–3px cyan/magenta edge offset — the signature motif. It *breathes*: drifting ±1px on a slow 6s loop, so the page feels like it's settling but never quite locks. - **Diff ribbons.** Down the left margin of any text block, a thin column of `+` (cyan) and `−` (vermilion) marks, like a code-review gutter — but the "removed" lines are still faintly *there*, strikethrough-and-greyed, occupying their old vertical space. The page literally shows its own deletions. - **Tape-counter numerals.** Version numbers rendered as **split-flap / odometer digits** that physically roll when the scrub-bar passes a boundary — `7` flips down to reveal `6`. - **Onion-skin overlays.** Section-illustration moments use *animation onion-skinning*: 3–4 frozen frames of a simple line drawing (a hand pressing a key, an hourglass tipping, a knot untying) stacked at 25% opacity, the way an animator checks motion — and on scroll the live frame brightens to 100% while the others stay as ghosts. - **Raking-light texture.** A subtle diagonal gradient + fine grain layered over everything, evoking a manuscript photographed at a low angle so the under-writing shows. - **Knot / un-knot glyph.** A recurring small SVG: an overhand knot that, on hover or scroll-trigger, **draws itself in reverse** (path-draw-svg) until it's a straight loose thread. This is the brand mark of `undo`. ## Prompts for Implementation Build undo.systems as **one HTML document, one CSS file, one small vanilla-JS ES module — no framework, no router, no build step beyond a single bundling pass.** It is one continuous *horizontal* strip, ~700vw, seven panels, scrolled right-to-left, with the vertical scroll wheel mapped to horizontal travel (and proper touch/drag on mobile, falling back to a stacked vertical reading order if `prefers-reduced-motion` or narrow viewport — but design *for* the horizontal experience). **Storytelling is the organizing principle, not navigation.** The seven panels are seven revisions of a single short fable — the story of `undo` itself: Panel 7/"now" (a finished, clean state) → Panel 6 (an edit being made) → Panel 5 (a mistake) → Panel 4 (the discovery that mistakes can be reverted) → Panel 3 (the first journal/log) → Panel 2 (raw beginnings) → Panel 1/"genesis" (an almost-blank page, deep sepia, the cursor blinking on an empty line). Scrolling backward is *literally undoing the page*. The visitor lands at "now", scrolls into the past, reaches genesis, leaves. There is no second page; the site does not link out except a single faint mailto in the genesis panel's margin. **Animation language — every motion is reversible and time-themed:** - **`morph`** (14% in cohort): headlines and shapes morph between their "current" and "previous" forms as the scrub-bar crosses a boundary — letters of a word physically rearranging into the older phrasing. - **`path-draw-svg`** (49%, but used here in *reverse* — paths *un*-draw) for the rule lines, the knot glyph, the onion-skin frames. - **`typewriter-effect`** (17%) used *backwards*: in the genesis panel, text *un*-types — characters retreating into the cursor — on a loop. - **`counter-animate`** (18%) for the odometer version numerals. - **Scrub physics:** the playhead has weight — release it mid-drag and it eases (`spring`, but heavily damped, ~0.85) to the nearest panel notch, dragging the whole strip with it. - **Chromatic-fringe breathing** as described — a permanent, near-subliminal ±1px cyan/magenta drift. - Layer-strata don't parallax-blur on cursor; they shift on *scroll position* only. **No cursor-follow, no magnetic buttons, no tilt-3d cards** — those are the cohort defaults (89% / 77% / 32%) and undo.systems explicitly avoids them. **AVOID:** CTA-heavy layouts, "Get Started" hero buttons, pricing blocks, stat-grids / counter-rows of vanity metrics, testimonial carousels, frosted-glass panels, hand-drawn doodle decorations, generic three-column feature cards. If a marketing trope wants in, the answer is no — this is a narrative artifact, not a landing page. **Performance/accessibility:** out of scope per instructions — but do keep a sane stacked-vertical fallback so the fable is at least *readable* without the horizontal mechanic. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **The palimpsest mechanic as the load-bearing concept.** The entire site is a stack of its own previous states, with ghost-layers, registration drift, and a left-margin diff gutter that keeps deleted content visibly present. No other site treats "the page remembers what it was" as the central spatial device. 2. **Backward horizontal scroll = literal undo.** Right-to-left travel through seven *revisions* of one fable, with a weighted scrub-bar as the only navigation chrome and odometer/split-flap version numerals. Horizontal-scroll is only 8% of the cohort; *reversed, version-indexed* horizontal scroll is unique here. 3. **"Slow glitch" — chromatic aberration as a calm, breathing texture, not a crash effect.** A permanent ±1px cyan/magenta fringe + film grain + raking-light, in a warm desaturated bistre/bone palette where *the past is warm and grainy and the present-edit is cold cyan/vermilion*. Glitch is 10% in the cohort and almost always used as violent datamosh; this is the opposite reading. 4. **Reversed animations.** Path-draw-svg that un-draws, typewriter that un-types, morph that reverts to older phrasing — the motion vocabulary itself enacts "undo". 5. **Chosen seed/style:** `abstract glitch art tech` (from seeds.json) — interpreted as a quiet conservation-lab palimpsest rather than corrupted-video chaos. 6. **Avoided patterns from frequency analysis:** glassmorphism (85%), hand-drawn (95%), card-grid (93%), cursor-follow (89%), magnetic (77%), tilt-3d (32%), warm-only/gradient palettes' typical glossy treatment, photography-led imagery (98%) — none appear; instead horizontal-scroll, timeline logic, layered strata, generative + grain + paper-aged imagery, morph and reversed path-draw.