# Design Language for undo.systems

## Aesthetics and Tone

**undo.systems** is a relic cartography of forgotten states — an isometric diorama of the natural world where every action has been gently reversed, rewound, pressed back into the earth like a leaf returning to its branch. The domain reads as a quiet philosophical act: *undo* not as a keyboard shortcut but as the patient undoing of entropy itself — a river filling back into its source, a fallen oak standing upright again, morning frost reassembling itself on a windowpane.

The aesthetic is **isometric botanical archaeology**: an aged naturalist's field study executed as precise axonometric drawings on foxed parchment. The visual register sits at the intersection of 19th-century scientific illustration plate-work and the quiet geometry of early Nintendo isometric maps — both are obsessive, both are systemic, both treat the natural world as a field of rules that can be read and reversed. Every element is drawn from a shared 30°/60° grid as if assembled in a shadow box: moss-covered ruins, oak cross-sections, root systems rendered in perfect axonometric projection.

The tone is **nostalgic-retro but without sentimentality** — more like finding a grandfather's nature journal in an attic, the handwriting still precise, the pressed specimens still holding their color under the foxing and time-stains. Serenity through accumulated detail. The palette is muted autumn: the tawny yellows of old linen, the dusty sage of lichen, the faded ochre of a quince left too long on the branch, the warm grey of dried birch bark.

## Layout Motifs and Structure

The page scrolls **horizontally** — a single panoramic diorama panel extending rightward like an unrolling botanical scroll or a Hiroshige woodblock panorama. The visitor does not navigate pages; they traverse a continuous landscape of isometric vignettes from left (before the undo) to right (after the undo), with the implicit metaphor that moving rightward is moving backward in time — further into the restored state.

**The Diorama Rail.**
- A single horizontal track at `100svh`, no vertical scroll.
- The viewport is 1600 px tall by effectively infinite width — the diorama extends across eight full-viewport "panels" of 100vw each.
- Each panel is a self-contained isometric scene rendered in CSS/SVG: a collapsed stone wall being unbuilt, a forest fire rewinding into green canopy, a dried streambed filling with water, a city grid dissolving back into meadow, a bird's bone reassembling into flight.
- Panels connect seamlessly — the isometric ground plane (`z-index: ground`) runs continuously across all eight, binding them into one world.

**Isometric Grid System.**
- All geometry adheres to a 60 px isometric unit. Blocks, tiles, trees, and ruins snap to a 30°/60° axonometric grid drawn with CSS `clip-path` and SVG `polygon`.
- The ground plane is a hand-stamped hexagonal tile texture in `#C8B99A` (aged linen), with faint ink-printed grid lines at 15% opacity showing the underlying system.
- Objects cast long isometric shadows at 2 px drop-shadow in `#8B7355` offset at the 150° axis — the "afternoon of an autumn day" light angle.

**Scroll Mechanics.**
- Horizontal scroll driven by `wheel` (deltaY maps to `scrollLeft`) and by trackpad swipe.
- A thin progress vine (SVG `<path>` with `stroke-dashoffset` animation) grows along the bottom edge as the visitor scrolls right, its tendrils curling around the scene markers.
- Scene markers: small wax-seal circles stamped in `#7A6228` at each panel boundary, labeled in small-caps numerals I through VIII.
- No sticky header. A small floating compass rose (isometric, top-left, 64×64 px) indicates cardinal direction within the diorama world and fades at 40% opacity unless hovered.

**Composition within each panel.**
- Objects are stacked in isometric layers: underground (roots, aquifers), surface (soil, tile), low (moss, shrubs, stone courses), mid (tree trunks, walls, figures), high (canopy, rooftops).
- The viewer's eye enters from the lower-left of each panel and is led diagonally toward the upper-right by the tallest isometric object.
- Foreground objects are rendered at full opacity; background objects fade to 65% opacity with a subtle `blur(0.4px)` to suggest atmospheric depth without photography.

## Typography and Palette

**Typography — frutiger-clean, all from Google Fonts.**

