# Design Language for footprint.moe ## Aesthetics and Tone footprint.moe is **a Memphis-Milan kitchen at 3am, lit by twenty-seven mismatched birthday candles, where someone is laying out a magazine on the linoleum floor about every footprint they have ever left behind.** The site is an energetic, candle-warm, terrazzo-flecked editorial spread — Sottsass's 1981 pastel grammar collided with a serif-revival book review supplement, photocopied on cream paper, lit by guttering paraffin, and laid out on the floor of a small studio apartment for twelve minutes of slow reading. The conceit: every visitor leaves *footprints* — a trail of pastel pawprints, sneaker treads, geta-sole pressings, dance-step diagrams, candleholder ring-marks, and one barefoot kid-sized impression — that follow the cursor around the page in a staggered, springy, wobbly delay, then fade like wax cooling. **The footprints are the navigation, the chrome, the chrome-trim, and the ornament.** They accumulate. By the time the reader has scrolled to the bottom, the entire margin gutter is a soft pastel terrazzo of where their cursor has been. The tone is **energetic** in the Memphis sense — gleeful, oversaturated, pattern-on-pattern, color-against-color, geometry-against-organic-curve — but anchored by a **serif-revival** body typography that refuses to be cute. The result is a site that *feels* like a children's pastel sticker album whose captions were written by a typographer in 1962. It is **not** kawaii. It is **not** convention-pop. It is a magazine, with a candle on the corner, and pastel terrazzo seeping in from the edges. The mood is **3am-energetic-not-frantic**: the energy of someone arranging colored paper cutouts on a kitchen floor while the cat watches from the chair, candle-wax drifting onto the linoleum, milk going cold in a glass. Cheerful, generative, tactile, slightly silly, and very precisely typeset. ## Layout Motifs and Structure The structural commitment is **magazine-spread (6% in the registry — actively claimed as the dominant grid)**. The page is laid out as a continuous, vertically-flowing **printed-magazine recto/verso** with seven discrete spreads, each spread being a true two-page facing layout. The viewport is treated as the open binder of the magazine; the **central gutter is rendered as a 24-pixel hand-stitched seam** with three pastel embroidery floss colors crossing it (Memphis pink, terrazzo mint, candle-gold). **The seven spreads, in scroll order:** 1. **Spread 01 — *Title Page***. Recto: oversized serif-revival masthead "footprint.moe" set in 184px Cormorant Garamond, the dot of the `.` rendered as a tiny terrazzo-flecked candle flame. Verso: a Memphis squiggle-rule (the iconic Sottsass squiggle, redrawn in pastel mint), an issue number rendered as `vol. 27, no. 1, candle-hour edition`, and a single small pastel pawprint that drifts upward when the cursor enters the spread. 2. **Spread 02 — *Index of Footprints***. Recto: a numbered list of twelve footprint types (paw, sneaker, geta, ballet, candleholder ring, baby foot, bird claw, bicycle tire, snail trail, ink blot, lipstick kiss, wax drip), each with a tiny inline SVG print and a serif-set Roman numeral. Verso: a Memphis terrazzo-pattern pull-quote in a lavender-frame, "*Every footprint is a small confession.*" 3. **Spread 03 — *The Paw Pressing***. A single full-bleed candle-lit photograph (rendered entirely in CSS gradient + grain-overlay, no actual photo) of a pastel pawprint being pressed into wet plaster. Caption set as a serif column on the verso. 4. **Spread 04 — *Memphis Sole Diagram***. A technical diagram, in 80s Memphis blueprint style, of a sneaker tread reduced to its constituent geometry — circles, zigzags, terrazzo flecks. Hover any geometric element and a serif annotation appears in the margin. 5. **Spread 05 — *The Wax Ring***. The ring-mark left by a candleholder on linoleum, rendered as a concentric pastel halo. The reader's cursor leaves a *new* ring every 3 seconds of stillness, the rings stagger-fading on a 900ms cascade. 6. **Spread 06 — *The Reader's Trail***. A meta-spread: the entire trail of footprints the reader has accumulated so far is replayed, sped up, in a Memphis-bordered window in the center of the spread. 7. **Spread 07 — *Colophon and Wax Seal***. Serif-set colophon listing the candles burned, the type used, the cat's name. A single drippy wax-seal SVG closes the page. **Spatial system:** - **Page grid:** `grid-template-columns: 1fr 24px 1fr` for desktop (recto / gutter / verso). Below 900px viewport, the magazine *folds* into a single column and the gutter becomes a horizontal 16px stitched separator between former-recto and former-verso. - **Vertical rhythm:** 8px baseline, but every spread has a 2-row Memphis-style **stagger offset** — the verso column is shifted down by 56px relative to the recto, so the eye reads in a pastel zigzag, not a clean horizontal pair. This is the **stagger pattern (76% — high but here used spatially, not temporally)** taken into the layout itself. - **Margins:** Generous outer margins (96px desktop, 24px mobile). The outer margins are not empty — they are the **footprint reservoir**, where the cursor trail accumulates and slowly drifts off-page like seabirds. - **Page numbers:** Set in tiny 11px Cormorant Italic, lower outer corner, with a Memphis-style decorative dingbat (alternating: a triangle, a squiggle, three dots, a half-circle). The grid breaks deliberately on Spread 04 (the diagram spread), where the sneaker-tread illustration is allowed to bleed across the gutter and become a single landscape illustration — a printed-magazine convention called the "double-truck." ## Typography and Palette **Typefaces — Google Fonts only, all verified available:** - **`Cormorant Garamond`** (variable, wght 300–700, italic and roman) — the principal **serif-revival** face for the site. Used for masthead (184px), spread titles (64px), drop caps (96px Cormorant Garamond Bold Italic), and pull-quotes (32px italic). Cormorant is a contemporary serif-revival drawn by Christian Thalmann that rebreathes Claude Garamond's 1530s romans with extreme contrast and a slightly sharpened, contemporary skeleton — exactly the right shape against Memphis geometry, because it provides a *humanist anchor* against the synthetic 80s pastels. The italics are unusually expressive (high-contrast cursive), used for every figure caption and every footprint name. - **`PT Serif`** (regular and italic, 400 and 700) — body copy, set at 16px / 26px line-height, letter-spacing `0.005em`. PT Serif is a transitional **serif-revival** with a slab-influenced rectangle, deliberately less ornate than Cormorant — chosen for paragraph readability so the reader can actually finish the magazine. The 18-line article body on Spread 03 is set in PT Serif. - **`DM Mono`** (regular, 400) — used *sparingly* for the issue/volume number, the colophon technical specs, and the coordinates of each footprint within the page. The mono lends the magazine a 1980s technical-supplement feel without dominating, contributing to the **tech motif (14% — light touch)**. **Type scale (modular, 1.250 ratio):** - 11px (page numbers, micro-captions) - 14px (figure-numbers, mono coordinates) - 16px / 26px (body — PT Serif) - 20px (sub-captions, italic) - 24px (block quotes) - 32px (pull-quotes, Cormorant italic) - 48px (sub-spread titles) - 64px (spread titles) - 96px (drop caps) - 184px (masthead) **Palette — `creamy-pastel` (4% in the registry — actively claimed) layered with `candle-atmospheric` warm glows:** - `#FBF1DC` — **Cream of Linen** (the page substrate; warm, slightly yellow, like aged book paper under candlelight) - `#F8C8DC` — **Memphis Pink** (the dominant pastel; Sottsass cotton-candy; used for footprint pawprints, squiggle-rules, and the title masthead's subtle drop-shadow) - `#C5E8D8` — **Terrazzo Mint** (the secondary pastel; used for the verso embroidery floss in the gutter, the Memphis squiggle on Spread 01, and the wax-ring halo bands) - `#F4E0A8` — **Candle Gold** (the warm radiant; used for the candle-flame `.` on the masthead, the wax-seal on Spread 07, and the cursor-pool warm glow that follows the cursor) - `#B8C8E8` — **Pastel Periwinkle** (cool counterpoint; used for the bird-claw print, the snail trail, and the page-number dingbats) - `#E8B8B0` — **Dusty Salmon** (used for the lipstick-kiss footprint and the Memphis terrazzo flecks in the larger pastel patterns) - `#3D2E2E` — **Deep Cocoa** (the body-copy color; not pure black, soft warm dark like printed brown ink on cream paper; used for all serif text) - `#7D5A3F` — **Walnut** (a secondary text color; used for figure captions, page numbers, and the colophon) The palette is intentionally **soft-saturated** (not pastel-washed-out): each color is at roughly 80% saturation but high luminosity, so the page reads as *cheerful* rather than *muted-vintage*. The grain-overlay (described below) lifts every color with a tiny stipple of warm noise so nothing is ever quite flat. ## Imagery and Motifs The visual world is built from five motif families, all composed in SVG, CSS gradients, and one full-page tiling **grain-overlay** PNG. **Zero photography (98% in the registry — its exclusion is the largest deviation).** Zero stock illustration. Zero anime character art. Zero rendered 3D. **1. Grain-overlay (imagery: grain-overlay, 9% in the registry — actively claimed as the page's primary material).** A single 512×512 tiling `grain.png` (~28kb) is overlaid on the entire page at 12% opacity, mix-blend-mode `multiply`. The grain is a dual-frequency **risograph-print stipple**: a coarse 60-DPI dot at one layer plus a fine 180-DPI noise at a second, intentionally misregistered by 1px so the grain has the wobbly "ink-just-off" feel of a community-zine photocopier. Every pastel color picks up this grain and reads as *printed*, never as *pixel*. The grain is the *thing that makes Memphis pastels feel like a real 1981 magazine and not a Figma export.* **2. The twelve footprint family (the ornament + the navigation).** Twelve hand-drawn SVG footprint glyphs, each ~140 bytes, all in the same 24×24 viewBox, all single-path: - **Paw** (cat-paw, four toes + center pad — Memphis Pink) - **Sneaker tread** (zigzag chevrons + circle heel — Pastel Periwinkle) - **Geta** (Japanese wooden sandal, two parallel rectangles — Walnut) - **Ballet point** (almond shape with a single ribbon line — Dusty Salmon) - **Candleholder ring** (concentric circles with a wax-bleed — Candle Gold) - **Baby barefoot** (small heel + five toes — Memphis Pink) - **Bird claw** (three-pronged Y — Pastel Periwinkle) - **Bicycle tire** (single curved tread — Deep Cocoa) - **Snail trail** (wavy line ending in a spiral — Terrazzo Mint) - **Ink blot** (irregular blob — Deep Cocoa) - **Lipstick kiss** (two parted lip arcs — Dusty Salmon) - **Wax drip** (teardrop with a single bead — Candle Gold) These follow the cursor in a **staggered, springy** trail: every 80ms of cursor movement spawns one footprint glyph at the cursor's position, picking the next glyph from a randomly-shuffled rotation of the twelve. Each footprint has a stagger-spring entrance (translate from cursor center, scale 0 → 1, rotate ±15°) over 600ms with 240ms stagger-delay, then idles for 4 seconds, then fades to 0 opacity over 1.2 seconds. The result: the page accumulates a soft pastel terrazzo of the reader's path, then slowly forgets it. **3. Memphis terrazzo pattern (motifs: candle-atmospheric + Memphis pastel mosaic).** Used on the verso of Spread 02, the inner border of every pull-quote, and the wax-seal background on Spread 07. The terrazzo is a generative SVG composition: 80–120 randomly-placed tiny shapes (triangles, half-circles, three-dots, squiggles, zigzag bars) in the six-pastel palette, scattered on a Cream-of-Linen base, with the grain-overlay applied. The shape vocabulary is Sottsass-true: - The **squiggle** (`M0,12 Q3,4 6,12 T12,12 T18,12 T24,12`) - The **zigzag bar** (M0,8 L4,4 L8,8 L12,4 L16,8) - The **lozenge** (a pointed oval rotated ±20°) - The **half-circle** (`M0,12 A6,6 0 0 1 12,12`) - The **terrazzo fleck** (small irregular polygons) - The **three-dots** (Bauhaus-via-Memphis dot triplet) **4. Candle-atmospheric warm-pool (motifs: candle-atmospheric, 6% in the registry — actively claimed).** A single soft radial-gradient pool, 320px diameter, in Candle Gold (`#F4E0A8` at 0.4 opacity center → 0 at edge), follows the cursor with a 280ms spring-delay. Where the cursor lingers, the candle pool brightens (opacity bumps to 0.55 over 1.2 seconds of stillness). When the cursor moves quickly, the pool stretches and trails like a flame in a draft. The pool is `mix-blend-mode: multiply` over the cream paper, so it deepens warmly rather than glowing — like a real candle held two inches above the page. The footprints rendered *inside* the candle-pool radius are 30% more saturated (a custom CSS variable interpolation): cold prints made warm by the candle's reach. **5. The seven candle SVGs.** Each spread has one small candle SVG in the upper-outer corner, drawn in two-stage SVG (base + flame) with a **CSS-only flicker**: the flame path animates `transform: scale(1, 1.06) translate(0, -1px)` on a 320ms ease-in-out alternating cycle, with a tiny random jitter (CSS custom property animated by JS at 8Hz). The candle is the *clock* of the magazine: as you scroll deeper, the candle on each subsequent spread is shorter (74%, 68%, 60%, 52%, 44%, 36%, 28%). On Spread 07 the candle is a stub with a wax pool at its base — the magazine is closing, the candle is dying. ## Prompts for Implementation Build footprint.moe as **one HTML document, one CSS file, one ES module, and three asset files**: `grain.png` (512×512 risograph stipple, ~28kb), `terrazzo-pattern.svg` (the generative Memphis pattern, embedded once and reused via ``), and `wax-seal.svg` (the closing seal). Twelve footprint SVGs and seven candle SVGs are inlined in the HTML. **No framework, no build pipeline, no service worker, no chatbot, no analytics.** One stylesheet, one script, no React, no Vue. **The page is a 4–6 minute slow-scroll through seven magazine spreads.** There is **no CTA, no signup form, no newsletter capture, no pricing block, no feature grid, no stat-grid, no team page, no testimonial carousel, no cookie banner, no logo wall, no FAQ, no contact form, no "as seen in," no email gate.** It is a magazine. It does not want anything from the reader. **Document order:** 1. **Spread 01 (Title)** — masthead, issue number, first cursor entry triggers the first footprint. 2. **Spread 02 (Index)** — twelve footprint types listed in serif numbered form, each with a tiny SVG inline preview that *animates a press-down* on hover (180ms scale 1 → 0.92 → 1, with a candle-gold flash). 3. **Spread 03 (Paw Pressing)** — full-bleed CSS-gradient "candle-lit photograph" of a pawprint in plaster, with serif body article in the verso column. The article is a 280-word essay on the cat that lives at the magazine's office, set in PT Serif with a Cormorant drop cap. 4. **Spread 04 (Sole Diagram)** — sneaker-tread blueprint that double-trucks across the gutter; hovering any zigzag chevron reveals a serif annotation in the margin. 5. **Spread 05 (Wax Ring)** — concentric pastel halo with idle-stillness wax-ring spawning behavior. 6. **Spread 06 (Reader's Trail)** — replay window showing the user's accumulated trail. 7. **Spread 07 (Colophon)** — type credits, candle-count, wax seal closing the magazine. **Animation behaviors (the patterns claim: stagger, with no parallax and no cursor-follow-card):** - **Footprint trail:** spawn rate 80ms, max 60 simultaneous footprints (older fade first), stagger 240ms, spring entrance, 4s idle, 1.2s fade. - **Candle pool:** 280ms spring-follow, brightens on linger, stretches on velocity, mix-blend `multiply`. - **Stagger reveal on scroll:** when each spread enters the viewport, its constituent elements (title, columns, decorative shapes, page-number) reveal in a Memphis-cascade — staggered by 80ms each, with a 6° rotation entry that springs to 0°, scale 0.94 → 1, opacity 0 → 1, 720ms total. Five elements per spread, so each spread "lays itself out" over about 1.1 seconds as you scroll into it. - **Candle flicker:** 8Hz CSS-variable jitter on the flame path, scale + translate, perpetually animated. - **Drop-cap grow:** the Cormorant drop cap on each spread is rendered with a `font-variation-settings` animation: `wght 300` → `wght 700` over 1600ms when the spread enters viewport, so the drop-cap *fattens up* into place. - **Wax-ring spawning (Spread 05):** if the cursor remains within the spread for 3 seconds without moving, a new concentric wax ring is born under it; up to 7 rings can co-exist before the oldest is shed. - **No parallax. No card-flip. No tilt-3d. No cursor-follow card-magnetic. The site's only sustained motion is the trail, the pool, and the flickering candles.** **Story beats (the storytelling spine):** The reader arrives at a magazine. The candle is lit. Their cursor begins to leave footprints. They read about the twelve types of pressings a body can leave on the world. They read a small essay about a magazine cat. They study a sneaker tread. They watch a wax ring grow. Then the magazine shows them their own accumulated trail. Then it closes itself with a wax seal. The candle is now a stub. The page does not invite them to do anything afterward — the magazine is over. **Performance note:** the site is one HTML, one CSS (~22kb), one JS (~7kb), three assets (~34kb total). Total weight under 100kb. Runs at 60fps on a 2018 MacBook Air. **No accessibility-led decisions and no responsive-mobile-first compromises** — the design is laid out for a desktop magazine reader at 1280px+ first, then folded to mobile. Color contrast is determined by the editorial mood, not by AAA targets. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by the frequency analysis: 1. **Memphis-Milan as a serious editorial substrate, not as a kitsch nostalgia gag.** Memphis aesthetic is at 7% in the registry — most appearances treat it as a one-note pastel kitsch reference (squiggles, terrazzo, "fun"). This design takes Sottsass's 1981 design grammar (the squiggle, the zigzag bar, the lozenge, the half-circle, the terrazzo fleck, the three-dot) as a *real* layout system, hybridized with the magazine-spread layout, and forces it to live alongside a serif-revival typography that refuses to be cute. Memphis here is the *grammar of shapes*, not the *vibe of nostalgia*. No site in the registry pairs Memphis with serif-revival editorial — they are normally treated as opposites. 2. **Magazine-spread layout taken as a true two-page printed-magazine binder, not as a one-pager metaphor.** Magazine-spread is at 6% in the registry; where it appears it is usually a single hero "magazine cover" treatment. This design renders **seven actual recto/verso spreads** with a hand-stitched 24-pixel gutter, a real double-truck on Spread 04, and serif-italic page numbers with Memphis dingbats on every outer corner. The gutter is not decorative — it is structural, and the spread-vertical-stagger makes the eye read in a pastel zigzag. 3. **Footprints as the page's only ornament, accumulating into a personal terrazzo.** No site in the registry uses cursor-trail behavior as the *content* of the design. Every other design with cursor-follow (83% of the corpus) uses it for a single follow-light or magnetic button. Here, twelve hand-drawn footprint SVGs spawn at the cursor position in a stagger-spring cascade, accumulate up to 60 simultaneous, and slowly fade — turning the magazine into a *literal record of where the reader has been*. By Spread 06, the reader sees their own trail replayed. The footprints are the navigation, the chrome, the brand, and the soul of the page. 4. **Candle-atmospheric used literally, with seven shrinking candles as the magazine's clock.** Candle-atmospheric is at 6% in the registry. This design renders seven SVG candles — one per spread — that *get shorter as you scroll deeper*, with a CSS-only flicker on each flame, and a 320px warm-pool radial gradient that follows the cursor in a `multiply` blend-mode. The candle is not decorative; it is the **metronome** of the magazine, and on Spread 07 it is a wax stub. 5. **Creamy-pastel palette grounded by deep-cocoa serif body type.** Creamy-pastel is at 4% in the registry, almost always used in combination with hand-drawn fairycore. Here it is paired with **a serif-revival editorial body type set in Deep Cocoa** — the serif refuses to let the pastels become saccharine. The result is a magazine that reads like a Sottsass-curated zine printed in 1982 by a serious typographer who happened to like cotton candy. 6. **Grain-overlay applied as the page's primary material, dual-frequency risograph stipple.** Grain-overlay at 9% in the registry — claimed here as the substrate that makes every pastel feel printed-and-not-pixel. The dual-frequency stipple (60 DPI + 180 DPI misregistered by 1px) is specifically not "noise.png from CodePen" — it is engineered to feel like a community-zine photocopier with slightly-off rollers, and it is what carries the design from "Figma pastel mood" into "real 1981 magazine." 7. **Stagger pattern claimed both temporally (animation) and spatially (layout offsets).** Stagger is at 76% — universally used for animation cascades. Here it is also used as a *spatial primitive*: every verso column is shifted down 56px from its recto, so the reader's eye reads in a pastel zigzag down the page. Stagger as a visual rhythm, not just a motion behavior — a deliberate Memphis inversion of the normal magazine grid. 8. **Energetic tone delivered through density, not speed.** Energetic is at 15% in the registry; the typical interpretation is fast motion, dopamine-neon, big counters, a 0.4s tween. Here, energetic is delivered through **density of pattern, density of color, density of typographic voice** — a Memphis-pattern terrazzo, twelve footprint glyphs spawning per cursor pass, seven candles flickering, six pastel hues alternating. The motion is slow, the energy is in the *information texture*. This is a more architectural reading of "energetic" than the registry's tendency. **Chosen seed (planned, from assignment):** `aesthetic: memphis, layout: magazine-spread, typography: serif-revival, palette: creamy-pastel, patterns: stagger, imagery: grain-overlay, motifs: candle-atmospheric, tone: energetic` **Avoided overused patterns surfaced by frequency analysis:** photography (98%), full-bleed (93%), parallax (95%), cursor-follow (83% — claimed *only* for the trail-content, not as a navigational chrome), card-grid (82%), hand-drawn (96% — claimed *only* for the twelve footprint glyphs as a small, contained ornament), gradient (97% — claimed *only* for the candle-pool radial, not as a dominant background), warm (97% — claimed but anchored against deep-cocoa serif, not as a wash), magnetic (75%), spring (81% — claimed only as the trail and pool follow-physics).