create-yss-spec 2.1.8 → 2.1.9

package/template/.claude/skills/web-design-engineer/references/style-recipes/aesop.md

@@ -1,52 +0,0 @@
-# aesop — Aesop Skincare
-
-- **School**: Editorial / Minimalist
-- **Vibe**: Apothecary refinement, sage and ink, serif copy as conversation
-- **Best for**: Premium consumer goods (skincare, candles, eyewear), restaurants with literary aspirations, hospitality
-- **Touchstone**: aesop.com, Aesop store windows, the brown amber bottle
-
-**Palette**
-- Ground: `#E8E4D9` (warm chamois) — sometimes `#F2EFE5`
-- Ink: `#1B1B1B` (true near-black for copy)
-- Sage muted: `#7A8470`
-- Amber bottle accent: `#7A4623` (used very sparingly, e.g., a single rule or seal mark)
-- Cream surface: `#F0EDE4`
-
-**Typography**
-- Display & body: a single transitional serif at every size — Suisse Works, Lyon Text, or GT Sectra (weight 400, italic available). Aesop pairs serif for body copy with a single sans for UI labels (Söhne or Helvetica Now).
-- Body size: 16–18px; line-height ~1.65
-- Labels in small caps (10–11px, letter-spaced 0.12em)
-
-**Spacing**: 8 / 16 / 24 / 40 / 72 / 120
-
-**Radius**: 0 throughout, including form fields. Aesop is square-edged.
-
-**Shadow**: none.
-
-**Motion**: subtle fades, slow drawer slide-ins (~450ms ease-out). Never spring-bounce.
-
-**Signature moves**
-- Body copy reads like product writing in a literary magazine — long, well-cadenced sentences, justified text, no marketing punchiness
-- Product is photographed on a warm chamois surface with a single sage prop (leaf, marble dish, linen) and a long shadow
-- Small-caps section labels (`INGREDIENTS` / `RITUAL`) above each block
-- All-text navigation in the masthead, letter-spaced
-- Asymmetric layouts: image left, generous right-margin block of copy; never centered-everything
-
-**Avoid**
-- Bold weights anywhere — Aesop is all regular and italic
-- Color other than sage / amber / ink — no blues, no purples, no UI-blue accents
-- Pop-up modals (Aesop's UI politely waits)
-- Lifestyle stock photography of smiling models — props and product only
-
-**AI prompt seed**
-> Amber-glass apothecary bottle on warm chamois #E8E4D9 textured paper, single linen napkin and dried sage sprig, raking afternoon window light, deep soft shadow at lower right, 4:5, editorial product photography, color grading warm with slight green cast.
-
-**Don't use when**
-- The product is software or digital-first — Aesop's tactile object photography defines half the recipe; you can't fake it with CSS
-- The audience expects price-comparison utility — Aesop never shows pricing prominently
-- The voice needs to be funny or casual — Aesop is sincere and slow
-
----
-
-> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)  
-> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/template/.claude/skills/web-design-engineer/references/style-recipes/apple-hig.md

