# Design Language for undo.cafe ## Aesthetics and Tone undo.cafe is a **playful tech-tutorial chronicle etched onto city infrastructure** — imagine a zine about keyboard shortcuts and command-line magic printed on the back of a transit map, pasted on a subway wall between two murals, and then animated so that the letters bounce in like they're arriving on a late train. The domain word "undo" is a love letter to `Ctrl+Z`, to the moment of recovery, to the idea that all mistakes are reversible. This is a place where technical tutorials feel like discovering street art: unexpected, energetic, slightly chaotic, but precisely composed underneath. The aesthetic is **playful-bold**: Bebas Neue headlines punch through aurora-washed gradients in the same way graffiti writers punch color through grey concrete. Content is never dry, never corporate — it leans into the personality of the urban hacker who carries a soldering iron in one pocket and a notebook of terminal tricks in the other. Animations are physical and bouncy, as if each piece of content has weight and enthusiasm. The tone is tutorial-friendly without being instructional-sterile: it teaches by atmosphere as much as by text. Primary mood: **energetic, curious, urban, technically playful**. Think: a popup coding workshop in an old print shop, neon signs reflecting in rain puddles, the satisfying clack of a mechanical keyboard at 2am. ## Layout Motifs and Structure The page is a **timeline-vertical running as a city subway line** — a single column that descends like a metro route, where each tutorial stop is a station on the line. The timeline is the page's organizing spine, rendered as a thick vertical rail (12px, `#00FFB2` glowing) running left-of-center through the entire document. Timeline stations dock to this rail with horizontal connector arms, the way a map shows branching lines. **The Metro Spine:** - Vertical rail: `12px` solid `#00FFB2` with a diffuse glow (`box-shadow: 0 0 24px #00FFB280`), centered at `30%` from the left edge on desktop, edge-pinned at `24px` on mobile - Station nodes: `40×40px` filled circles on the rail. Each circle is filled with the aurora gradient at that content section's hue phase. A small icon (matching the tutorial's topic) sits inside each node at `20px` - Connector arms: `3px` horizontal bars extending right from each station node to the content card, with a subtle 45° chamfer at the card edge **Content cards (stations):** - Each station is a full-width content card floating `right` of the spine, with `2rem` of air between card edge and spine connector - Cards are slightly angled: odd cards tilt `−0.4deg`, even cards tilt `+0.4deg`, giving the column a hand-pinned quality - Card width: `min(680px, calc(100% - 120px))` on desktop, `calc(100% - 48px)` on mobile - Cards enter with `bounce-enter` animation: they shoot in from off-right, overshoot slightly, and settle back — spring physics, `cubic-bezier(0.34, 1.56, 0.64, 1)`, stagger `80ms` per card - Entry trigger: each card fires on `IntersectionObserver` at `0.2` threshold **Above the fold:** - Full-viewport hero: the subway map metaphor is literal here — the "map" of today's tutorials is rendered as a transit diagram on a `#0D0D0D` background, aurora gradients bleeding through from behind like bioluminescent city lights at night. The site name `undo.cafe` appears in `100px` Bebas Neue at top-left, and below it a single-line description tracks across: *"Tutorials that unbreak things."* - Hero has a slow looping aurora blob animation behind the type (CSS `@keyframes` blob drift, `20s` loop) **Footer / terminus:** - At the bottom of the metro line, a terminal-style "END OF LINE" marker — a blinking cursor and the word `>_ end_of_line` in mono - Station count ("12 stops today") renders as a small badge on the spine near the terminus ## Typography and Palette **Typography — bebas-bold system with mono accents, all Google Fonts:** Three faces, one hierarchy: - **Display / Headline — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)** — used for the wordmark `undo.cafe`, section headers, station labels, and all tutorial titles. All caps. Used at `72–120px` for hero, `32–48px` for station titles, `20px` for subsection labels. Letter-spacing `0.04em`. Color: always white or `#00FFB2` against dark backgrounds. - **Body / Tutorial prose — [DM Sans](https://fonts.google.com/specimen/DM+Sans)** — used for tutorial body copy, step descriptions, and explanatory text. Weight 400 for body, 600 for inline emphasis, 700 for call-out labels. Size: `16–18px` base, `1.7` line-height. Color: `#E0E6FF` on dark cards. - **Code / Terminal — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)** — used for all inline code, command blocks, keyboard shortcuts, and the footer terminus marker. Weight 400. Rendered against `#1A1A2E` backgrounds with `#00FFB2` text for commands, `#FF6B9D` for output. **Aurora Gradient Palette:** - `#0D0D1A` — Deep space black (primary background) - `#1A1A2E` — Dark navy (card backgrounds, code blocks) - `#16213E` — Midnight blue (secondary surfaces) - `#00FFB2` — Electric mint / aurora green (primary accent, spine rail, headings on dark) - `#7B61FF` — Deep violet (aurora band 2, gradient mid) - `#FF6B9D` — Hot coral-pink (aurora band 3, code output, accents) - `#FFD166` — Warm amber (station node fills on alternate cards, warning callouts) - `#E0E6FF` — Icy lavender-white (body copy, secondary text) **Gradient construction — the Aurora:** ``` background: linear-gradient(135deg, #7B61FF 0%, #00FFB2 35%, #FF6B9D 65%, #FFD166 100%); ``` Used as: card border-left accent (4px), station node fill, hero background wash at low opacity (0.12), and decorative blob shapes behind content. ## Imagery and Motifs **Imagery is organic-blobs + city-urban — no photographs.** The visual language is a collision of two systems: **Urban Infrastructure:** - SVG metro/subway map fragments used as decorative headers between major sections — thin-line route diagrams at `opacity: 0.15` behind card content, the way a photocopied map bleeds through tracing paper - City grid: a `40px` square grid of `#FFFFFF08` dots as body background pattern, subtle enough to read as concrete texture - Station icons inside node circles: pixel-precise 20px SVG icons — a terminal window, a wrench, a circuit, a coffee cup (the cafe motif), a git branch — one per tutorial topic - Manhole-cover circular motif reused as decorative dividers: concentric ring SVGs at `0.08` opacity between major sections **Organic Blobs (aurora plasma):** - Three large blob shapes (SVG `` with CSS `filter: blur(80px)`) positioned in the background of the hero section. Each blob is one aurora color (`#7B61FF`, `#00FFB2`, `#FF6B9D`) at `opacity: 0.25`. They drift on staggered 18–24s infinite keyframe loops, moving `±40px` in both axes with slow rotation `±15deg`. - Smaller blobs (40–80px, `blur(20px)`) appear behind individual station nodes as "aurora haze" around each stop on the line, picking up the local accent color of that card - Blob shapes are CSS-clip-path polygons with many control points, animated with `morphing` keyframes (50-point paths that gradually shift between two organic silhouettes) **Decorative patterns:** - Fine diagonal hatch lines (SVG pattern, `3px` spacing, `0.5px` stroke, `#FFFFFF0A`) overlay card surfaces, evoking photocopy texture - Bounce-enter animation is not only positional — each card entry also triggers a brief `scale(1.03)` → `scale(1.0)` pulse, making the card feel like it landed with physical weight ## Prompts for Implementation Build undo.cafe as a **single vertical metro journey through technical tutorials** — the visitor is a passenger riding a late-night train through a city of knowledge. Every tutorial is a station. The spine glows, the blobs drift, the cards bounce in as the train pulls up. There are no CTAs, no pricing, no stat grids, no testimonial sections. **Macro structure (top to bottom):** 1. **Hero Station (`100svh`).** Full-bleed aurora blob scene on `#0D0D1A`. Three drifting plasma blobs in violet, mint, and coral. Fixed at top: `undo.cafe` in 100px Bebas Neue white. Below the wordmark: a single line in DM Sans 18px `#E0E6FF` — *"Tutorials that unbreak things."* Below that: the metro-style route diagram showing all tutorial stations (their names as stops on a map), rendered as a simplified SVG transit diagram, aurora-colored route lines. The station markers on this hero map pulse with a 2s fade loop. 2. **Timeline Body.** The metro spine begins just below the hero (at the first station node). Cards appear as the visitor scrolls, each firing its `bounce-enter` on intersection. The spine rail is always visible (position: sticky? No — it should be part of flow, rendered as a continuous background bar via `::before` pseudo-element on the container). Odd/even card tilt applied via `:nth-child` CSS. Between every 3–4 stations, a section divider: a full-width manhole-cover motif SVG at `opacity: 0.08` with a Bebas Neue chapter label (`// CHAPTER 02 — TERMINALS`) in `#7B61FF` at 14px. 3. **Card internals.** Each tutorial card: - Left border: 4px aurora gradient strip - Top-left corner: station number in Bebas Neue 64px, `color: #FFFFFF10` (very ghost, structural only) - Tutorial title: Bebas Neue 36px, white - Topic tag: pill badge in matching aurora band color, DM Sans 12px semibold, uppercase - Body copy: DM Sans 16px `#E0E6FF`, max 3 paragraphs visible; longer articles use a `read-more` expand with a gentle `max-height` transition - Code blocks: JetBrains Mono on `#0D0D1A` background, `border-radius: 8px`, with a subtle glow border in `#00FFB220` - Inline `kbd` elements: small raised key-cap buttons, `#1A1A2E` background with `1px #7B61FF` border and `box-shadow: 0 2px 0 #7B61FF` 4. **Station nodes on spine.** Each node (40px circle) has: - Aurora gradient fill (phase-shifted per station) - Topic icon centered inside (20px SVG, white stroke) - On hover/focus: node pulses out a ring (`box-shadow` expansion, 300ms ease-out) - On card entry: node does a quick `scale(0.8)→scale(1.2)→scale(1.0)` pop in sync with the bounce-enter card animation 5. **Footer terminus.** The spine rail terminates in a `>_` blinking cursor (CSS `@keyframes` blink, `1s` step). Below it: `end_of_line` in JetBrains Mono 20px `#00FFB2`. A small station-count badge on the rail: `12 stops` in DM Sans 12px. Social/contact links rendered as metro-style station name boards (white text on colored pill backgrounds). **Animation budget:** - Blob drift: `transform: translate + rotate`, GPU-composited, `will-change: transform` - Bounce-enter: `transform: translateX + scale`, IntersectionObserver-triggered, one `requestAnimationFrame` per card stagger - Node pop: CSS `transition`, triggers on class add from IO callback - All other motion: `prefers-reduced-motion` guard — disable blob drift and bounce-enter, keep static layout fully legible **No:** hamburger menus, hero CTAs, pricing tiers, testimonials, newsletter modals, cookie banners, sticky nav bars, stat counters, feature grids, social proof strips. ## Uniqueness Notes **Differentiators from the existing registry:** 1. **Metro-spine timeline as transit map.** `timeline-vertical` is used here not as an abstract "events in order" pattern but as a literal metro/subway route — the spine is a glowing transit rail, nodes are stations, the hero is a route map diagram. This creates a navigational metaphor unique in the registry (city-urban motif is only at 3% usage, transit interpretation is not recorded at all). 2. **Aurora-gradient as bioluminescent city infrastructure.** Most aurora-gradient deployments (3% in registry) treat aurora as a sky phenomenon — cold, wide, atmospheric. Here it is urban plasma: the glow comes from underground (beneath the station nodes, bleeding up through pavement cracks). The aurora is the city's electrical nervous system, not a weather event. This grounds the playful palette in a specific physical space. 3. **Bounce-enter as physical arrival.** bounce-enter at 2% in registry. Here it is motivated by the transit metaphor: cards don't just animate in — they *arrive at the platform*, with overshoot physics mimicking a train pulling in slightly too fast and braking. The sync between node pop and card arrival reinforces this. 4. **Bebas Neue + DM Sans + JetBrains Mono triple-voice system.** The frequency report shows `bebas-bold` at 6% and `tech-mono` at 5% — but they are never combined with a humanist sans in this registry. The three-voice system (display shout / body warmth / terminal precision) captures the full register of a tech-tutorial site that wants to feel human and energetic simultaneously. 5. **Tutorial content as streetwear, not documentation.** The instructional tone is inverted: instead of clean white documentation pages, tutorials wear the aesthetics of urban print culture (diagonal hatch overlays, manhole-cover dividers, city-grid dot backgrounds). The "undo" metaphor pervades: every visual element suggests reversibility, recovery, second chances — the aurora fades and returns, the blobs morph and restore, the bounce settles. **Chosen seed (per assignment):** `aesthetic: playful, layout: timeline-vertical, typography: bebas-bold, palette: aurora-gradient, patterns: bounce-enter, imagery: organic-blobs, motifs: city-urban, tone: tech-tutorial` **Avoided overused patterns (from frequency analysis):** `centered` (83% — used asymmetric left-spine instead), `full-bleed` (63% — used contained cards), `gradient` (76% — aurora used as infrastructure accent, not wash), `photography` (avoided entirely)