@damiangilgonzalez/harness 1.3.7

package/skills/ingeniero-diseno-web/references/style-recipes/nyt-the-daily.md

@@ -0,0 +1,54 @@
+# nyt-the-daily — New York Times Editorial
+
+- **School**: Information Architecture
+- **Vibe**: Authoritative broadsheet, generations of typographic craft
+- **Best for**: Longform editorial, news / journalism products, narrative explainers
+- **Touchstone**: nytimes.com homepage, NYT Cooking, NYT investigative features
+
+**Palette**
+- Ground: `#FFFFFF`
+- Ink: `#121212`
+- Secondary text: `#666666`
+- NYT red `#D0021B` — used only for breaking-news indicators or sparingly
+- Soft section background: `#F7F7F7`
+- Hairline: `#E2E2E2`
+
+**Typography**
+- Display: Cheltenham (NYT's proprietary) — substitute Sentinel or Tiempos Headline. Weight 700 for hero, italic widely used.
+- Subhead: Imperial or Lyon Display at weight 400
+- Body: Imperial / Georgia / source serif at 18–20px, line-height ~1.55
+- Sans for UI / kickers: Franklin (NYT) — substitute Söhne Mono or Söhne, weight 500, often in small caps
+
+**Spacing**: 4 / 8 / 16 / 24 / 32 / 48 / 96. Multi-column grids for stories.
+
+**Radius**: 0 throughout.
+
+**Shadow**: none.
+
+**Motion**: minimal — sticky bylines, lazy-loaded images fading in, slow zoom on hero photo over 8–15s.
+
+**Signature moves**
+- Three-deck hierarchy: tiny eyebrow ("OPINION" / "ANALYSIS" / "INVESTIGATION" in small-caps sans) → bold serif headline → italic serif standfirst
+- Byline + timestamp block in sans below the headline, always
+- Pull-quotes set in italic serif at 1.5–2× body size, with hairline rules above and below
+- Multi-column body copy on wide viewports; single column on mobile (always readable)
+- Inline images with serif captions; captions matter and are styled distinctively
+
+**Avoid**
+- Sans-serif headlines (the recipe's signature is the serif voice)
+- Card grids of articles — NYT lays articles out as a front page, with hierarchy by size
+- Pretty UI buttons in the body of articles
+- Centered alignment for body (left-aligned justified is the recipe)
+
+**AI prompt seed**
+> Editorial photojournalism, single decisive moment image, natural lighting, 3:2 aspect, color grading neutral with slight desaturation, real-feeling not staged, place-specific.
+
+**Don't use when**
+- The product is a SaaS dashboard — NYT craft reads as overformal there
+- Content is short and punchy (one-line CTAs) — NYT needs longform to land
+- The brand has no editorial / authority claim — using NYT voice without the substance reads as cosplay
+
+---
+
+> **Same school — Information Architecture**: [`pentagram`](./pentagram.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/pentagram.md

@@ -0,0 +1,52 @@
+# pentagram — Pentagram / Paula Scher
+
+- **School**: Information Architecture
+- **Vibe**: Bold typography as image; type does the visual work; everything else recedes
+- **Best for**: B2B identity, cultural institutions, "we mean business" moments
+- **Touchstone**: pentagram.com, Paula Scher's Public Theater posters, MIT Media Lab identity
+
+**Palette**
+- High-contrast two-color: ink on ground. Common pairings:
+  - Black `#000000` on white `#FFFFFF`
+  - Cobalt `#1E3FFF` on cream `#F4F1E7`
+  - Brick `#B83A1F` on bone `#EFE9DC`
+- A single secondary accent only if the project demands a third color (used very sparingly)
+
+**Typography**
+- Display: a single grotesque used at massive scale — Helvetica Now (weight 700–900), Söhne Breit, or Druk. Headlines are often **set bigger than the column they live in**, breaking the margin on purpose.
+- Body: the same family at body weight, 16–17px, line-height 1.45–1.55
+- Numerals: tabular figures from the same family
+
+**Spacing**: strict 12-column grid, generous gutters (24–32px). Baseline-grid alignment of every text element.
+
+**Radius**: 0.
+
+**Shadow**: none.
+
+**Motion**: typographic moves only — letters shift in, headlines slide on a baseline. No 3D, no bouncy, no parallax.
+
+**Signature moves**
+- Headlines so large they touch (or visibly break past) the column edges
+- Type as image — a single word or phrase at hero scale becomes the only graphic
+- Color blocks (a flat rectangle of accent color) used as section dividers, often with a single huge number on them (`02`)
+- Captions and metadata pinned to the grid in tiny precise type, often in the column gutter
+- A single rule line (1px) sometimes drawn across the entire page width, anchoring everything
+
+**Avoid**
+- Photography as the visual lead (type leads, not photo) — exception: if there is a hero photo, it lives behind / under enormous type
+- Multiple type families
+- Gradients, shadows, decorative anything
+- Card grids of content (Pentagram thinks in spreads, not cards)
+
+**AI prompt seed**
+> Editorial poster composition, single phrase set in massive black Helvetica weight 900, characters bleeding past the layout margins, behind it a flat field of cobalt #1E3FFF, no photography, no illustration, 3:4.
+
+**Don't use when**
+- Headlines can't be made bold and short (3–6 word phrases) — Pentagram needs strong copy
+- Many tiers of feature density must be communicated (this is institutional voice, not feature catalog)
+- The brand is meant to feel quiet — Pentagram is the opposite of quiet
+
+---
+
+> **Same school — Information Architecture**: [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`nyt-the-daily`](./nyt-the-daily.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/raycast.md

@@ -0,0 +1,54 @@
+# raycast — Raycast (Productivity Tool)
+
+- **School**: Modern Tool / Builder SaaS
+- **Vibe**: Glassy command-palette aesthetic, color extensions for personality, keyboard-first culture
+- **Best for**: Productivity tools, command-palette / launcher products, dev utilities
+- **Touchstone**: raycast.com, Raycast app screenshots, raycast.com/store extension cards
+
+**Palette**
+- Ground: `#0F0F11` (charcoal with hint of blue)
+- Surface translucent: `rgba(255,255,255,0.06)` over a colored gradient backdrop
+- Hairline: `rgba(255,255,255,0.10)`
+- Primary text: `#FFFFFF`
+- Secondary text: `#B0B3B8`
+- Brand red accent: `#FF6363` — Raycast's signature, used on icons and key CTAs
+- Extension chips: bright per-tile colors (lime, coral, lavender, cyan) used as accent dots on small surfaces only
+
+**Typography**
+- Display: Söhne weight 600, or Inter Tight weight 600
+- Body: Inter at 14–15px, weight 500 (slightly heavier than Linear's 400 — Raycast feels punchier)
+- Mono: SF Mono or JetBrains Mono for shortcut chips
+- Letter-spacing on display: -0.02em
+
+**Spacing**: 4 / 8 / 12 / 16 / 24 / 40 / 64
+
+**Radius**: 8 (small) / 12 (medium) / 16 (cards) / 24 (large modal). Raycast's signature radius is the soft-corner command palette.
+
+**Shadow**: cushiony — `0 16px 40px rgba(0,0,0,0.4)` on the command palette card; barely any shadow elsewhere
+
+**Motion**: bouncy welcomed for key moments (the palette appearing, hover lift) — spring physics with mild overshoot. Otherwise quick 150ms ease-out.
+
+**Signature moves**
+- A floating command-palette screenshot in the hero, slightly tilted, casting a generous cushioned shadow, with a blurred colorful gradient backdrop visible through it (glass)
+- Every keyboard shortcut shown as a styled chip — `⌘` `↵` `⌥` set in a precision mono with a hairline border and dim background
+- Bright per-extension colors used as small accent dots on tile cards (a Notion tile has a tiny lavender dot, a GitHub tile has a charcoal one)
+- Sticky color-banded gradient backdrop behind the hero (oranges → magentas, but soft-focused)
+- Generously spaced section anatomy with clear hover lift on tiles
+
+**Avoid**
+- Too many bright extension colors on the same screen — they only work as small accents on a dark ground
+- Solid bright-color buttons (Raycast buttons are usually translucent white pills with shortcut chips)
+- Pure monochrome scenes — Raycast leans on color *just enough* to feel playful
+
+**AI prompt seed**
+> Productivity application interface, floating command palette card centered on the page, soft-focused colorful gradient backdrop in warm oranges and magentas behind it, dark charcoal foreground UI, cushioned drop shadow under the palette, no people, 16:9.
+
+**Don't use when**
+- The product isn't a launcher / command-palette / keyboard-first tool — the central glass palette image won't land otherwise
+- The audience doesn't know keyboard shortcuts (they'll miss the recipe's main signal)
+- A strictly enterprise tone is needed — Raycast skews playful
+
+---
+
+> **Same school — Modern Tool / Builder SaaS**: [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`notion-pre-ai`](./notion-pre-ai.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/resn-storytelling.md

@@ -0,0 +1,49 @@
+# resn-storytelling — Resn (Story Through Scroll)
+
+- **School**: Motion / Experimental
+- **Vibe**: Surprise as the reward; the page tells a story to those who scroll
+- **Best for**: Brand storytelling, agency portfolios, campaign microsites
+- **Touchstone**: resn.co, Resn's case-study pages, awwwards site-of-the-day archives
+
+**Palette**
+- Project-driven — Resn's recipe is more about composition than a fixed palette
+- Often warm-cool contrasted within one piece (warm character against cool environment, or vice versa)
+- Saturated where the story demands; muted where it breathes
+
+**Typography**
+- A campaign-specific display face is almost always present — custom or unusual
+- Body type quiet, often a humanist sans at small sizes
+- Text often integrated *into* the scene (titles set in WebGL space, not on a fixed UI layer)
+
+**Spacing**: irregular and composition-driven; not grid-strict
+
+**Radius**: project-dependent
+
+**Shadow**: scene-baked, not component
+
+**Motion**: long-form choreography — a single page might tell a 90-second story across 8–12 scroll triggers, with payoffs at specific moments
+
+**Signature moves**
+- Scroll triggers reveal narrative beats — a character moves across the screen, a product is unveiled, a punchline lands
+- Easter eggs hidden for repeat visitors
+- Cursor-reactive surface materials (a hover changes a texture, an audio cue plays)
+- Multi-scene composition — each section is treated as a film scene with its own art direction
+- A reward at the end — a special interaction or scene only revealed on full scroll-through
+
+**Avoid**
+- Bloating with too many beats — Resn's recipe is "fewer, better" beats
+- Pure decoration without narrative — every motion moment should advance the story
+- Forgetting the punchline — the recipe needs a payoff scene
+
+**AI prompt seed**
+> Narrative scene from a brand microsite, mid-action moment, character or object in motion with intentional motion blur, warm-cool palette contrast, theatrical lighting, 16:9.
+
+**Don't use when**
+- There's no story to tell (the recipe needs narrative content)
+- Audience won't scroll patiently (Resn rewards patience — for impatient audiences, choose a static recipe)
+- The build is rushed — Resn's recipe demands choreography time
+
+---
+
+> **Same school — Motion / Experimental**: [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/stripe-press.md

@@ -0,0 +1,54 @@
+# stripe-press — Stripe Press
+
+- **School**: Warm Humanist (with editorial bones)
+- **Vibe**: Books as objects, cream + ink, warm photography, the kind of design only a successful infrastructure company funds
+- **Best for**: Editorial / publishing, longform features, "books and ideas" products
+- **Touchstone**: press.stripe.com, the physical Stripe Press books (cloth-bound, foil-stamped)
+
+**Palette**
+- Ground: `#F1ECDE` (warm bone)
+- Surface darker: `#E6DCC4`
+- Ink: `#1A1A18` (very warm near-black)
+- Secondary text: `#736D5A`
+- Foil-stamp accent: deep teal `#1B4B5A` or burnt sienna `#A04A2A` (book-cover-specific colors)
+- Hairline: `#C8BEA4`
+
+**Typography**
+- Display: a refined transitional or modern serif — GT Sectra, Domaine Display, Italian Old Style. Italic everywhere.
+- Body: an old-style serif at 18–19px, line-height 1.65 — Source Serif, Lyon Text, ITC Galliard
+- Sans for UI only: a humanist sans at small sizes for nav and captions — Söhne or GT America
+- Often pairs a wide display serif with a slim body serif
+
+**Spacing**: 4 / 8 / 16 / 24 / 32 / 48 / 96. Editorial breathing room.
+
+**Radius**: 0 throughout (books don't have rounded corners)
+
+**Shadow**: present on book objects — `0 24px 48px rgba(0, 0, 0, 0.18)` to make books feel three-dimensional on the page
+
+**Motion**: slow, slow, slow. Crossfades over 1–2 seconds. Books rotate gently in 3D on hover (~15° max). Ken Burns on hero photography (~20s).
+
+**Signature moves**
+- Book-cover photography as hero — the actual physical object photographed on cream paper with a warm raking light and an honest shadow
+- Wide-set serif italic for emphasis, set 1.5–2× body size
+- Author / chapter quotes in oversized italic serif, hung against a wide margin
+- Cloth-textured backgrounds for section breaks (subtle textile pattern at low opacity)
+- A single foil-stamp color per book / chapter (gold, deep teal, burnt sienna) — never combined
+
+**Avoid**
+- Pure white grounds (the warm cream is part of the recipe)
+- Sans-serif body type (the editorial serif is the signature)
+- Card grids of books — Stripe Press lays each book out as a feature, not a tile
+- Cold neutral gray — every gray here has a warm cast
+
+**AI prompt seed**
+> Hardcover book photographed on warm cream paper #F1ECDE, raking afternoon window light, deep soft shadow, single book object, cloth-bound spine visible, foil-stamped title in burnt sienna, 4:5, editorial product photography.
+
+**Don't use when**
+- The deliverable has no editorial / book / publication content
+- The brand voice is light or playful (Stripe Press is sincere and considered)
+- The audience won't sit for longform — recipe rewards reading
+
+---
+
+> **Same school — Warm Humanist**: [`mailchimp-freddie`](./mailchimp-freddie.md) · [`headspace-meditation`](./headspace-meditation.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/tufte-dataink.md

@@ -0,0 +1,52 @@
+# tufte-dataink — Edward Tufte / Maximum Data-Ink
+
+- **School**: Information Architecture
+- **Vibe**: Every pixel earns its place; the chart is the page
+- **Best for**: Analytical reports, scientific publications, data-led storytelling
+- **Touchstone**: *The Visual Display of Quantitative Information*, *Beautiful Evidence*, edwardtufte.com
+
+**Palette**
+- Ground: `#FBFAF6` (warm paper)
+- Ink: `#1B1B1A`
+- Two data colors only — typically a warm red `#A6300E` and a cool slate `#3E4A5C`. Add a third only if a third dimension genuinely needs it.
+- Faint reference rules: `#D8D2C2`
+
+**Typography**
+- Display & body: an old-style or transitional serif — ET Book (Tufte's own family), Equity, or Lyon Text. Weight 400 for body, italic for emphasis.
+- Body at 12–14px (Tufte deliberately uses small body text — the reader leans in)
+- Sans for axis labels only — a humanist sans at 10–11px, color `#5C5550`
+
+**Spacing**: tight. 4 / 8 / 12 / 16 / 24 / 48. Margins are filled with side-notes, not whitespace.
+
+**Radius**: 0.
+
+**Shadow**: none.
+
+**Motion**: none. The page is meant to be read still.
+
+**Signature moves**
+- Sparklines inline with body copy (a tiny chart embedded in a sentence)
+- Side-notes (marginalia) used heavily — annotations live in the right margin, not in tooltips
+- Charts have no chart-junk: no gridlines except faint ones, no border boxes, no 3D, no legends if direct labels work
+- Small multiples — a 3×3 grid of the same chart with different data
+- Direct labels on data series (the line is labeled at its endpoint, not in a legend box)
+
+**Avoid**
+- Pie charts (Tufte would not approve)
+- 3D anything
+- Gridlines darker than `#D8D2C2`
+- Multiple chart types on the same page when one would do
+- Color for decoration (every color must encode meaning)
+
+**AI prompt seed**
+> Editorial scientific figure, warm paper #FBFAF6 background, multi-line time-series chart with two data series in muted red and slate, direct labels at line endpoints, side-note callouts in italic serif, no chart frame, no legend, 4:3.
+
+**Don't use when**
+- The chart is decorative (Tufte demands the chart be the *point*)
+- The reader expects interactive tooltips / filters (Tufte is for static editorial figures)
+- The medium is mobile (small body type plus margin notes doesn't fit)
+
+---
+
+> **Same school — Information Architecture**: [`pentagram`](./pentagram.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`nyt-the-daily`](./nyt-the-daily.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/vercel-mesh.md

@@ -0,0 +1,56 @@
+# vercel-mesh — Vercel (Gradient Mesh Era)
+
+- **School**: Modern Tool / Builder SaaS (also touches Motion / Experimental)
+- **Vibe**: Black-and-white precision broken by a single shimmering gradient mesh
+- **Best for**: Platform / infrastructure tools, AI tools, deeply technical products that want to feel modern but not AI-cliché
+- **Touchstone**: vercel.com, the v0.dev landing, nextjs.org
+
+**Palette**
+- Ground: `#000000` (true black)
+- Surface 1: `#0A0A0A`
+- Surface 2: `#111111`
+- Hairline: `#1F1F1F` or `rgba(255,255,255,0.08)`
+- Primary text: `#EDEDED`
+- Secondary text: `#888888`
+- Gradient mesh accents (used only in hero / section breaks):
+  - Cyan `#0070F3` → magenta `#FF0080` → orange `#F5A623` — but mixed at low saturation and high feathering, never a hard purple-pink AI gradient
+- One sharp accent for CTAs: white `#FFFFFF` button on black ground (high contrast)
+
+**Typography**
+- Display: Geist Sans (weight 500–600) — Vercel's own family. Substitute Inter Tight weight 600.
+- Body: Geist Sans at 15–16px, weight 400, line-height 1.6
+- Mono: Geist Mono — for code, terminal-style commands, deploy logs
+
+**Spacing**: 4 / 8 / 16 / 24 / 40 / 64 / 96 / 128
+
+**Radius**: 8 (small) / 12 (medium) / 16 (large). Slightly more generous than Linear, but still disciplined.
+
+**Shadow**: minimal at component level; the *page* feels lit by the gradient mesh, not by shadows.
+
+**Motion**: snappy ease-out (cubic-bezier(0.16, 1, 0.3, 1)), 200ms hovers, 500–700ms for layout. The mesh itself slowly drifts (10–20s loop).
+
+**Signature moves**
+- One full-bleed gradient mesh in the hero — diffuse, dreamy, feathered to black edges
+- Otherwise the page is black-and-white with hairline detail and monospace accents
+- Deploy / terminal log readouts as a hero element (real-feeling, not lorem)
+- Animated mesh on hover for cards (the card "lights up" with a soft glow from below)
+- White solid buttons (`#FFFFFF` on `#000000`) — high contrast, no gradient, no shadow
+
+**Avoid**
+- Bright saturated purple → pink gradients (that's the AI cliché the recipe is *replacing*)
+- More than one mesh per page
+- Glow on every component (selective use — one hero, maybe one section break, that's it)
+- Colored buttons (the brand button is white)
+
+**AI prompt seed**
+> Abstract atmospheric gradient on pure black #000000 background, deep blue #0070F3 fading into magenta #FF0080 and orange #F5A623, feathered edges blending into black, dreamy soft focus, no objects, no text, 16:9, very low saturation overall.
+
+**Don't use when**
+- The brand isn't a platform / infra / tooling product — meshes on a consumer site read as "trying too hard"
+- Multiple gradient meshes are needed (use one or none, never several)
+- The audience expects warm / human feel
+
+---
+
+> **Same school — Modern Tool / Builder SaaS**: [`linear`](./linear.md) · [`raycast`](./raycast.md) · [`notion-pre-ai`](./notion-pre-ai.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/vignelli-swiss-helvetica.md

@@ -0,0 +1,50 @@
+# vignelli-swiss-helvetica — Vignelli / Swiss International
+
+- **School**: Information Architecture
+- **Vibe**: Strict grid, Helvetica throughout, "six typefaces are enough"
+- **Best for**: Wayfinding / transit systems, institutional identity, deeply ordered information
+- **Touchstone**: 1972 NYC Subway map (Vignelli), Knoll catalogues, *The Vignelli Canon*
+
+**Palette**
+- Black `#000000` and white `#FFFFFF`
+- Plus one of: red `#E2231A` / yellow `#F5C518` / blue `#0033A0` / orange `#FF6F00` (only one — never two accents)
+- Cool gray `#8A8A8A` for secondary content
+
+**Typography**
+- Display & body: Helvetica or Helvetica Now exclusively. Weights: 400 / 500 / 700, no italic.
+- Hierarchy by size, not weight or color
+- Common scale: 72 / 48 / 32 / 24 / 16 / 12, all on the same baseline grid
+
+**Spacing**: 8px baseline grid, 12-column layout, generous baseline-to-baseline spacing equal to or greater than the type size.
+
+**Radius**: 0, always.
+
+**Shadow**: none.
+
+**Motion**: none, or instant. Swiss design is static by nature; if anything moves, it moves like signage being rotated into place.
+
+**Signature moves**
+- A bold horizontal or vertical color bar carries the section header in white Helvetica
+- The grid is **visible** when it helps — column gutters sometimes drawn as faint lines
+- Information sets (data, schedules, lists) get tabular layouts with strict baseline alignment
+- Body copy is left-aligned in a single readable measure (~60–70 characters); never centered
+- A single oversized number (chapter / section) sits at the top-left corner of each block
+
+**Avoid**
+- Serifs entirely
+- Color combinations other than ink + ground + one accent
+- Italic, drop shadows, gradients, any softness
+- "Friendly" copywriting tone — Swiss is matter-of-fact
+
+**AI prompt seed**
+> Transit-signage style composition, large directional arrow set in black on flat field of single accent color, condensed Helvetica destination labels, no decoration, 16:9 flat vector aesthetic.
+
+**Don't use when**
+- The brand needs warmth — Helvetica + grid reads as institutional / cold
+- The content is emotional / storytelling — Swiss strips emotion out
+- Modernity / freshness is the goal — Swiss design now reads as classical / archival
+
+---
+
+> **Same school — Information Architecture**: [`pentagram`](./pentagram.md) · [`bloomberg-terminal`](./bloomberg-terminal.md) · [`tufte-dataink`](./tufte-dataink.md) · [`nyt-the-daily`](./nyt-the-daily.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/y2k-retrofuturism.md

@@ -0,0 +1,54 @@
+# y2k-retrofuturism — Y2K / Frutiger Aero Retrofuturism
+
+- **School**: Specialty / Genre
+- **Vibe**: Late-90s / early-2000s techno-optimism: chrome, glassy bubbles, jelly translucency, lens flare
+- **Best for**: Fashion / music / nostalgia-coded products, creative campaigns, anything referencing 1999–2005 internet
+- **Touchstone**: late-90s Apple iMac G3 ads, Windows Vista Aero, the original iPod aqua buttons, MySpace pages
+
+**Palette**
+- Ground: electric ice blue `#A3D5FF` or chrome silver `#E0E4EA`
+- Glass accents: cyan `#5FC9F8` → magenta `#FF66C4` (the iridescent / oil-slick gradient)
+- Chrome: brushed-steel highlights at `#C4C9D2` to `#F2F4F8`
+- Acid green pops: `#A8FF00` (used sparingly)
+- Ink: `#000000` or `#FFFFFF` depending on ground
+
+**Typography**
+- Display: a chunky rounded sans with personality — Frutiger, Eurostile, or Sharp Grotesk in heavy weight; sometimes a chrome-effect treatment
+- Body: friendly humanist sans like Frutiger or Avenir at 14–16px
+- Numerals love an LCD / digital-readout treatment for hero counters
+- Underline + sparkle treatments common on link hover
+
+**Spacing**: 4 / 8 / 16 / 24 — packed but bubbly
+
+**Radius**: gummy — 16 / 24 / 32 / 9999 (full circle). Buttons are pill-shaped jelly bubbles.
+
+**Shadow**: heavy and colored — glossy reflections, drop shadows like `0 16px 32px rgba(95, 201, 248, 0.4)`. Inner highlights to simulate glass.
+
+**Motion**: bouncy springs, glow pulses, lens flare sweeps. Anything that recalls early-Flash interactions.
+
+**Signature moves**
+- Glassy translucent buttons with an inner top highlight (faking aqua / lozenge)
+- Iridescent oil-slick gradients on hero / character imagery
+- Chrome-effect type with sparkle overlays
+- Lens flare or specular highlight on any glass surface
+- 3D / dimensional UI elements (the OS-X-Aqua dock effect)
+- Floating circular orbs / bubbles drifting in the background
+
+**Avoid**
+- Sharp corners
+- Muted / earthy palettes — Y2K is bright and synthetic
+- Restrained typography — Y2K is exuberant
+- Anything that reads as "tasteful 2020s minimalism"
+
+**AI prompt seed**
+> Y2K retrofuturism scene, chrome silver and ice-blue iridescent gradient background, floating glass orbs with cyan and magenta oil-slick reflections, lens flare in upper right, single bright translucent pill-shaped button, late-1990s techno-optimism vibe, 16:9.
+
+**Don't use when**
+- The brand has no nostalgic / retro / playful claim
+- The audience is enterprise / professional — this recipe is consumer-fashion-music coded
+- Long-form readability matters (Y2K is for moments, not for reading)
+
+---
+
+> **Same school — Specialty / Genre**: [`mid-century-modern`](./mid-century-modern.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)