The typographic system is clean humanist sans-serif used with the precision of a field-guide caption writer — labels, specimen names, timestamps. Never decorative, always functional, but carrying the warmth of a trained naturalist's handwriting translated to type.

- **Primary:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans) — weight 300 for body captions and panel descriptions. The rounded but economical terminals echo Frutiger's humanist DNA without needing the actual typeface. Used at 13–15 px for specimen labels, panel descriptions, and the site wordmark in lowercase.
- **Secondary:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 500 for section sub-labels, wax-seal numerals, and the compass rose legend. Used at 11 px tracked at `+0.12em` for the quiet authority of a field guide's index.
- **Accent / Italic:** [Lora](https://fonts.google.com/specimen/Lora) — italic only, weight 400. Used exclusively for species names, poetic captions beneath each diorama scene, and the site tagline. Lora italic carries the warmth of copperplate without the formality, bridging the humanist sans system and the aged-parchment aesthetic.

**Palette — muted autumn parchment.**

| Token | Hex | Role |
|---|---|---|
| `--parchment` | `#E8DFC4` | Base background; aged linen ground plane |
| `--foxing` | `#C9A96E` | Ground tile lines, wax-seal base, decorative borders |
| `--lichen` | `#8A9A72` | Moss, leaf-layer fills, active vine progress |
| `--slate-bark` | `#6B6456` | Shadow cast, text on light grounds, outlines |
| `--ink` | `#3A332A` | Primary text, specimen labels, compass legend |
| `--ochre-dust` | `#B8843F` | Warm accent: wax seals, highlight on isometric tops |
| `--birch` | `#D4CAB8` | Secondary surface: stone faces, dried reed fills |
| `--sky-amber` | `#F5EDD6` | Sky fill behind tallest isometric objects; atmospheric haze |

No pure black or white. All grays have warm brown undertones. The palette is derived from a Pantone palette for "Victorian herbarium specimens."

## Imagery and Motifs

**All imagery is isometric vector — no photographs, no rasters.** The entire visual vocabulary is SVG geometry snapping to the 60 px isometric unit.

**Nature motifs, systematically organized:**

- **Root systems.** The underground layer of every panel reveals cross-sectioned root networks in `--slate-bark` on `--parchment`, drawn as branching isometric pipes. Roots are the sub-panels' primary decorative motif — they hint that undo goes deeper than the surface.
- **Moss and lichen.** Applied as small hexagonal clusters in `--lichen` on every exposed stone surface. Generated procedurally with `Math.random()` seeding a fixed-seed PRNG so the moss pattern is consistent across reloads. Each hex cluster is a `<polygon>` at 8×8 px.
- **Oak tree cross-sections.** The second panel features an isometric slice through an oak trunk, its growth rings rendered as concentric isometric ellipses in alternating `--foxing` / `--birch`. A label arm points to the "undo boundary ring" — the year the site's metaphorical reversal begins.
- **Bird flight sequences.** A single migratory silhouette (isometric simplified bird, 3-frame sprite) flies right-to-left (backward in the narrative) through every panel at a consistent altitude in the sky layer. It completes a crossing every 20 seconds via CSS animation `@keyframes`.
- **Fern fronds.** Decorative SVG ferns at panel seams, rendered as isometric flat-top extrusions in `--lichen`. They mark the "suture" between panels and provide organic rhythm against the hard geometry.
- **Water surface.** Panel 5 (the streambed re-filling) shows an isometric water plane that ripples via `clip-path` morphing: the water polygon grows leftward (the fill is being "undone-in-reverse" — restored). Ripples rendered as dashed isometric ellipses animated with `stroke-dashoffset`.
- **Paper foxing texture.** A single SVG `<feTurbulence>` noise filter overlaid at 6% opacity across the entire diorama surface, giving every flat plane the grain and foxing of aged paper without compromising the crisp isometric geometry underneath.

**Decorative motifs:**
- Wax seals at panel boundaries: circular SVG with embossed radial design and roman numeral. Rendered in `--ochre-dust` with a 2 px inset shadow.
- Compass rose (top-left): isometric miniature compass, 8-pointed, in `--slate-bark` on `--parchment`, with cardinal letters in DM Sans 9 px.
- Border vine: SVG `<path>` growing along the bottom edge as the visitor scrolls. The vine is in `--lichen`; small leaf sprigs at every 180 px of scroll progress.

## Prompts for Implementation

Build undo.systems as a **single horizontal diorama scroll** — a 19th-century naturalist's panoramic field plate rendered in isometric SVG that the visitor traverses rightward as if unrolling a scroll. No homepage CTA, no pricing, no stats, no testimonials, no feature grids. Pure visual storytelling through botanical isometric geometry.

**Technical architecture:**

1. **Container:** One `<main>` with `display: flex; flex-direction: row; height: 100svh; overflow-x: scroll; overflow-y: hidden; scroll-behavior: smooth`. Eight `<section class="panel">` children, each `width: 100vw; height: 100svh; flex-shrink: 0; position: relative`.

2. **Isometric SVG layer system per panel:**
   - `<svg class="layer-underground">` — roots, buried stones, aquifer lines
   - `<svg class="layer-surface">` — ground tiles, tile grid lines
   - `<svg class="layer-low">` — moss clusters, shrubs, ground-level stones
   - `<svg class="layer-mid">` — walls, tree trunks, figures
   - `<svg class="layer-high">` — canopy, rooftops, bird flight path
   - `<svg class="layer-sky">` — sky fill, atmospheric haze, amber gradient

3. **Scroll hijacking (wheel event → horizontal):**
   ```js
   window.addEventListener('wheel', (e) => {
     e.preventDefault();
     document.querySelector('main').scrollLeft += e.deltaY * 1.4;
   }, { passive: false });
   ```

4. **Progress vine:** SVG `<path>` at `position: fixed; bottom: 0; left: 0` with total width matching the diorama scrollWidth. Animate `stroke-dashoffset` from full path length to 0 as `scrollLeft` increases. Leaf sprigs at every 180 px are `<g>` elements toggled visible via `opacity: 0 → 1` with `transition: opacity 0.3s`.

5. **Bird animation:** A 3-frame `<g id="bird">` animates via `@keyframes birdFlight` cycling through 3 SVG paths at `animation: birdFlight 20s linear infinite`. The bird translates right-to-left (`translateX`) at the speed of the world, so it appears stationary in sky while the panels scroll.

6. **Paper foxing filter** (global SVG `<defs>` in `<head>`):
   ```html
   <filter id="foxing">
     <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
     <feColorMatrix type="saturate" values="0"/>
     <feBlend in="SourceGraphic" mode="multiply"/>
   </filter>
   ```
   Apply as `filter: url(#foxing)` at 6% opacity via `<feComponentTransfer>` on a full-diorama overlay `<rect>`.

7. **Shake-error pattern:** When a visitor attempts to scroll left past panel I (before the start, before the undo is possible), the diorama container executes a horizontal micro-shake:
   ```css
   @keyframes shake {
     0%,100% { transform: translateX(0); }
     15%      { transform: translateX(-6px); }
     30%      { transform: translateX(5px); }
     45%      { transform: translateX(-4px); }
     60%      { transform: translateX(3px); }
     75%      { transform: translateX(-2px); }
   }
   ```
   Triggered by JS when `scrollLeft <= 0` and `deltaY < 0`. Lasts 320 ms. Simultaneously the compass rose pulses red (`#B84040`) for one cycle. This is the only "interactive error" on the page — it communicates "you cannot undo further" without any text.

8. **Panel content (eight scenes, left to right):**
   - **I. The Grid Before** — isometric city grid, straight streets, cut stone
   - **II. The Cracks** — moss and roots beginning to emerge from pavement seams
   - **III. The Overtaking** — ferns and oak saplings pushing through walls
   - **IV. The Ruin** — half-standing stone walls draped in lichen and vine
   - **V. The Streambed Returns** — isometric water plane growing, reed beds
   - **VI. The Old Forest** — mature oak canopy closes over the former grid
   - **VII. The Root Web** — only root cross-section visible; city entirely gone
   - **VIII. The Seed** — a single isometric acorn on bare parchment ground; darkness behind; progress vine complete

9. **Site wordmark:** `undo.systems` in Nunito Sans 300, 14 px, lowercase, `--ink` color, positioned at `position: fixed; top: 24px; left: 32px`. The `.` separating `undo` and `systems` is rendered in `--ochre-dust` to mark the domain split. No logo, no icon — the wordmark *is* the identity.

10. **No sticky header, no footer, no navigation.** The only fixed UI elements are: wordmark (top-left), compass rose (top-left, right of wordmark), wax-seal panel counter (bottom-right, updates as panels enter view via `IntersectionObserver`).

11. **Entry animation (page load):** The diorama fades in over 1.2 s with a right-to-left curtain `clip-path: inset(0 100% 0 0) → inset(0 0% 0 0)` on the `<main>`, revealing Panel I from left. The bird enters from the right edge of Panel I at t=0.8 s, crossing leftward.

**DO NOT implement:** pricing tables, sign-up CTAs, feature grids, testimonials, stat counters, newsletter modals, cookie banners, social media links, hero buttons. The entire site is the experience.

## Uniqueness Notes

1. **Horizontal-scroll at 2% frequency paired with isometric at 6% frequency — a combination absent from the registry.** Horizontal scrolling is extremely rare (2%); isometric is rare (6%); their combination does not exist elsewhere. The diorama metaphor is native to both: isometric scenes *are* horizontal — this is the first design to honor that natural alignment instead of fighting it with vertical stacking.

2. **Shake-error as narrative device, not just UI feedback.** The frequency report shows `shake-error` at 3%. In every other design, shake-error is a form validation microinteraction. Here it is semantic: you cannot scroll left of Panel I because you cannot undo further than the beginning. The shake is the system's memory of irreversibility, expressed through kinetics rather than text.

3. **Paper-aged texture via pure SVG feTurbulence — no raster images.** `paper-aged` appears at 3% frequency, typically implemented with PNG texture overlays. This design achieves the aged-paper aesthetic entirely in SVG filter primitives, keeping the site a pure vector/CSS document consistent with the isometric geometry underneath. The foxing is computed, not scanned.

4. **The "undo" metaphor is the narrative, not the brand.** Most sites use their domain as a label. undo.systems treats "undo" as a geological time-direction — rightward scroll is forward in restoration time, the diorama depicts eight stages of nature reclaiming civilization. The word never appears as a heading; it is performed by the 8-panel sequence.

5. **Nature motifs rendered in the same isometric vocabulary as architecture.** At 3% frequency, `nature-elements` is almost always treated as organic/fluid (watercolor, illustration). Here, nature is isometrically precise: oak growth rings are concentric isometric ellipses; moss is hexagonal-cluster geometry; root systems are branching isometric pipes. Nature submits to the same grid as the city it replaces — the undo is systematic, not chaotic.

**Chosen seed:** `aesthetic: isometric, layout: horizontal-scroll, typography: frutiger-clean, palette: muted, patterns: shake-error, imagery: paper-aged, motifs: nature, tone: nostalgic-retro`

**Avoided overused patterns from frequency analysis:**
- Avoided `hand-drawn` (54% frequency — extremely saturated)
- Avoided `editorial` (50% frequency — dominant aesthetic)
- Avoided `photography` (87% imagery frequency — ubiquitous)
- Avoided `parallax` (74% patterns frequency — overused)
- Avoided `minimal` (44% imagery frequency — overused)
- Avoided `vintage` motif (33% frequency — too common)
<!-- DESIGN STAMP
  timestamp: 2026-05-12T01:18:05
  seed: seed:
  aesthetic: undo.systems** is a relic cartography of forgotten states — an isometric diorama...
  content_hash: ffec167bbc3b
-->