@@ -1,52 +0,0 @@
-# apple-hig — Apple Human Interface
-
-- **School**: Editorial / Minimalist
-- **Vibe**: Generous space, hero product on white, one thought per screen
-- **Best for**: Premium hardware, premium software, "this product deserves a stage" feel
-- **Touchstone**: apple.com product pages, Apple keynote slides, HIG documentation
-
-**Palette**
-- Ground: `#FFFFFF` (paper-pure white) or `#000000` (deep black, hero film moments only)
-- Ink: `#1D1D1F` (Apple's not-quite-black)
-- Soft surface: `#F5F5F7`
-- Muted text: `#86868B`
-- Accent (sparingly): system-blue `#0071E3`
-
-**Typography**
-- Display: SF Pro Display (weight 600 for headlines, 400 for sub-display) — fall back to Inter Tight only when SF Pro is unreachable
-- Body: SF Pro Text at 17px, line-height ~1.47
-- Captions: SF Pro at 12–14px, weight 400, color `#86868B`
-
-**Spacing**: 4 / 8 / 16 / 24 / 40 / 64 / 96 / 160. Section breaks are large (160px+ vertical). Headlines breathe.
-
-**Radius**: 12 (small components) / 18 (cards) / 22 (large panels). Apple is rarely sharp-cornered, never gummy-bear rounded.
-
-**Shadow**: barely visible. `0 1px 2px rgba(0,0,0,0.04)` at most. Elevation through whitespace and color contrast, not shadow.
-
-**Motion**: cubic-bezier expo-out; durations 350–650ms for layout moves, 150–250ms for hover. Never bouncy. Often a slow Ken Burns on hero imagery.
-
-**Signature moves**
-- One product photograph centered on whitespace, occupying ~40% of the hero
-- Hero headline in big display weight, body line below in muted gray (`#86868B`), single CTA in system-blue text-link form (no chunky button on hero — that comes later)
-- Section anatomy: tiny eyebrow label → big headline → one paragraph → one product shot → repeat. No tabs, no cards, no bento.
-- Hairline `#D2D2D7` dividers between sections, never anything heavier
-- Numbers are display-weight characters (e.g., a stat reads `12.9″`, with the `″` set in a smaller weight)
-
-**Avoid**
-- Any gradient mesh, glow, or "tech atmosphere" — Apple's gradients are almost always subtle silver-to-charcoal on a product surface, not background decoration
-- Stacking multiple CTAs in the hero
-- Card grids of features (Apple uses long vertical sections, one idea each)
-- Emoji of any kind on marketing pages
-
-**AI prompt seed** (for hero imagery)
-> Studio-lit product photograph, single object centered on pure-white #FFFFFF ground, soft top-down diffused light, subtle floor reflection, 16:9, no text, no people, no shadow drama, color grading neutral.
-
-**Don't use when**
-- The product is software-only and doesn't have a "hero object" to photograph — you'll end up with a blank stage
-- The brand wants to feel scrappy / startup / accessible — Apple HIG reads as expensive and serious
-- Audience is anti-tech-corporate — it'll feel "stale Apple cosplay"
-
----
-
-> **Same school — Editorial / Minimalist**: [`muji-kenya-hara`](./muji-kenya-hara.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/template/.claude/skills/web-design-engineer/references/style-recipes/are-na.md

@@ -1,55 +0,0 @@
-# are-na — Are.na (Honest Web)
-
-- **School**: Brutalist / Raw
-- **Vibe**: System fonts on purpose, content > chrome, the web of the late 90s but considered
-- **Best for**: Indie tools, creative platforms, "research-flavored" products, artist communities
-- **Touchstone**: are.na, the Are.na annual
-
-**Palette**
-- Ground: `#FFFFFF`
-- Ink: `#000000`
-- Are.na blue link: `#0000EE` (the classic browser-default blue, used unironically)
-- Visited link: `#551A8B` (also classic browser-default)
-- Hairline: `#CCCCCC`
-- Optional: warm cream surface `#F4F1E8` for cards
-
-**Typography**
-- Display & body: system serif (Times / Georgia) and / or system sans (the OS's default sans) on purpose
-- No custom font loading — the recipe leans on letting the browser pick
-- Body at 14–16px, line-height ~1.45
-- Italic and underlined links (also browser-default)
-
-**Spacing**: 4 / 8 / 16 / 24 / 32. Tight. Content-dense.
-
-**Radius**: 0
-
-**Shadow**: none
-
-**Motion**: none, or instant
-
-**Signature moves**
-- Underlined blue links, visited purple — left as browser default
-- Headings are just larger versions of body type, no special font
-- Tables, lists, and prose all flow without ornament
-- Footers are tiny, plain, link-rich (the early-web "all links" footer)
-- Cards (if used) are flat rectangles with a 1px gray border and no shadow
-
-**Avoid**
-- Custom fonts of any kind
-- Color other than the blue / purple link colors and the ink + ground
-- Hover animations, transitions of any kind
-- Modals, tooltips, micro-interactions
-- Any sense of "polish"
-
-**AI prompt seed**
-> Found-photograph collage on plain white paper, mixed sources, no Photoshop polish, slight imperfection, hand-cut feel, 4:3.
-
-**Don't use when**
-- The brand needs to feel "premium" — Are.na's recipe explicitly rejects premium signaling
-- The audience expects modern SaaS UX cues — they may bounce, reading the page as broken
-- Half-measures will be tempted — commit fully or pick another recipe; partial Are.na looks broken, not curated
-
----
-
-> **Same school — Brutalist / Raw**: [`bloomberg-businessweek-turley`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md)  
-> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)

package/template/.claude/skills/web-design-engineer/references/style-recipes/balenciaga-post-2017.md

@@ -1,52 +0,0 @@
-# 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/template/.claude/skills/web-design-engineer/references/style-recipes/bloomberg-businessweek-turley.md

@@ -1,52 +0,0 @@
-# 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/template/.claude/skills/web-design-engineer/references/style-recipes/bloomberg-terminal.md

@@ -1,56 +0,0 @@
-# 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/template/.claude/skills/web-design-engineer/references/style-recipes/dieter-rams-braun.md

@@ -1,50 +0,0 @@
-# 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/template/.claude/skills/web-design-engineer/references/style-recipes/field-io.md

@@ -1,50 +0,0 @@
-# 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/template/.claude/skills/web-design-engineer/references/style-recipes/headspace-meditation.md

@@ -1,52 +0,0 @@
-# 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/template/.claude/skills/web-design-engineer/references/style-recipes/linear.md

@@ -1,61 +0,0 @@
-# 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/template/.claude/skills/web-design-engineer/references/style-recipes/mailchimp-freddie.md

@@ -1,52 +0,0 @@
-# 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/template/.claude/skills/web-design-engineer/references/style-recipes/mid-century-modern.md

@@ -1,52 +0,0 @@
-# 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)