@damiangilgonzalez/harness 1.3.7

package/skills/ingeniero-diseno-web/references/style-recipes/balenciaga-post-2017.md

@@ -0,0 +1,52 @@
+# balenciaga-post-2017 — Balenciaga (post-Demna era)
+
+- **School**: Brutalist / Raw
+- **Vibe**: Default browser styling weaponized, Helvetica at absurd scale, anti-luxury luxury
+- **Best for**: Fashion / counter-culture / fragrance brands, "we're too cool to design this" positioning
+- **Touchstone**: balenciaga.com (any 2018+ snapshot via Wayback), Vetements campaigns, post-2017 luxury anti-design
+
+**Palette**
+- Ink: `#000000`
+- Ground: `#FFFFFF`
+- One muted off-white surface: `#F5F4F0`
+- No color. None. If a color appears it's in a single photograph and never as a UI element.
+
+**Typography**
+- Display & body: Helvetica or Arial — all weights, all sizes, *only this one family*
+- Headlines often set in all-caps at hero scale (140px+)
+- Body type small — 11–13px
+- Mixing weight is fine; mixing family is not
+
+**Spacing**: 8 / 16 / 24 / 40 — restrained, but not luxurious-spacious; more "we didn't bother to soften it"
+
+**Radius**: 0
+
+**Shadow**: none
+
+**Motion**: none — pages don't animate. Hover at most changes underline.
+
+**Signature moves**
+- All-caps Helvetica headlines at extreme scale, tightly tracked, often left-aligned hard against the page edge
+- Product photography is editorial / fashion-style — model + product, harsh lighting, awkward poses; never the smiling-stock-model pattern
+- Navigation is plain text links, sometimes just a vertical list at the top of the page
+- Captions and metadata stripped to minimum (model name, designer, location)
+- No buttons styled as buttons — CTAs are underlined text links
+
+**Avoid**
+- Any font other than Helvetica / Arial
+- Color
+- Polished UI affordances (rounded buttons, drop shadows, hover effects)
+- Decorative anything
+
+**AI prompt seed**
+> Fashion editorial photograph, single model against a plain off-white #F5F4F0 backdrop, harsh direct flash, awkward static pose, deadpan expression, 4:5.
+
+**Don't use when**
+- The brand has no fashion / counter-culture claim — recipe will read as cosplay
+- The audience expects to be "sold to" — Balenciaga's recipe ignores the audience on purpose
+- Conversion is critical — this recipe converts the in-group, not the casual visitor
+
+---
+
+> **Same school — Brutalist / Raw**: [`are-na`](./are-na.md) · [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/bloomberg-businessweek-turley.md

@@ -0,0 +1,52 @@
+# bloomberg-businessweek-turley — Bloomberg Businessweek (Turley Era)
+
+- **School**: Brutalist / Raw
+- **Vibe**: Typographic violence, magazine grid abused, copy *is* image
+- **Best for**: Editorial features, agency portfolios, opinionated content sites
+- **Touchstone**: Bloomberg Businessweek 2014–2019 covers (Richard Turley → Tracy Ma era), *Eye* magazine archive issues
+
+**Palette**
+- Aggressive — `#FF3D00` (high-alert orange), `#FFE800` (signal yellow), `#001AFF` (alert blue)
+- Always on `#FFFFFF` for max contrast — or inverted onto `#000000`
+- Black `#000000` text on white where readable; otherwise contrasting hue
+- Maximum 3 colors per spread
+
+**Typography**
+- Display: a single bold grotesque used at absurd scale — Founders Grotesk, Druk, ABC Whyte. Weight 800–900, set 200px+
+- Headlines often broken across lines on purpose, kerned tighter than comfortable
+- Body type left small in contrast — 12–14px serif (Plantin / Mercury)
+- All-caps + condensed common in display
+
+**Spacing**: deliberately broken — content pushed off-grid, sometimes touching edges or overflowing intentionally
+
+**Radius**: 0
+
+**Shadow**: none
+
+**Motion**: jarring cuts, not smooth eases. If anything moves it slams into place.
+
+**Signature moves**
+- Headline set so large it visibly breaks the grid (letters touching page edges)
+- Color blocks of saturated orange / yellow / blue placed under or behind type
+- Photo cutouts (subjects silhouetted, dropped onto color fields) — often awkwardly cropped on purpose
+- Tables of data styled like magazine spreads, not like UI components — bold, contrasty, opinionated
+- Captions in tiny serif italic positioned in unexpected corners
+
+**Avoid**
+- Tasteful design (the recipe is anti-tasteful on purpose)
+- More than 3 colors per spread
+- Smooth transitions
+- Web defaults (every element should feel set, not generated)
+
+**AI prompt seed**
+> Magazine cover composition, single bold word set in massive black grotesque at 200pt, behind it a flat field of saturated alert-orange #FF3D00, with a clumsily-cut photo silhouette overlaid at unexpected angle, slight print misregistration, 3:4.
+
+**Don't use when**
+- The brand voice is meant to feel calm or trustworthy — Turley-era Bloomberg is loud
+- The content is utility-focused — recipe is editorial only
+- The team is squeamish about deliberate ugliness — this recipe requires committing to it
+
+---
+
+> **Same school — Brutalist / Raw**: [`are-na`](./are-na.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

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

@@ -0,0 +1,56 @@
+# bloomberg-terminal — Bloomberg Terminal
+
+- **School**: Information Architecture
+- **Vibe**: Maximum data-ink, mission-critical density, chrome-amber on near-black
+- **Best for**: Finance / trading / monitoring dashboards, "professionals don't have time for whitespace" products
+- **Touchstone**: a real Bloomberg Terminal screenshot (always reference the real thing — it's denser than memory suggests)
+
+**Palette**
+- Ground: `#0A0E1A` (deep navy-black)
+- Surface 1: `#11172A`
+- Surface 2: `#1A2138`
+- Amber primary: `#FFA02F` (the signature)
+- Positive (price-up): `#00B96B`
+- Negative (price-down): `#F23645`
+- Muted label: `#5E6680`
+- High-importance text: `#E8ECF4`
+
+**Typography**
+- Display & body: a monospaced workhorse — IBM Plex Mono, JetBrains Mono, or Berkeley Mono. Bloomberg itself uses a proprietary mono.
+- Sizes: 11 / 12 / 13 / 14px — densely packed. No 16px body. No 32px headlines.
+- All numerals tabular-aligned (right-aligned columns of digits)
+
+**Spacing**: 2 / 4 / 8 / 12. Multi-pane layouts with no luxury margins.
+
+**Radius**: 0 or 2px. Terminals don't round.
+
+**Shadow**: none. Elevation through hairline borders only (`#2A3050` 1px lines).
+
+**Motion**: ticker scroll (uniform linear), instant state flips, blink on data update (50–80ms flash). No eased animations.
+
+**Signature moves**
+- Multi-pane workspaces with hairline dividers — 4 to 9 panels visible at once
+- Amber text on near-black for the most important data; chrome-white for secondary
+- Status / ticker bar at top with marquee-scrolling tickers, color-coded up/down
+- Keyboard-shortcut chips in the margins (`F9: TRADE`)
+- Tabular data with monospaced digits, color-coded by delta
+
+**Avoid**
+- Any rounded corners
+- Hero sections / marketing-style headlines
+- Photography or illustration of any kind
+- Decorative gradients (gradient meshes are not data-ink)
+- Sans-serif body type (the monospace is the recipe)
+
+**AI prompt seed**
+> Trading workstation user interface, deep navy #0A0E1A background, multi-pane layout with amber #FFA02F headlines, monospaced data tables, ticker scroll across the top, no rounded corners, no illustrations, fixed-width font throughout.
+
+**Don't use when**
+- The audience is consumer (they'll bounce in 3 seconds — terminal density is acquired taste)
+- You can't fill the screen with real data — terminal aesthetic + dummy "Lorem 1,234" placeholders looks broken
+- The task is a marketing landing page — terminals are for working in, not for selling
+
+---
+
+> **Same school — Information Architecture**: [`pentagram`](./pentagram.md) · [`vignelli-swiss-helvetica`](./vignelli-swiss-helvetica.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/dieter-rams-braun.md

@@ -0,0 +1,50 @@
+# dieter-rams-braun — Dieter Rams / Braun
+
+- **School**: Editorial / Minimalist
+- **Vibe**: "Less but better", functional honesty, industrial restraint
+- **Best for**: Hardware product pages, audio gear, industrial / tool brands, design-led B2B
+- **Touchstone**: Braun T3 radio, Braun ET66 calculator, Rams's *Ten Principles of Good Design*
+
+**Palette**
+- Ground: `#E4E1DC` (concrete light) or `#F5F4F0` (paper)
+- Ink: `#191919`
+- Industrial gray: `#A8A8A8`, `#5C5C5C`
+- Accent: single signal — Braun orange `#E96A26` or signal yellow `#F5C518`, used only on functional elements (a power dot, an active state)
+
+**Typography**
+- Display & body: a precision grotesk — Akzidenz-Grotesk, Helvetica Now, or Söhne. Weight 400 body, weight 500 for emphasis, never 700.
+- Numerals love a monospaced variant for spec tables
+
+**Spacing**: based on a 4px sub-grid; visible values 4 / 8 / 16 / 24 / 32 / 64 / 128. Functional, no "luxury whitespace" inflation.
+
+**Radius**: 2–4px maximum. Sharp by default.
+
+**Shadow**: none.
+
+**Motion**: utilitarian — instant state changes (~80–120ms), no flourish.
+
+**Signature moves**
+- Diagrammatic exploded views of the product with measurement callouts (real or fictional)
+- A single signal-orange dot on the page indicating "active" or "power" — never decorative
+- Tabular spec listings as a first-class layout element (not hidden behind a "Specs" toggle)
+- Every label exactly what it is, in plain language ("ON / OFF" not "Toggle interaction mode")
+- The page itself feels like a piece of equipment
+
+**Avoid**
+- Photography that romanticizes the product — Braun shoots it on a grid background like an engineering specimen
+- Multiple accent colors
+- Curves anywhere — even hover effects shouldn't bounce
+- Lifestyle imagery
+
+**AI prompt seed**
+> Industrial product photograph, 1960s Braun design language, single hardware object on light gray #E4E1DC grid background, frontal orthographic view, dimensions and labels in thin sans serif, color palette restricted to gray / black / single orange marker, 4:3.
+
+**Don't use when**
+- The product is soft / emotional / lifestyle — Rams discipline reads as cold for skincare or hospitality
+- The team wants warmth or personality — this recipe is impersonal by design
+- The audience is consumer / non-technical — they may read it as "boring spec sheet"
+
+---
+
+> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`monocle-magazine`](./monocle-magazine.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

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

@@ -0,0 +1,50 @@
+# field-io — Field.io (Generative Motion Identity)
+
+- **School**: Motion / Experimental
+- **Vibe**: The brand is movement; the page generates itself in front of the visitor
+- **Best for**: Brand films, launch moments, agency portfolios, "the visit is the experience" sites
+- **Touchstone**: field.io, FIELD.SYSTEMS work, kinetic identity case studies
+
+**Palette**
+- Often dark base — `#0B0B0F` to `#000000`
+- One or two generative gradient hues used throughout the motion — frequently a single bold hue cycled through hue rotation, e.g., a deep cyan `#0CE0E5` blending into electric violet `#5B2EFF`, or generated procedurally
+- Ink for type: high-contrast white `#FFFFFF`
+- Secondary type: cool gray `#A0A4B0`
+
+**Typography**
+- Display: a variable font that *animates* on its own axes — Söhne Variable, Editorial New Variable, or Inter Display Variable
+- Type often morphs weight, width, or optical-size during scroll
+- Body type kept restrained — a single grotesque at neutral weight; the motion is the show, not the body
+
+**Spacing**: irregular by design — content lands in unexpected positions; the grid sometimes appears and disappears
+
+**Radius**: 0 — Field.io's work is rarely soft-cornered
+
+**Shadow**: not via CSS — through generative lighting in WebGL / Canvas scenes
+
+**Motion**: the entire recipe is motion. Multi-stage choreographed sequences. Scroll-driven not just for parallax but for state changes. Pages frequently feel like a video playing itself.
+
+**Signature moves**
+- Generative type sequences where letters appear, morph, and resolve into headlines on scroll
+- Particle / mesh systems that respond to cursor and scroll position
+- Long-tail eased curves (expo-out, quint-out) — `cubic-bezier(0.83, 0, 0.17, 1)` and similar
+- Section breaks where the entire page state transforms (a full-bleed canvas overtakes the layout)
+- Choreographed multi-element entries — six elements arrive on staggered delays, not all at once
+
+**Avoid**
+- Static recipes (this isn't a static recipe — a static screenshot will feel underwhelming)
+- Too many cursor-reactive elements (one or two key WebGL moments is the recipe, not the whole page)
+- Heavy text content — this recipe is for moments, not for reading
+
+**AI prompt seed**
+> Generative type composition, single phrase resolving from particle field, electric violet #5B2EFF and deep cyan #0CE0E5 light traces, on near-black background, long motion trails, 16:9 cinematic.
+
+**Don't use when**
+- The deliverable will live as a static screenshot (the recipe loses ~70% of its impact)
+- Build budget is small (this is the most labor-intensive of the 25)
+- The target audience uses low-end hardware or care about performance / accessibility above wow
+
+---
+
+> **Same school — Motion / Experimental**: [`active-theory`](./active-theory.md) · [`resn-storytelling`](./resn-storytelling.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

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

@@ -0,0 +1,52 @@
+# headspace-meditation — Headspace / Calm
+
+- **School**: Warm Humanist
+- **Vibe**: Soft pastels, rounded everything, calming hand-drawn illustration
+- **Best for**: Wellness / meditation / health apps, sleep / kids products, "approachable expert" services
+- **Touchstone**: headspace.com, the Headspace app, Calm.com lock-screen aesthetic
+
+**Palette**
+- Ground: warm peach `#FFE2C5` or `#FFEDD5`
+- Surface darker: warm coral `#F4A573`
+- Ink: warm dark teal `#1B3A47`
+- Secondary: `#5C6B7A`
+- Pop accents: muted lavender `#B0A5D1`, sage `#9DB67A`, salmon `#F5867B` (one per scene, rotating)
+
+**Typography**
+- Display: a rounded friendly sans — Apercu, GT America (rounded variant), Söhne Breit. Weight 600.
+- Body: same family at 16–17px, weight 400
+- Optional script for emotional moments — a single soft handwritten line in something like Caveat, used very sparingly
+
+**Spacing**: generous — 8 / 16 / 24 / 40 / 64 / 96
+
+**Radius**: large — 16 (small) / 24 (medium) / 32 (large). Buttons are pills (radius = height / 2).
+
+**Shadow**: soft and warm — `0 8px 24px rgba(244, 165, 115, 0.2)`. Often colored to match the ground.
+
+**Motion**: gentle, slow, breathing. 400–800ms eases. Hover lifts have a "buoyant" feel. A subtle breathing animation (1.5–4s cycle) on key elements.
+
+**Signature moves**
+- A central character / mascot illustrated in simple round shapes (Headspace's orange circle character)
+- Animated breathing circles that expand and contract in sync with body copy ("breathe in… breathe out…")
+- Warm peach gradient grounds that slowly drift between hues
+- Rounded everything — every container is a pill or a soft-corner rectangle
+- Calming microcopy ("Take a moment. We'll wait.")
+
+**Avoid**
+- Cool palettes — Headspace lives in warm tones, even at night-mode (warm dark teal not cool navy)
+- Sharp corners anywhere
+- Harsh motion (no bouncy springs — too jolting; gentle eases only)
+- More than 2 colors per scene
+
+**AI prompt seed**
+> Simple flat illustration in warm peach #FFE2C5 background, single round mascot character in coral with friendly face, soft pastel shapes around it (sage, lavender), no harsh edges anywhere, gentle hand-drawn imperfection, 4:5.
+
+**Don't use when**
+- The product is meant to feel sharp / sophisticated — Headspace's recipe reads as soft / caring
+- The brand has no wellness / care positioning — it'll feel infantilizing
+- The voice is meant to be authoritative or expert-led — recipe is gentle, not commanding
+
+---
+
+> **Same school — Warm Humanist**: [`mailchimp-freddie`](./mailchimp-freddie.md) · [`stripe-press`](./stripe-press.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

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

@@ -0,0 +1,61 @@
+# linear — Linear (Modern Builder Tool)
+
+- **School**: Modern Tool / Builder SaaS
+- **Vibe**: Quiet luxury for developer tools; warm dark, hairline detail, restraint as confidence
+- **Best for**: Developer tools, AI tools, B2B SaaS where "serious + designed" matters
+- **Touchstone**: linear.app, the Linear changelog page, Linear Method site
+
+**Palette**
+- Ground: `#08090A` (near-black with warm undertone, not pure black)
+- Surface 1: `#16171C`
+- Surface 2: `#1E1F25`
+- Surface 3 (raised): `#26272E`
+- Hairline border: `rgba(255,255,255,0.06)`
+- Primary text: `#F7F8F8`
+- Secondary text: `#9CA3AF`
+- Muted text: `#6B7280`
+- Accent: Linear purple `#5E6AD2` — used on < 5% of pixels
+- Gradient meshes (very controlled, < 8% opacity) in the hero only
+
+**Typography**
+- Display: Inter Tight at weight 600 (or Söhne, or Geist Sans) — never plain Inter at default weight, that's the AI-default
+- Body: Inter at 14–15px, weight 400–500, line-height 1.55
+- Mono: GeistMono, JetBrains Mono, or Berkeley Mono for inline code and shortcut chips
+- Letter-spacing on display headlines: -0.02em (tight)
+
+**Spacing**: 4 / 8 / 12 / 16 / 24 / 40 / 64 / 96
+
+**Radius**: 6 (small UI) / 12 (medium cards) / 16 (large panels). **Never above 16.** Linear's radius character is "modest, precise, never gummy."
+
+**Shadow**: barely there — soft `0 1px 2px rgba(0,0,0,0.3)` on raised surfaces. **Never glow, never colored shadow.**
+
+**Motion**: ease-out around 150ms for hover, 350–450ms for layout moves with a quint curve (e.g., the famous cubic-bezier(0.22, 1, 0.36, 1)). State changes feel "snappy but not bouncy."
+
+**Signature moves**
+- Hairline 1px borders in `rgba(255,255,255,0.06)` separating every panel, everywhere
+- Selective accent use — purple appears on focused / active states, on tiny pills, on key brand surfaces; never on body backgrounds
+- Inline code styled with monospaced font and dim background `#1E1F25`, color `#A78BFA`
+- Subtle gradient meshes in the hero (extremely controlled saturation, < 8% opacity) — *not* the bright purple-pink-blue AI cliché
+- Keyboard-shortcut chips throughout the UI (the brand celebrates keyboard-first)
+- A bottom-pinned screenshot of the actual product on landing pages
+
+**Avoid**
+- Emoji
+- Bouncy springs or elastic easings
+- More than one saturated color (Linear's purple is the only accent)
+- Border-radius above 16
+- Stock photography of people
+- "Get Started Free" hero CTAs styled like a 2018 SaaS landing page
+
+**AI prompt seed**
+> Abstract product UI screenshot, warm dark #08090A background, hairline borders, panels with #16171C and #1E1F25 surfaces, very subtle blue-purple ambient lighting at top edge, no people, no text on the image itself, 16:9.
+
+**Don't use when**
+- The brand is consumer-friendly / playful — Linear reads as professional and serious
+- The product needs warmth or hand-touched feel
+- The audience is non-technical (the keyboard-shortcut and monospace signals don't land)
+
+---
+
+> **Same school — Modern Tool / Builder SaaS**: [`vercel-mesh`](./vercel-mesh.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/mailchimp-freddie.md

@@ -0,0 +1,52 @@
+# mailchimp-freddie — Mailchimp (Freddie Era, c. 2018–2022)
+
+- **School**: Warm Humanist
+- **Vibe**: Hand-drawn marks, warm yellow, personality in microcopy
+- **Best for**: Small-business tools, creator products, community / education / approachable B2C
+- **Touchstone**: mailchimp.com pre-2023 redesigns (Wayback), Freddie illustration sets
+
+**Palette**
+- Ground: `#FFE01B` (Mailchimp yellow) for hero / brand moments, `#FFFFFF` for body
+- Ink: `#241C15` (warm near-black, never pure black)
+- Cream surface: `#FBEFE3`
+- Secondary: `#88837C`
+- Accent: a hot pop-pink `#FF4D74` or a warm coral, used very sparingly
+
+**Typography**
+- Display: a friendly grotesque — Helvetica Now Display, Söhne, Inter Tight at weight 700–800
+- Body: same family at 17–18px, weight 400, line-height 1.6
+- Decorative: occasional hand-drawn script or text-set-by-hand feel
+
+**Spacing**: 4 / 8 / 16 / 24 / 40 / 64 — generous but not airy
+
+**Radius**: 8 (small) / 16 (medium) / 24 (large pills). Buttons are pill-shaped.
+
+**Shadow**: soft and warm — `0 4px 12px rgba(36, 28, 21, 0.08)`
+
+**Motion**: bouncy welcomed. Spring physics on hover lifts, friendly easings.
+
+**Signature moves**
+- Freddie-style hand-drawn illustrations (winking mascot, line-drawn characters with personality) — never AI-generated, must be commissioned or use a single illustrator's hand
+- Yellow flood-fill section backgrounds breaking up the page
+- Pill-shaped buttons with a 2–3px black outline (Memphis-style)
+- Personality in microcopy ("Send better email" not "Optimize delivery metrics")
+- Asymmetric "tilted" illustration placement — never centered on a grid
+
+**Avoid**
+- Pure black anywhere (the recipe is warm-near-black)
+- Stock illustrations — the hand-drawn style is the differentiator
+- More than 3 colors visible at once (yellow + ink + one accent)
+- Cold corporate microcopy
+
+**AI prompt seed**
+> Hand-drawn illustration, single line-drawn character with warm color washes (yellow, coral), winking expression, on warm cream #FBEFE3 background, friendly approachable line style, deliberate imperfection, 4:5.
+
+**Don't use when**
+- Brand needs to feel premium / luxury — Mailchimp warmth reads as accessible / mass-market
+- Illustration can't be sourced from a real illustrator (recipe loses 50% impact)
+- Audience is enterprise-only and skeptical of "friendly"
+
+---
+
+> **Same school — Warm Humanist**: [`stripe-press`](./stripe-press.md) · [`headspace-meditation`](./headspace-meditation.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/mid-century-modern.md

@@ -0,0 +1,52 @@
+# mid-century-modern — Mid-Century Modern (Paul Rand / Saul Bass)
+
+- **School**: Specialty / Genre (also touches Information Architecture)
+- **Vibe**: 1950s–60s American graphic modernism — geometric shapes, considered hand-feel, jazz-album confidence
+- **Best for**: Cultural / film / publishing identity, premium consumer brands with heritage claim, "tasteful sophistication"
+- **Touchstone**: IBM logo (Paul Rand), Saul Bass Vertigo / Anatomy of a Murder posters, Alvin Lustig book covers, mid-century jazz album sleeves (Reid Miles / Blue Note)
+
+**Palette**
+- Ground: warm cream `#EBE3D2` or mustard `#D9A441` or muted teal `#3D6E70`
+- Ink: `#1A1A18`
+- Limited palette per piece — 3 colors max, one bold, two muted
+- Common mid-century pairings: mustard + brick + cream; teal + cream + black; sienna + ink + bone
+
+**Typography**
+- Display: a geometric grotesque (Futura, Avenir, ITC Avant Garde) at large scale, often condensed weight
+- Or a slab serif (Egyptian / Memphis) for editorial moments
+- Body: humanist serif (Sabon, Garamond) at 16–17px
+- Numerals often set in figures-as-image (a single big numeral as a graphic element)
+
+**Spacing**: structured grid; 4 / 8 / 16 / 24 / 32 / 48
+
+**Radius**: 0 throughout. Mid-century is geometric, not soft.
+
+**Shadow**: none — flat color shapes only
+
+**Motion**: minimal. Shapes slide into place on a single beat, like a Saul Bass title sequence.
+
+**Signature moves**
+- Geometric shape compositions — a single big circle, a triangle, a half-moon — as the primary visual
+- Hand-cut paper feel (shapes have slightly imperfect edges, suggesting they were cut and pasted)
+- Type integrated with the shapes (a headline curving around a circle, or sitting *inside* a colored block)
+- A single illustrative motif repeated (a stylized bird, an abstract figure) tying the piece together
+- Print-feel grain or paper texture at low opacity
+
+**Avoid**
+- Gradients — mid-century is flat color
+- Photography as the lead visual (illustration leads; photography supports)
+- More than 3 colors per piece
+- Rounded / soft-corner UI
+
+**AI prompt seed**
+> Mid-century modern poster composition in the style of Saul Bass, single bold geometric shape (large circle in mustard #D9A441) on warm cream #EBE3D2 paper background, flat color shapes, slight paper texture, hand-cut edges, no gradient, no shadow, 3:4.
+
+**Don't use when**
+- The product is feature-dense / utility-focused (mid-century is editorial / poster thinking)
+- The brand has no heritage / cultural / craft claim
+- Realistic photography is essential to the message
+
+---
+
+> **Same school — Specialty / Genre**: [`y2k-retrofuturism`](./y2k-retrofuturism.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

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

@@ -0,0 +1,53 @@
+# monocle-magazine — Monocle Magazine
+
+- **School**: Editorial / Minimalist
+- **Vibe**: International, considered, magazine-grade kicker / headline / dek hierarchy
+- **Best for**: Editorial, travel / hospitality, journals, considered lifestyle publications
+- **Touchstone**: monocle.com, the Monocle quarterly, Cereal magazine
+
+**Palette**
+- Ground: `#F2EFE7` (cream paper)
+- Ink: `#1A1A1A`
+- Editorial accent red: `#C7322E` (Monocle's signature)
+- Olive: `#5E6347`
+- Hairline rules: `#C8C2B0`
+
+**Typography**
+- Display: a refined slab or transitional serif — Plantin, Mercury, or Tiempos Headline. Italic widely used.
+- Body: Plantin or Tiempos Text at 16–17px, line-height ~1.6
+- Sans for kickers / labels: a precision grotesk like Söhne at 10–11px, letter-spaced 0.08em, often in editorial red
+- Drop caps welcome on long-form features
+
+**Spacing**: 4 / 8 / 16 / 24 / 32 / 48 / 96. Multi-column work uses tight gutters (16–24px between columns).
+
+**Radius**: 0. Magazine pages don't round corners.
+
+**Shadow**: none.
+
+**Motion**: minimal. Page-turn fades. Slow Ken Burns on lead photographs.
+
+**Signature moves**
+- Three-deck hierarchy: tiny red kicker → bold serif headline → italic serif dek
+- Multi-column body copy (2–3 columns) with hairline column rules
+- Numbered features (`Feature 04 — Lisbon`) and small numerals in the margin
+- Lead photograph cropped tight at one edge, headline tucked into the empty negative space
+- Pull-quotes in italic, much larger than body, set in a single column
+
+**Avoid**
+- Sans-serif headlines — Monocle's signature is the serif voice
+- Stock photography — the recipe requires commissioned-feeling photography (warm, peopled, place-rich)
+- Card grids — this is magazine spread thinking, not SaaS thinking
+- More than one accent color (the editorial red is enough)
+
+**AI prompt seed**
+> Editorial magazine photograph, place-specific scene (e.g., Tokyo back street at dusk), warm color grading, slight film grain, one human subject in middle-ground, 3:2, color palette restricted to warm earth tones with one red object.
+
+**Don't use when**
+- The task is a SaaS product page — magazine craft will feel mismatched
+- There's no editorial / human / place content to lead with — without photography this recipe is hollow
+- The audience expects fast scanning — Monocle rewards reading, not skimming
+
+---
+
+> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/muji-kenya-hara.md

@@ -0,0 +1,52 @@
+# muji-kenya-hara — MUJI / Kenya Hara
+
+- **School**: Editorial / Minimalist
+- **Vibe**: Emptiness as fullness, off-white as a value, near-silence
+- **Best for**: Premium quiet positioning, lifestyle goods, "everyday craft" identity
+- **Touchstone**: muji.com (any region), Kenya Hara's book *White*, MUJI ryokan signage
+
+**Palette**
+- Ground: `#F4F2EC` (warm paper off-white — never `#FFFFFF`)
+- Ink: `#2A2A28` (warm ink, never `#000000`)
+- Secondary text: `#7C7B76`
+- Hairline: `#D9D6CD`
+- Accent: there is none. If you must add one, a single brand red `#C8161D` used only as a tiny corner mark or rule.
+
+**Typography**
+- Display: a humanist sans like Söhne, Inter Tight, or Klim's Calibre — weight 400, never bolder than 500. Letterspacing slightly open (0.01em–0.02em).
+- Body: same family at 15–16px, line-height ~1.8
+- Japanese-bilingual deployments: Noto Sans CJK JP paired weight-for-weight
+
+**Spacing**: 8 / 16 / 32 / 48 / 96 / 160 / 240. The big numbers matter — 240px between sections is normal.
+
+**Radius**: 0. Hard, honest edges. Maybe 2px on form fields.
+
+**Shadow**: none.
+
+**Motion**: imperceptible. Fades over 600–900ms. Nothing translates more than a few px. Never bouncy.
+
+**Signature moves**
+- 60–80% of the page is empty space — content lives in a narrow column, far from edges
+- One product image per "screen", small relative to the page, captioned plainly
+- Tiny labels (10–11px, letter-spaced) describing what each section is — "01 — Cotton" — never headlines that shout
+- Square-bracket-style asides, kept neutral
+- Rules (1px hairlines) are the only ornament
+
+**Avoid**
+- Any saturated color other than the MUJI red as a corner mark
+- Drop shadows, glows, gradients of any kind
+- Tabs, accordions, mega-menus, sticky banners
+- "Above the fold" thinking — MUJI lets the eye start in the middle of the page
+
+**AI prompt seed**
+> Single household object on warm off-white #F4F2EC paper ground, raked daylight from upper left, very long quiet space around the object, 3:2, photographed on film, no shadow drama, neutral tone.
+
+**Don't use when**
+- The product needs to communicate feature density (specs, pricing tiers, comparison tables) — MUJI's quietness will hide the message
+- The audience scrolls fast and demands signal density (news / SaaS / dashboard) — they'll bounce
+- The brand is in a noisy competitive set and needs to shout — quietness is luxury, but luxury isn't always what's needed
+
+---
+
+> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/skills/ingeniero-diseno-web/references/style-recipes/notion-pre-ai.md

@@ -0,0 +1,53 @@
+# notion-pre-ai — Notion (pre-AI era, c. 2017–2022)
+
+- **School**: Modern Tool / Builder SaaS (warm-leaning, near Humanist border)
+- **Vibe**: Friendly serif headline + emoji as first-class design element + soft cream + black ink
+- **Best for**: Productivity tools for non-engineers, collaborative software, "your second brain" products
+- **Touchstone**: notion.so pre-2023 redesigns (Wayback), early Notion marketing decks
+
+**Palette**
+- Ground: `#FFFFFF`
+- Soft cream surface: `#F7F6F3`
+- Ink: `#37352F` (Notion's specific not-quite-black, warm cast)
+- Secondary text: `#787774`
+- Hairline: `#E9E9E7`
+- Accent palette: muted Notion colors — `#E4F4F1` (mint), `#FFEDD5` (peach), `#FCE7F3` (rose), `#FEF3C7` (sand) — used as soft block backgrounds, never as bright accents
+
+**Typography**
+- Display: a friendly modern serif — GT Sectra, Sentinel, or Source Serif Pro. Weight 500 for headlines.
+- Body: Inter or Söhne at 16px, line-height 1.6, weight 400
+- Emoji set at 1.25× body size, used as section markers and "page icons"
+
+**Spacing**: 4 / 8 / 16 / 24 / 40 / 64
+
+**Radius**: 4 (small UI) / 8 (cards) / 16 (large panels)
+
+**Shadow**: very soft — `0 2px 8px rgba(15, 15, 15, 0.04)`. Notion's shadows are felt, not seen.
+
+**Motion**: gentle ease-out around 200–300ms. Hover lifts cards by 2–4px with a soft shadow expansion.
+
+**Signature moves**
+- Section headers prefixed with a single emoji icon (`📖 Notes`, `🌱 Ideas`) — the emoji *is* the visual hierarchy
+- Hand-drawn doodles or simple line illustrations integrated into the hero (Notion's signature illustration style)
+- Block-based content metaphor visible in the layout — content reads like draggable cards rather than columns
+- Color-tagged soft pills for category labels (mint = active, peach = idea, etc.)
+- Friendly conversational microcopy
+
+**Avoid**
+- Too many emoji in close proximity (one per section header is the recipe, not five)
+- Dark mode unless explicitly required (Notion's identity is light)
+- Sans-serif headlines — the friendly serif is the differentiator
+- Aggressive CTAs — Notion's hero CTA reads as an invitation, not a demand
+
+**AI prompt seed**
+> Hand-drawn doodle illustration, simple black-line drawing of an organized desk scene with notebooks and houseplants, on cream #F7F6F3 background, friendly approachable line work, small color washes in soft mint and peach, 3:2.
+
+**Don't use when**
+- The audience is enterprise-serious — emoji as design will read as unprofessional
+- The product is graphics-heavy or needs visual density — Notion's recipe is text-led
+- The voice is meant to be authoritative — Notion is approachable, not commanding
+
+---
+
+> **Same school — Modern Tool / Builder SaaS**: [`linear`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md)  
+> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)