# Design Language for undo.sh ## Aesthetics and Tone `undo.sh` is a **temporal sanctuary for the regretful machine** — a site that exists in the quiet pocket between a command already run and the moment the operator realizes what they have done. The aesthetic is **retro-futuristic calm**: imagine a 1982 mainframe operator's console that has been lovingly restored and moved into a sunlit adobe studio in the high desert. The phosphor is still green, but it reads through amber-tinted glass. The hardware is cold steel; the room it sits in is warm terracotta. Every element lives at this tension: machine precision meeting earthy warmth. The site is not alarming — it is the visual equivalent of someone placing a gentle hand on your shoulder and saying "we can fix this." Operators are calm professionals who have made mistakes and survived them. `undo.sh` carries that same composure. The retro-futuristic tone comes from 1970s-era terminal typography meeting contemporary variable font technology — monospaced rhythm with organic breathing, phosphor-green accents floating on warm ochre backgrounds, and command-line idioms reinterpreted as meditative UI components rather than threatening interfaces. The serene quality is not achieved through softness or pastels. It is achieved through **clarity, unhurried rhythm, and earthy warmth** — the confidence of a system that has been battle-tested and will hold. ## Layout Motifs and Structure The page is built on a **stacked-sections** architecture — but these are not ordinary hero/features/CTA blocks. Each section is a **discrete modal moment** that occupies nearly the full viewport height before yielding to the next. Think of it as a roll of teletype paper: each section is one printed page, and the visitor scrolls through them in sequence like reading incident reports in reverse. **Structural rhythm:** - **Section 1 — The Prompt** (100svh): Full viewport. Dark warm background (#1C1410). A single blinking cursor and the domain name rendered in terminal monospace at massive scale. Below it, a single line of subtext appears character-by-character after a 1.5-second pause. No CTA, no decoration. Just the terminal moment. - **Section 2 — The Philosophy** (90svh): Warm ochre section (#E8D5B0). Large variable-weight display type that breathes as the section enters view. Text laid out as a narrow column (560px max-width) centered in the viewport. The word "undo" appears at headline scale, with its four letters each animating independently — each character's font-weight drifts at its own frequency, like the word itself is thinking. - **Section 3 — The Method** (90svh): Return to dark background (#1C1410). Three command examples shown as actual terminal cards — monospaced, left-aligned, with green phosphor (#8FBF6A) syntax highlighting. Each card is slightly staggered in vertical position (not a grid — a drift) as if printed at different moments on the same teletype roll. - **Section 4 — The Archive** (80svh): Warm sand (#D4B896). A horizontal scroll strip (within the stacked section) showing recovered operations — styled as an old ticker tape or punched card read-out. The strip drifts autonomously at 0.4× scroll speed. - **Section 5 — The Console** (100svh): Final dark section. A minimal input component that reads like a prompt. The footer is the terminal's last line. **Spatial logic:** The stacked sections alternate warm-dark-warm-dark-warm in temperature, creating a breathing pulse through the scroll. No full-bleed photography. No sidebar. No grid visible to the eye — only rhythm. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Primary display — `Space Grotesk`** (variable, wght 300–700, Google Fonts). Used for all marketing text, section bodies, and the philosophy section. Set at wght 320 in resting state; animates to wght 600 as sections scroll into the viewport center. Large display instances run at 72–96px with tight tracking (-0.03em). The variable weight shift creates the sensation that the words are "loading" into their final form. - **Terminal / monospace — `JetBrains Mono`** (variable, wght 100–800, Google Fonts). All command examples, the hero prompt, the domain name rendering, and any code-adjacent text. Set at wght 400 normally; wght 700 on hover. The monospace rhythm is the site's heartbeat — it recurs in all sections as a grounding reference to the machine layer beneath the warm surface. - **Accent numerals — `Fraunces`** (variable, opsz 9–144, wght 100–900, soft optical, Google Fonts). Used only for large isolated numerals — section counters displayed as faint watermarks, a large "—" em-dash separator that punctuates section transitions. Set at opsz 144 for maximum optical softness at display scale. Weight 150, color set at 20% opacity over the section background — present but not demanding. **Palette:** | Role | Color | Hex | |---|---|---| | Background Dark | Charred Oak | #1C1410 | | Background Warm | Desert Sand | #D4B896 | | Background Accent | Adobe Ochre | #E8D5B0 | | Primary Text (dark bg) | Bone Cream | #F2EBD9 | | Primary Text (warm bg) | Ember Brown | #3D2B1A | | Terminal Green (phosphor) | Sage Phosphor | #8FBF6A | | Terminal Amber | Warm Amber | #D4873A | | Gradient Mesh 1 | Terracotta Haze | #C47A52 | | Gradient Mesh 2 | Rust Ochre | #A85C38 | | Gradient Mesh 3 | Sand Gold | #E6C87E | | Subtle Divider | Warm Gray | #7A6A58 | The palette is intentionally warm-earthy. No blues, no purples, no cool tones. The retro-futuristic quality comes entirely from type treatment and layout rhythm — not from neon or chrome. The warmth is what makes it serene rather than threatening. ## Imagery and Motifs **No photographs.** The frequency analysis shows photography at 87% across existing designs — undo.sh opts out entirely. **Gradient mesh backgrounds:** Each dark section uses a subtle CSS gradient mesh — not a flat color, but a 4-point mesh of #1C1410, #261A12, #2E1C10, and #1A130D. The mesh is implemented as a multi-stop radial gradient with low contrast between stops, creating depth without texture. In the warm sections, the mesh uses #D4B896, #C9A87A, #E0C9A0, and #D8BC8E — the desert sand analog. These mesh gradients are the site's primary "imagery." **Cursor-follow reactive halo:** The cursor casts a warm phosphor-green elliptical glow that follows mouse movement across all dark sections. Implemented as a `position: fixed` radial gradient overlay at 12% opacity, color #8FBF6A → transparent, radius 320px. The glow doesn't react to UI elements — it is purely atmospheric. On mobile/touch devices, the glow is replaced by a static centered radiance at reduced opacity (6%). **Motifs — futuristic through restraint:** - **Blinking cursor** `_` — the site's single most-used decorative element. Appears in the hero, in section transitions, and as a subtle loading state on interactive elements. - **Phosphor scan lines** — a subtle repeating linear-gradient overlay (1px translucent lines at 2px pitch, 4% opacity) applied over all dark sections. Not enough to be retro-kitsch; just enough to suggest CRT. - **Command prompt `$`** — used as a section marker/decorator in the navigation strip. Each section is prefixed with its prompt glyph in 12px JetBrains Mono at 30% opacity. - **Ticker tape strip** — the Archive section's horizontal strip uses a ``-equivalent CSS animation (not the actual tag) scrolling recovered command fragments at 20px/sec: `git reset HEAD~1 && ...`, `rm -rf staging/* → restored`, `DROP TABLE orders ...`. Comforting, archival, ambient. - **Thin rule lines** — 1px warm gray (#7A6A58) horizontal rules at section transitions. They do not span the full width — they measure 80% of the content column and are centered, suggesting the natural edge of a printed form. **Futuristic motif interpretation:** The futuristic quality here is not chrome and neon — it is the quiet confidence of an infrastructure that works invisibly. The site implies a system so mature and reliable it can afford to be warm, unhurried, and earthy. The futurism is in the typography's variability and the cursor-reactive glow; the earthiness grounds it. ## Prompts for Implementation Build `undo.sh` as **a meditative scroll through an operator's recovery log** — the site reads like a series of calm terminal sessions from someone who has been fixing things for twenty years and is no longer afraid of mistakes. **Implementation directives:** **Section 1 — The Prompt (Hero):** The hero background is a CSS gradient mesh (#1C1410 base). The domain name `undo.sh` is rendered in JetBrains Mono at 96px, wght 700, color #8FBF6A. Below it, a blinking cursor (`|`) at 24px pulses at 1.1-second intervals. After 1.5s delay, the line `# because every operation deserves a second chance` types in character by character at 28ms/char in bone cream (#F2EBD9) at 20px. The cursor-follow glow is active from page load. No navigation visible in this section — a minimal fixed top bar appears only after scrolling 60px. **Section 2 — Philosophy:** Background #E8D5B0. The word `undo` appears at 120px display scale in Space Grotesk. Implement each of its four characters as independently animated spans: use `@keyframes weight-breathe` with different durations (2.1s, 2.6s, 1.9s, 2.3s) and different `font-variation-settings: 'wght'` ranges (300–560, 320–640, 280–520, 350–600). The breathing is continuous and unsynchronized — the word is alive. Below it, body text at 22px Space Grotesk wght 380, color #3D2B1A, max-width 560px, line-height 1.75. The Fraunces section counter "01" appears as a faint watermark at 180px, wght 150, opacity 0.08. **Section 3 — The Method:** Background #1C1410 with gradient mesh. Three terminal cards: each is a `
` element styled with border 1px solid #7A6A58, padding 24px 32px, border-radius 4px, background rgba(255,255,255,0.02). Phosphor-green (#8FBF6A) for commands; bone cream (#F2EBD9) for comments; warm amber (#D4873A) for flags and options. Cards are positioned with `margin-left` offsets of 0%, 8%, 4% respectively — a gentle drift rather than a rigid grid. Each card entrance: `stagger` animation, translate from +40px Y with opacity 0 to resting position, 360ms ease-out, 80ms stagger between cards.

**Section 4 — Archive:**
Background #D4B896. A horizontal ticker strip 64px tall, anchored vertically at the section midpoint. It uses `animation: marquee-left linear infinite` at 20s duration. Content: 8–12 recovered command fragments in JetBrains Mono 14px. Strip has thin top/bottom 1px #7A6A58 rules. Background of strip: rgba(60,40,20,0.08). The rest of the section above and below the strip is clean warm sand with the Fraunces watermark "03" at 200px, opacity 0.06.

**Section 5 — Console:**
Background #1C1410. A single text input styled as a terminal prompt. Left-side label: `$ undo ` in #8FBF6A, JetBrains Mono. Input field: no border, no box shadow, transparent background, bone cream text, cursor blinking. A `
` below reads `Recovering...` in amber when any input is present (simple JS input event listener). This is not a functional form — it is a theatrical prop that completes the narrative.

**Global:**
- Implement the cursor-follow glow as a `position: fixed` div with `pointer-events: none`, updated via `mousemove` with `requestAnimationFrame` for performance.
- Scan line overlay: a `position: fixed` full-viewport pseudo-element with `background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.025) 1px, rgba(255,255,255,0.025) 2px)`, `z-index: 9999`, `pointer-events: none`, visible only on dark sections (toggle class via IntersectionObserver).
- Use CSS custom properties for all color tokens. Every hex above should be a `--color-*` variable.
- Import both Google Fonts via a single `` with the `display=swap` parameter.
- Variable font axes should be set via `font-variation-settings` rather than `font-weight` shorthand where animation is required.

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = **retro-futuristic**, layout = **stacked-sections**, typography = **variable-fluid**, palette = **warm-earthy**, patterns = **cursor-follow**, imagery = **gradient-mesh**, motifs = **futuristic**, tone = **calm-serene**.

**Differentiators from existing registry:**

1. **Warm palette in a cold aesthetic.** Every retro-futuristic or terminal-themed design in the frequency data reaches for dark-neon, chrome-metallic, or high-contrast combinations. `undo.sh` is the only retro-futuristic site with a warm-earthy palette — terracotta, sand, adobe ochre. The juxtaposition is jarring at first glance and immediately resolving: the machine is warm, the desert is digital.

2. **Variable font breathing as the primary animation.** The frequency report shows cursor-follow at 7% and stagger at 49%. `undo.sh` uses cursor-follow but its signature animation is variable font weight oscillation — the word `undo` breathes through its weight axis continuously, unsynchronized across its four characters. This is distinct from scroll-triggered weight shifts or hover-activated changes: it is ambient, biological, and patient. No other design in the registry uses ambient variable-font-weight oscillation as a hero decoration.

3. **Stacked sections as temporal layers.** The layout alternates warm/dark sections like a stratigraphy — warm layers (light, earthy, daylit) and dark layers (cool, terminal, subterranean) suggest geological time. The visitor doesn't navigate; they descend through recovered strata. The ticker tape Archive section further reinforces this by presenting recovered operations as ambient background noise rather than a feature list. This is narrative content architecture, not sales content architecture.

**Avoided patterns (overused per frequency report):**
- Photography (87% — avoided entirely)
- Parallax (74% — not used; stacked sections have no parallax)
- Warm+gradient generic combinations — this palette is warm but the warmth is earthy terracotta/sand/ochre, not generic warm gradients
- Full-bleed hero photography (avoided)
- CTA-heavy layout (zero CTAs in any section)