create-yss-spec 2.1.7 → 2.1.9

package/template/.hermes/skills/web-design-engineer/references/style-recipes/monocle-magazine.md

@@ -1,53 +0,0 @@
-# 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/template/.hermes/skills/web-design-engineer/references/style-recipes/muji-kenya-hara.md

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

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

package/template/.hermes/skills/web-design-engineer/references/style-recipes/nyt-the-daily.md

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

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

@@ -1,54 +0,0 @@
-# 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/template/.hermes/skills/web-design-engineer/references/style-recipes/resn-storytelling.md

@@ -1,49 +0,0 @@
-# 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/template/.hermes/skills/web-design-engineer/references/style-recipes/stripe-press.md

@@ -1,54 +0,0 @@
-# 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/template/.hermes/skills/web-design-engineer/references/style-recipes/tufte-dataink.md

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

@@ -1,56 +0,0 @@
-# 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/template/.hermes/skills/web-design-engineer/references/style-recipes/vignelli-swiss-helvetica.md

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

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