@palate/cli 0.0.0-stage → 0.0.1

package/kb/sources/design-reference.md

@@ -0,0 +1,991 @@
+# Design Sense: a reference for building great websites
+
+> **What this is:** everything we learned from studying the best websites while redesigning wintechnology.ai and planning the Nest shop. That covers about 17 world-class SaaS and consultancy sites, the vibrant.design section library, about 30 independent maker shops, and a full audit of a site that got things wrong.
+> **How to use it:**
+> - Read **Part 1** once to absorb the principles.
+> - Use **Parts 2–8** while designing.
+> - Run **Part 9** before every launch.
+> - Pull links from **Part 10** whenever you need inspiration.
+>
+> **Compiled:** Oct 2026. Sites change; re-check a reference before quoting it to a client.
+
+---
+
+## Contents
+
+1. [The core of good design: 20 principles](#part-1--the-core-of-good-design-20-principles)
+2. [Page anatomy: how great pages are ordered](#part-2--page-anatomy)
+3. [Section playbook: every section, done well](#part-3--section-playbook)
+4. [E-commerce and maker-shop playbook](#part-4--e-commerce-and-maker-shop-playbook)
+5. [Visual systems: type, colour, space, shape, imagery](#part-5--visual-systems)
+6. [Motion and interaction](#part-6--motion-and-interaction)
+7. [Copywriting that designs](#part-7--copywriting-that-designs)
+8. [Trust, proof and conversion](#part-8--trust-proof-and-conversion)
+9. [Technical quality, anti-patterns and launch checklist](#part-9--technical-quality-anti-patterns-and-checklists)
+10. [Reference library: every site, with links](#part-10--reference-library)
+11. [Our process: how to research and plan a site](#part-11--our-process)
+12. [Site studies: deep dives (ElevenLabs)](#part-12--site-studies)
+
+---
+
+# Part 1: The core of good design (20 principles)
+
+These are the patterns that every great site we studied shares, whether it's Linear's dark product page or a candle maker's Shopify store.
+
+### 1. Show the thing, don't describe it
+The best sites put the **product itself** on screen: real, or a faithful mockup.
+- **Linear's** hero is a full fake app showing an agent working on an issue.
+- **Attio's** hero is three stacked product surfaces (a meeting transcript, a Slack thread, an agent log).
+- **Stripe** fills every bento tile with a working UI fragment.
+- **Maker shops** show the object by candlelight, not a lifestyle stock photo.
+
+*Anti-pattern:* WinTechnology's "glowing rings" stock art. It says "AI" while explaining nothing.
+
+### 2. One idea per section, one job per page
+Each section answers one question: what is it, how does it work, can I trust it, what does it cost, how do I start.
+- When two sections answer the same question (WinTech had "Three pillars" and then "What each pillar looks like"), merge them.
+
+### 3. Hierarchy is everything
+On every great page you can skim the headings alone and get the whole pitch.
+- Headings carry meaning; body text supports them.
+- Labels above headings ("eyebrows") set context in 2–3 words.
+
+### 4. Restraint: one accent, one or two typefaces, one primary action
+- **Linear:** one typeface (Inter Variable), near-black (#08090a), white text, no extra colour.
+- **Stripe:** one brand purple, plus gradients used only as atmosphere.
+- **Shops that feel premium:** one metallic accent (antique gold) on warm black.
+- Every extra colour, font or button label costs attention.
+
+### 5. Specific beats clever
+- "2–3 days → same day", not "faster quotes".
+- "Hertz: 160 countries / 11K+ locations", not "global scale".
+- "Hand-poured in Chicago", not "artisanal quality".
+
+### 6. Proof sits next to the claim
+- **Stripe:** "Products used: Payments, Terminal, Connect" under each story.
+- **Clay:** each pillar is backed by named customer metrics ("Canva: 4 hrs/rep/week").
+- **Vercel:** metrics placed beside the contact form.
+- A number without a source or context reads as marketing.
+
+### 7. Honesty is a design feature
+- WinTech's line "Illustrative examples, not actual client engagements" builds trust.
+- **Thorn & Moon** openly lists the 50+ makers it stocks.
+- **The Sea Wych** says goods are "foraged by the Sea Wych herself, or from small businesses".
+- **Witch Baby Soap** shows its 5–7 day turnaround up front.
+- People forgive limits; they don't forgive surprises.
+
+### 8. Borrow structure, never words
+Study layouts, rhythm and interaction; write your own copy.
+- WinTech's audit found four homepage blocks copying Stripe almost word for word ("Reliable, extensible…", "Connect to…", "Scale with confidence", "Choose an … path"). That's a legal and credibility risk.
+- When adapting, change the **content, metaphor and voice** even if the grid stays.
+
+### 9. Motion should show the system working
+- **Good motion:** a token moving through a workflow (Attio, n8n), events streaming in (Resend), numbers rolling (Linear's pricing uses NumberFlow), a rank line climbing.
+- **Bad motion:** decoration, such as floating blobs, bouncing icons or falling leaves.
+
+### 10. Everything is readable without the animation
+Content must be visible at rest, without scrolling and without JavaScript.
+- WinTech hid sections at opacity 0 until a scroll trigger fired, so menu jumps landed on blank screens.
+- Animate *from* a visible state, never *into* visibility.
+
+### 11. Dark and light are strategy, not taste
+- **Dark** (Linear, Resend, n8n, Tenex) signals pro tools, focus and night-time drama.
+- **Light** (Attio, Stripe, Cal.com, Zapier, Gumloop, Devin) signals openness, trust and approachability.
+- **Warm dark** (Blackened Teeth, Wolf Wytch, Mythologie) signals candlelight, ritual and luxury.
+- **The best pattern for services:** a light base with **dark "product" bands** for the technical moments (Attio's "Universal Context" band, Zapier's dark CTA).
+
+### 12. Design for the person's question at that scroll depth
+Top of page: "What is this?" Middle: "How does it work, and for whom?" Lower: "Can I trust it? What does it cost?" Bottom: "How do I start?" Order sections in that sequence.
+
+### 13. Navigation explains the business
+- **Stripe's** mega-menu gives every link a 2–3 word descriptor ("Billing: Recurring revenue").
+- **Attio** groups its menu by job ("Context / Agents & automations / Ecosystem").
+- **Zapier** splits by team, by app and by use case.
+- A good menu is a summary of the company.
+- *Warning:* Clay's live menu still shows placeholder text ("Link long form description will go in this slot here."). Fill every descriptor before launch.
+
+### 14. One primary call to action, repeated
+- Pick **one label** ("Book a free AI audit", "Step inside") and use it everywhere.
+- WinTech had 12 CTAs with 6 different labels; that's noise.
+- Secondary actions get a quieter style (ghost or text link).
+
+### 15. Show the deliverable
+- If you sell a service, design a preview of what the client receives: an audit report mockup, a sample proof, a "your custom piece" tag.
+- None of the 17 SaaS sites sells a free deliverable this way, so it's a differentiator for service businesses.
+
+### 16. Give the maker or founder a face
+- **Blackened Teeth** puts "Meet the Team" on its homepage, **Toadstool Farm** has "The Misfit's Tale", and **East Fork** tells "one potter, then two…".
+- WinTech's strongest asset (22 years, founded in 2003) was hidden with `display:none`. Hidden credibility is wasted credibility.
+
+### 17. Seasonality and freshness keep a site alive
+- **Maker shops:** rotate seasonal collections (the wheel of the year: Samhain, Yule, Ostara…).
+- **Companies:** surface the blog or changelog on the homepage (Linear's changelog, Stripe's "What's happening").
+- A homepage that never changes feels abandoned.
+
+### 18. Every section links deeper
+The homepage is a table of contents with persuasion. Each section links to the page where long-form content lives, which is also what ranks in search and gets cited by AI.
+
+### 19. Write for people *and* machines
+- Open sections with plain answer sentences that an AI assistant could quote.
+- Use FAQPage, LocalBusiness and Organization schema.
+- Distyl and n8n both publish `llms.txt`, which is worth copying.
+- Real-text headings (WinTech's H1 was split into single letters, so crawlers read "B u i l d").
+
+### 20. Consistency is what reads as "premium"
+- Same card edges, same padding, same badge placement, same button style, same icon set, same photo lighting.
+- Inconsistency (three fonts, four heading weights, leftover template colours) reads as cheap even when each part is fine.
+
+---
+
+# Part 2: Page anatomy
+
+## 2.1 SaaS / services homepage (the proven order)
+
+| # | Section | The visitor's question | Best references |
+|---|---|---|---|
+| 0 | Announcement bar | "Anything new?" | Attio ("Orchestrate revenue agents with Workflows →"), Stripe /customers live-sales bar |
+| 1 | Nav + mega-menu | "What do they offer?" | Stripe, Attio, Zapier |
+| 2 | Hero (headline + product visual + 2 CTAs) | "What is this?" | Attio, Linear, Switchyard, Devin, Gumloop |
+| 3 | Logo / tool strip + proof row | "Who uses it?" | Linear, n8n, Attio |
+| 4 | Core value as tabs or bento | "What does it do?" | Attio tabs, Stripe bento, Linear Fig cards |
+| 5 | Deep feature demos | "How does it work?" | Attio workflow, Resend events, n8n canvas |
+| 6 | Integrations / ecosystem | "Will it fit my stack?" | Attio "whole stack", Zapier, n8n |
+| 7 | Use cases / customer stories | "Does it work for people like me?" | Stripe stories, Linear customers, Retool |
+| 8 | How it works / process | "What happens if I start?" | Cal.com 3 steps, Cofounder, Tenex |
+| 9 | Stats band | "How big or reliable?" | Stripe "backbone", Cloudflare |
+| 10 | Testimonials | "Do people like it?" | Linear quote cards, Cal.com wall of love, Raycast |
+| 11 | Pricing / engagement | "What does it cost?" | Linear, Vercel, Attio pricing |
+| 12 | Blog / changelog teaser | "Are they active?" | Linear changelog, Stripe "What's happening" |
+| 13 | FAQ | "What about…?" | Cal.com, Resend |
+| 14 | Final CTA | "OK, how do I start?" | n8n, Linear, Zapier |
+| 15 | Footer | "Where's the rest?" | Linear, Vercel, Zapier |
+
+**Background rhythm:** alternate light → light → **dark band** → light → **coloured or dark band** → light. Dark bands mark "technical" or "important" moments (Attio switches to dark for "Universal Context"; Zapier ends on a dark "Go from AI to ROI" band).
+
+## 2.2 Maker / e-commerce homepage
+
+| # | Section | Best references |
+|---|---|---|
+| 1 | Top bar (next market / shipping / cut-off) + header | Wolf Wytch, Blackened Teeth |
+| 2 | Hero: the work, in its world | Blackened Teeth, Toadstool Farm, Mythologie |
+| 3 | Collection picker ("doors") | Toadstool Farm, Wax Apothecary, Lady Moon |
+| 4 | New / bestsellers row with scarcity badges | Wolf Wytch, Mythologie |
+| 5 | Story-led or made-to-order spotlight | Haunt, Sea Wych |
+| 6 | Curated / partner makers | Thorn & Moon, Wolf Wytch artists, Bloomist |
+| 7 | Seasonal campaign band | Sea Witch Botanicals, Mythologie "All Hallow's Eve" |
+| 8 | Meet the maker | Blackened Teeth, Toadstool, East Fork |
+| 9 | Events / markets | Mythic Wick |
+| 10 | Reviews + promises | Wolf Wytch, Sea Witch values |
+| 11 | Newsletter "club" | Toadstool "Misfit's Club", Mythologie "Insider" |
+| 12 | Journal | Blackened Teeth "Dark Library", Sea Witch blog |
+| 13 | Footer with benefit strip | Blackened Teeth, Wax Apothecary |
+
+## 2.3 Sales / contact page
+Proof beside the form (Vercel). A short form, or an inline booking calendar (Cal.com). A separate support path ("Technical issues? Contact support"), as Linear does.
+
+## 2.4 Pricing page
+Columns, with each plan building on the last ("All Basic features +") → a full comparison table → trust line ("Trusted by more than 40,000 companies") → FAQ (Linear, Vercel, Attio, Resend).
+
+---
+
+# Part 3: Section playbook
+
+For each section: **what great looks like → recipe → best references → mistakes.**
+
+## 3.1 Announcement bar
+- **Great:** one short line, one arrow, dismissible. It announces *one* thing.
+- **Recipe:** 32–40px tall, high contrast (black on a light site, or the brand colour), centred text plus →.
+- **References:**
+  - Attio's black bar, "Orchestrate revenue agents with Workflows →"
+  - n8n's "In The Loop" conference banner
+  - Stripe /customers: "8 sales reps available… Chat now"
+- **For shops:** "Find me at the Haunted Market · Oct 25 →", or the holiday order cut-off.
+- **Mistakes:** rotating carousels of 4 messages; promo codes nobody asked for.
+
+## 3.2 Navigation and mega-menu
+- **Great:**
+  - 4–6 top items.
+  - The mega-menu groups links by *job*, with a one-line descriptor under every link and a promo card in its own column.
+  - A ghost secondary button and a solid primary button on the right.
+- **Recipe (from the Stripe Products menu, observed directly):**
+  - Columns: Payments / Revenue / Money Management / Platforms and marketplaces / More.
+  - Each link is a blue name with a grey descriptor ("Billing: Recurring revenue", "Radar: Fraud prevention").
+  - The right column holds a promo card with an image (Stripe Sessions 2026, "Watch now").
+  - "See all products" sits at the bottom.
+- **Recipe (from the Attio Platform menu, observed directly):**
+  - Three job columns (Context, Agents & automations, Ecosystem), each link with a benefit line ("Workflows: Orchestrate any revenue motion").
+  - A shaded side panel: "Attio for: Slack / ChatGPT / Claude" and "Get started: Attio 101 / Startup program / Talk to sales".
+- **Zapier:** Solutions split By team / By app / By use case.
+- **Behaviour:**
+  - Sticky header that shrinks and blurs on scroll.
+  - The menu fades and drops about 8px in about 200ms.
+  - Esc closes it, keyboard navigation works.
+  - Mobile: a full-screen sheet with accordions and the primary button pinned to the bottom.
+- **Mistakes:** placeholder descriptors (Clay); anchor links to homepage sections dressed up as pages ("About → #about"); more than one primary button.
+
+## 3.3 Hero
+**Great:** a headline you understand in 3 seconds, a sub-line that adds specificity, two CTAs (primary + ghost), and a **visual of the actual product or work.**
+
+**Six proven hero types**
+
+| Type | How it works | Examples |
+|---|---|---|
+| **Product window** | Centred headline; a real app window rising from the bottom edge | Attio ("Welcome to agentic revenue." + Basepoint app window), Devin (headline left, app below), Gumloop |
+| **Full fake app** | Headline left; a fully rendered dark app with an activity feed | Linear |
+| **Hub-and-spoke diagram** | Centred headline; soft 3D app tiles on both sides wired into one glossy central tile | Switchyard (on vibrant.design). Perfect for integration or automation businesses. |
+| **Floating cards** | Headline with floating status or task cards around it | Cofounder (pixel-art landscape + task cards) |
+| **Mood still life** | Full-bleed atmospheric photo, text set into the shadows | Blackened Teeth ("Where Halloween lives all year"), Tenex (black-and-white statue, "Win the next decade."), n8n (glowing lightning bolt) |
+| **Try-it showcase** | Headline left + sub right; below, a large rounded panel with product tabs and an interactive sample you can play | ElevenLabs ("Bringing technology to life": grainy gradient voice orbs with a play button). See Part 12. |
+
+**Headline patterns that work**
+- **Short declaration:** "Welcome to agentic revenue." (Attio) · "Win the next decade." (Tenex)
+- **Category + audience:** "The product development system for teams and agents." (Linear)
+- **Promise + control:** "AI agents and workflows you can see and control." (n8n)
+- **Parallel rhythm:** "Every agent. Every tool. One door." (Switchyard). Adapt the rhythm, not the words.
+- **Clause stack:** Vercel splits its headline into clauses, each with a follow-up line.
+- **Story line:** "Financial infrastructure to grow your revenue. Accept payments…" (Stripe: a bold first sentence, then grey continuation text in the same paragraph).
+
+**The grey-continuation trick:** a bold first sentence followed by a muted second sentence in the same block. Stripe ("Financial infrastructure…"), Linear ("A new species of product tool. *Purpose-built for…*"), Attio ("Your team, amplified. *Agents prospect…*").
+
+**Recipe**
+- H1: 64–96px desktop / 40–48px mobile, tight leading (1.0–1.05).
+- Sub: 17–20px, muted, max ~60 characters per line.
+- CTAs 24–32px below the sub.
+- The visual starts within the first screen (its top edge visible).
+- Fits in one screen at 1440×900.
+
+**Optional extras**
+- Rotating "X can Y" line (n8n: "IT Ops *can* On-board new employees… You *can*…").
+- Trust microcopy under the CTA (Cal.com: "No credit card required").
+- A rating row (Cal.com: Trustpilot, Product Hunt, G2 stars right in the hero).
+
+**Mistakes**
+- Stock abstract art.
+- Headlines with missing punctuation ("Build Automate Rank").
+- The H1 split into per-letter spans.
+- A 100vh hero that pushes everything below the fold.
+- Three different CTAs.
+
+## 3.4 Logo strip, tool strip and proof row
+- **Great:** a quiet monochrome logo row with a small kicker line ("Powering the companies building the future", Linear), followed by a big statement paragraph.
+- **No big-name clients?** Show **tools** ("We build on the tools you already run"). n8n follows its logos with a three-part proof row: "Top 50 GitHub · 206.5k stars", "4.7/5 on G2 + a quote", "200k+ community members".
+- **Variants:**
+  - Marquee: Linear, n8n and Vercel all use scrolling marquees.
+  - Hover-reveal: Devin's logo cloud reveals a project image on hover; Framer's carousel reveals background images.
+  - Orbit: Mobbin's ring of brand icons around one big number.
+  - Hover testimonial: Griffin's logo grid reveals floating testimonial cards.
+- **Mistakes:** colourful logos fighting each other; implying partnerships that don't exist (use "works with").
+
+## 3.5 Core value: tabs, bento, figure cards
+**Tabs (Attio, observed directly)**
+- A vertical list on the left (Build pipeline / Convert leads / Run sales motions / Forecast revenue / Retain and expand).
+- The active tab shows a two-beat header ("Your team, amplified. *Agents prospect…*") with a large product panel on the right that changes per tab.
+- Auto-advance with a progress bar; pause on hover.
+- Also: Gumloop's vertical icon tabs (Sales / Support / Data / Meetings / Calls) swapping agent mockups; Medusa's tabbed code/dashboard previews; Resurf's minimal tab row.
+
+**Bento**
+- Tiles of different sizes, each holding a *real UI fragment*, not an icon.
+- Stripe (white cards, pastel gradients, a phone checkout, a billing chart); Resurf (soft grey tiles on warm off-white, serif headline, minimal mockups); Clerk (dark tiles, looping micro-animations); Agentwork (light tiles, synced line animations).
+
+**Figure cards:** Linear's "FIG 0.1 / 0.2 / 0.3" columns with isometric line drawings. Calm, technical, editorial.
+
+**Mistakes:** icon + title + three lines of generic copy ("Dual Expertise / AI-First / Results-Driven"). It could be any company.
+
+## 3.6 Product demos and mockups
+Build demos in **HTML/CSS/SVG, not screenshots or videos.** They stay crisp, indexable and lightweight.
+- **Workflow nodes (Attio):** Trigger "Record created" → Web agent → Custom agent "Score lead" → If "Route by segment" → branches, each with a green "Completed" badge.
+- **Kanban with captions (Attio):** Discovery / Demo / Proposal columns with deal cards; two short captions below ("Catch changes to the deal." / "Skip the review scramble.").
+- **Event stream (Resend):** delivered → opened → clicked → bounced, cycling.
+- **Execution log (n8n):** "Update Detected → Running tests → Failed → Rolled back automatically → Team notified".
+- **Chat demo (Gumloop):** "How's our Q1 pipeline looking?" → the agent shows its steps ("Fetching opportunities… cross-referencing HubSpot") → a result table.
+- **Code tabs (Resend):** 13 languages in one tabbed code block.
+- **Recipe:** keep each demo to one story with 3–6 steps, loop slowly (6–10s), pause on hover, and show realistic data, not lorem ipsum.
+
+## 3.7 Integrations and ecosystem
+- **Hub-and-spoke:** inputs → engine → outputs, with a human-approval gate. Switchyard's hero; Stripe's integration diagram (CRM / SDK / App Marketplace around a central "stripe" node).
+- **Spectrum / slider:** Zapier's "Fluid Determinism": a slider from Deterministic → +AI → +agent → Fully agentic, each stop with a worked example ("Ticket intake: New ticket → Send auto reply → Create Jira issue"). A brilliant way to sell "the right amount of AI".
+- **Icon row:** Attio's dark "Your whole stack, connected." with 10 tool icons.
+- **Directory:** n8n's /integrations with category filters, including a dedicated HITL (human-in-the-loop) category.
+- **Motion:** connector lines light up in sequence; badges orbit on dotted paths (Cloudflare Startups).
+
+## 3.8 Use cases and customer stories
+- **Stripe:** one big story with a photo ("Hertz unifies commerce with Stripe") → stats row ("160 countries / 11k+ locations / Products used…") → an expandable list of more one-line stories.
+- **Linear customers:** filter chips (Featured / SaaS / AI / Fintech…), story cards ("Watch video →", "Read story →"), a stat triplet ("2.0x / 3.3x / 50%"), a long list table, and a closing "Your company: Make the switch" card.
+- **Retool:** outcome-first ("Ramp: $8M and 20,000+ hours saved").
+- **Card recipe:** industry tag → **big before→after number** → one-sentence problem and fix → "Tools used". End the row with a "Your business →" card.
+
+## 3.9 How it works / process
+- **Cal.com:** three numbered cards (01 Connect your calendar / 02 Set your availability / 03 Choose how to meet), each with a tiny illustration.
+- **Cofounder:** a product mockup on the left; numbered list items on the right (2.1, 2.2…) that open detail panels, on warm cream. Calm and unhurried.
+- **Tribe AI:** Map / Build / Activate, one word each, with a letter-by-letter reveal.
+- **Tenex:** blunt anti-consultancy copy ("No 6-month strategy work. No 200-slide presentations.").
+- **Recipe:** 3–4 steps, each with a timeframe. For each step: what we do / what you do / what you get.
+
+## 3.10 Stats
+- **Stripe "The backbone of global commerce":** 4 big numbers with tiny labels (135+ currencies · US$1.9tn volume · 99.999% uptime · 200M+ subscriptions) over a quiet radial graphic.
+- **Cloudflare:** a split panel of chaos vs calm.
+- **Linear pricing:** NumberFlow rolling digits.
+- **Recipe:** 3–4 numbers maximum, each with a context line ("100+ projects *since 2003*"). The numbers are correct before any animation runs.
+- **Mistakes:** unsourced round numbers ("3x faster", "40% cost reduction").
+
+## 3.11 Testimonials
+- **Linear:** two large coloured cards (a soft blue gradient for OpenAI, acid lime for Ramp), each one sentence in big type with name and role, then "Linear powers over 40,000 product teams."
+- **Zapier:** an editorial serif quote beside the client's brand image (Mercari).
+- **Cal.com:** a "Wall of love" masonry of tweet-style reviews with avatars and "Show more".
+- **Raycast:** an avatar grid that expands into quote cards.
+- **Mintlify:** six muted cards in a grid.
+- **Glide:** image cards that expand on hover.
+- **Fractional AI:** long, specific executive quotes ("I just hired them again…").
+- **Recipe:** one long specific quote + 3–6 short ones; real names, roles and companies; a rating badge if you have one.
+
+## 3.12 Pricing / engagement models
+- **Linear:** 4 columns (Free / Basic $10 / Business $16 / Enterprise), each listing "All [previous] features +", NumberFlow digits, then a full comparison table.
+- **Attio:** "From zero to IPO.", Monthly/Annual toggle with "Save 20%", a "Popular" tag, and a one-line descriptor per plan.
+- **Vercel:** "Popular" on Pro, plus reassurance callouts ("No idle, no waste", "Control your spending").
+- **Foglamp:** dark three-tier with an amber "Popular" badge.
+- **Stripe:** standard vs custom side by side.
+- **For services:** "Starting at" or "Scoped after audit", plus "You own every workflow", "Month-to-month, no lock-in".
+
+## 3.13 FAQ
+- **Cal.com:** a heading with two buttons, then a clean accordion, placed right before the final CTA.
+- **Resend:** blunt one-line answers ("No, all plans are currently priced the same for every customer.").
+- **Foglamp:** the last row lets you type your own question.
+- **Recipe:** 6–12 questions grouped by theme, 40–80 word answers, FAQPage schema.
+
+## 3.14 Contact and booking
+- **Vercel "Talk to our Sales team":** left column of proof metrics with customer logos; right column a short form (name, company email, country, website, "How can we help?").
+- **Cal.com:** the booking calendar is the interface. Embed it inline so people book without leaving the page.
+- **Linear:** sparse, with a separate support path.
+- **Recipe:**
+  - Left: what happens next (numbered steps), a face, location, 2–3 stats.
+  - Right: an inline calendar, plus a "Prefer to write?" tab with a 4-field form.
+  - One form definition used site-wide.
+
+## 3.15 Final CTA
+- **n8n:** "Simple enough to see. Powerful enough to ship." over an orange glow, one button.
+- **Linear:** "Built for the future. Available today." with two buttons.
+- **Zapier:** a dark band, "Go from AI to ROI", with orange "Start free" and ghost "Talk to sales".
+- **Tenex:** "Stay on the right side of history."
+- **Recipe:** a two-beat line + one primary button (+ an optional ghost).
+
+## 3.16 Footer
+- **Linear:** 5–6 clean link columns (Product / Features / Company / Resources / Connect).
+- **Vercel:** a huge directory footer (Agent Stack, Core Platform, Security, Tools…) with "New" badges and a live status dot.
+- **Zapier:** a CTA band, then an A–Z "Apps by title" index and popular-searches columns (strong for SEO).
+- **Skydive / Equals:** an oversized wordmark across the full width.
+- **For local businesses:** add NAP (name, address, phone), hours and a map link, plus `llms.txt`.
+
+---
+
+# Part 4: E-commerce and maker-shop playbook
+
+## 4.1 Brand feel for independent makers
+- **The work is the hero.** Real pieces, real light, real hands. Toadstool Farm puts the maker herself in an autumn field; Wolf Wytch fills the screen with a wax-melt close-up.
+- **Story worlds instead of categories:**
+  - Hex and Wax collection names: "Sweetly Sinister", "Unearthed", "Deadly Blooms", "Wicked Orchard".
+  - Wolf Wytch folklore lines: "Black Phillip", "The Red Queen".
+  - Lady Moon's shop-by-archetype: Spooky / Cozy / Pop / Glam witch.
+- **Named communities:** "Join Our Coven" (Wolf Wytch), "The Guild" (Mythologie), "Misfit's Club" (Toadstool), "The Collectors Chamber" (Blackened Teeth loyalty), "Stories from the artroom" (Alchemy).
+- **Brand promise lines:** "We don't sell candles. We sell portals." (Mythologie) · "Where Halloween lives all year." (Blackened Teeth) · "Artist Inspired. Artisan Made." (Bethany Lowe) · "100% Human Created" badge (Hex and Wax).
+
+## 4.2 Collection pickers ("doors")
+- **Toadstool Farm:** two huge photo doors, "Shop Vintage / Shop Art", with the name in a big serif right on the photo. The model for showing handmade and curated goods in one store.
+- **Wax Apothecary:** an illustrated tile per collection with small buttons.
+- **Blackened Teeth:** "Explore by Collection", a row of framed tiles.
+- **Recipe:**
+  - 2–4 big cards with arched or framed shapes.
+  - Each has a photo, name, one-line promise and a live count.
+  - The names match the menu exactly.
+
+## 4.3 Product cards
+- Square images on a consistent backdrop. A second image on hover. Name in a serif, price in the accent colour.
+- **Scarcity badges from live stock:** "Only 2 left", "One of a kind", "Limited piece" (Lunar Moth).
+- Sold-out items stay visible, as proof of demand.
+- Review stars on the card (Mythologie: "5,000+ Five-Star Tales").
+
+## 4.4 Product page
+- Gallery left (thumbnail rail), info right, sticky.
+- **Info order:** collection label → name → price → badge → short story → options → Add to basket → trust line → accordions (Details, Materials, Care, Shipping).
+- **Haunt:** "Fully Customizable / Global Shipping / Interest-Free Payment Plans" icon list, then "Add to Enquiry", then accordions "Handcrafted to order / Craftsmanship / Customisation".
+- **Lady Moon:** thumbnail rail, story paragraph, details list.
+- **Mythologie:** scent notes plus a comparison table.
+- Below: "From the workbench" story + process photo, then "You may also like".
+- **Mobile:** swipe gallery + a sticky add-to-basket bar.
+
+## 4.5 Personalized / made-to-order flows
+- **Crown & Paw:** pick a style → number of pets → upload a photo → options → "Free proofs + revisions" → turnaround promise ("Artwork ready in 1–2 days") → "How we make" explainer.
+- **Haunt:** "Luxury cannot be rushed", customisation options, payment plans.
+- **Lunar Moth:** a bespoke option, ring sizer, gift wrap.
+- **Little Words Project:** a "Create Your Own" entry point.
+- **Artifact Uprising:** do it yourself *or* "we'll design it for you".
+- **Recipe:**
+  - text field with a live character count
+  - font choices previewing the customer's own words
+  - colour swatches
+  - a required "I've checked my spelling" box
+  - the make time shown next to the price, not hidden
+  - "Personalized items can't be returned, but I'll make it right"
+- **Technical:** the personalization text must appear on the order, the email and the packing slip.
+
+## 4.6 Curated / resold goods
+- Be open that items are sourced: Thorn & Moon's brand roster, Wolf Wytch's "Shop our favourite artists", Bloomist's named maker collaborations, HausWitch's curated New England makers.
+- Present them as a **cabinet of curiosities**: contained objects on shelves with museum-style tags (inspired by Stripe Press's book shelf and Curated Supply's gallery feel).
+- Never give curated items "handmade" wording.
+
+## 4.7 About the maker
+- **East Fork:** the best origin story ("one potter, then two… wood-fired kiln on an old tobacco farm"); "15 Years of East Fork".
+- **Blackened Teeth:** a dark founders portrait on the homepage with a short story.
+- **Toadstool:** a long personal manifesto ("The Misfit's Tale").
+- **The Sea Wych:** "Meet the Sea Wych" in the nav, plus "Her Story".
+- **JJ Potts:** process GIFs of kiln firing. **Astier de Villatte:** atelier storytelling.
+- **Recipe:** portrait (arched frame) + a 60–80 word first-person story + handwritten signature + 3 process photos.
+
+## 4.8 Events and markets
+- **Mythic Wick** (the best found): chronological event blocks with image, dates, time, address, embedded map, Google/ICS calendar export, the market's own poster; a "Leaving Soon" page.
+- **Witch's Mark:** a simple stacked list. **Crafty Mystic:** banner cards.
+- **Thorn & Moon / HausWitch:** Events in the main nav; workshops, aura photos and parties sold as products.
+- **Recipe:**
+  - Date-block cards (big day number, month, weekday).
+  - Auto-hide past events.
+  - Store events as CMS entries (on Shopify, metaobjects) so the owner adds events without touching the theme.
+
+## 4.9 Seasonality
+- **Sea Witch:** "Something Wicked This Way Comes" campaign band.
+- **Mythologie:** "All Hallow's Eve" hero.
+- **Bethany Lowe:** Halloween split into themed groups ("Vintage Charm", "Boo Crew", "Midnight Magic").
+- **Wheel of the year** (Wolf Wytch, Witch City Wicks): Samhain is the peak, but spring and Yule still fit.
+- **Recipe:** one seasonal band with a season dropdown (colour + glyph + countdown), and a "Leaving soon" shelf.
+
+## 4.10 Reviews, values, newsletter
+- **Reviews:** Wolf Wytch shows four short quotes with the product name above each; Goth Candles shows a 4.90★ score on the homepage; import Etsy reviews if you sell there.
+- **Values:** Sea Witch's "The Sea Witch Way" (four icon pillars); Witch Baby Soap's turnaround shown up front.
+- **Newsletter:** a named club with a promise ("no spam, just spells!", Lady Moon), a wax-seal emblem (Wax Apothecary), a welcome discount.
+
+## 4.11 Multichannel selling (website + Etsy + markets)
+- Make one system the **source of truth** for stock (Shopify), with its POS for markets and a sync app for Etsy (Shuttle, QuickSync, CedCommerce, LitCommerce; Trunk syncs stock only).
+- Shopify's own Etsy connector (Marketplace Connect) no longer accepts new Etsy connections.
+- **Etsy bans reselling mass-produced goods**, so curated or wholesale lines stay on the website and at markets.
+- **Made-to-order:** no stock tracking; show a processing time instead.
+- **Risks:**
+  - One-offs can sell twice during sync delay. Hide them online before a market.
+  - Offline card payments need a physical reader; Tap to Pay doesn't work offline.
+  - Shopify's POS Go is being retired in 2027.
+  - Sync "restocks" trigger Etsy's $0.20 renewal fees.
+
+---
+
+# Part 5: Visual systems
+
+## 5.1 Typography
+
+**Typefaces we've seen the best sites use**
+
+| Site | Typefaces | Feel |
+|---|---|---|
+| Linear | Inter Variable only | precise, neutral, tool-like |
+| Vercel | Geist (their own) | engineered, modern |
+| Stripe | Söhne | confident, Swiss, premium |
+| Cal.com | Cal Sans (display, free) + Inter | friendly, bold |
+| n8n | Geomanist | geometric, approachable |
+| Resend | Domaine (serif) + Inter | editorial dev-tool |
+| Equals, Resurf, Zapier quotes | large serif headlines | warm, editorial |
+| Maker shops | Cormorant Garamond, Playfair, IM Fell, Cinzel (small caps) + quiet body | romantic, apothecary, old-book |
+
+**Pairing rules**
+- **One family** (Linear) is the safest premium move.
+- **Display + body:** one characterful headline face + one neutral text face. Never more than two, plus an optional mono (for code or logs) and one handwritten accent for signatures only.
+- **Serif headline + sans body** = warmth and editorial trust (Equals, Resurf, Cofounder, maker shops).
+- **Sans headline + sans body** = product, speed, tech (Linear, Vercel, Attio).
+
+**Free Google Fonts equivalents**
+- **Geometric / tech:** Geist, Inter, Manrope, Plus Jakarta Sans
+- **Editorial serif:** Instrument Serif, Newsreader, Fraunces, Cormorant Garamond, EB Garamond, Lora, Spectral
+- **Old-book / folklore:** IM Fell English (display only), Crimson Pro
+- **Labels:** Cinzel small caps
+- **Handwritten accent:** La Belle Aurore, Homemade Apple
+- **Mono:** Geist Mono, JetBrains Mono
+
+**Scale (reliable defaults)**
+
+| Role | Desktop | Mobile | Leading |
+|---|---|---|---|
+| H1 | 64–96px | 40–48px | 1.0–1.05 |
+| H2 | 40–56px | 30–36px | 1.05–1.15 |
+| H3 | 22–28px | 20–22px | 1.15–1.25 |
+| Body | 16–18px | 16px | 1.6–1.7 |
+| Small | 13–15px | 13–14px | — |
+| Labels | 11–13px | 11px | uppercase, +0.06 to +0.14em tracking |
+
+**Rules**
+- One H2 style for the whole site; no light (300) weights for headings on screens.
+- Body text max 60–75 characters per line.
+- `text-wrap: balance` on headings.
+- Tabular figures for prices and stats.
+- Accent words in italic or in the accent colour, at most one per heading.
+
+## 5.2 Colour
+
+**Strategies**
+
+| Strategy | Example | When to use |
+|---|---|---|
+| Near-black mono | Linear (#08090a, white text, grey hierarchy) | dev tools, premium SaaS |
+| White + one brand colour + atmosphere gradients | Stripe (purple; pastel/orange wave gradients) | big platforms, fintech |
+| White + black UI + soft lavender washes | Attio | CRM, approachable SaaS |
+| Warm off-white + orange accent | Zapier (cream, orange buttons, sunset photos) | friendly automation |
+| Dark + one hot accent | n8n (dark purple-navy, orange), Tenex (black, yellow) | bold, technical, confident |
+| Candlelit warm dark | Blackened Teeth, Wolf Wytch (black, gold, oxblood) | luxury and gothic makers |
+| Cottage light | Sea Witch, Toadstool (cream, moss, earth) | botanical, cosy makers |
+
+**Rules**
+- **One accent colour** for actions (buttons, links). Everything else is neutral.
+- **Tint the neutrals.** Warm greys toward the brand hue (WinTech cream #F2EFEA + espresso #25221E; Nest night #141114 + cream #EDE3CF). Pure #000 or #FFF reads as a template.
+- **Semantic colours** (success, warning, error, scarcity) are separate from the brand accent.
+- **Product-specific accents** live inside their own areas only: one colour per pillar or tab, one colour per season.
+- **Delete leftovers.** WinTech had indigo, blue, green and purple template colours mixed into a copper palette.
+- **Contrast:** 4.5:1 for body text, 3:1 for large text and UI.
+
+**Palettes worth keeping (hex values)**
+
+| Palette | Colours |
+|---|---|
+| WinTech warm | cream #F2EFEA · paper #FFF · espresso #25221E · ink #2C2824 · muted #6E665E · line #E3DDD4 · copper #C48C56 |
+| Candlelit Night | #141114 · #2A2326 · oxblood #5C1A22 · antique gold #B08D57 · candle cream #EDE3CF |
+| Dark Cottage | moss #4A5A3C · sage #8F9E80 · mushroom #6B5444 · parchment #EFE6D2 · bone #F6F1E7 |
+| Witching Hour | plum #3B2140 · lavender #9B87A8 · midnight #1E2433 · pumpkin #C5652A (sparingly) |
+
+## 5.3 Space, grid and layout
+- **Grid:** 12 columns, 1200–1280px max content width, 24px gutters, 16–20px minimum side gutter on mobile.
+- **Section padding:** 96–128px desktop, 64–72px mobile. Generous space signals quality.
+- **8px spacing scale** (8 / 16 / 24 / 32 / 48 / 64 / 96 / 128).
+- **Common compositions:**
+  - Centred statement → wide visual below (Attio, Switchyard, Cal.com sections).
+  - Split 5/7 or 6/6 text + visual, alternating sides (Cofounder, Stripe stories).
+  - Vertical tab list 4/8 (Attio, Gumloop).
+  - Bento 3×2 with one 2×2 hero tile.
+  - Card grids 3 or 4 across.
+- **Use `gap`, not margins.** Consistent card edges and baselines. Content sets height; don't stretch cards over empty space.
+- **Mobile:** stack, swipe rows with the next card peeking (78–85% width), sticky primary actions.
+
+## 5.4 Shape, depth and texture
+- **Radius:** pick one family. Linear and Vercel use small radii; Attio and Cal.com use medium (8–14px); pills for buttons and tags (Attio, Devin). Maker shops: squared "label" buttons (3px) and arched image tops.
+- **Shadows:** one soft shadow for floating UI cards (e.g. `0 20px 40px -20px rgba(…,.25)`); flat everywhere else. On white backgrounds, add a 1px warm border, because a shadow alone disappears.
+- **Signature shapes:** arches (doorways), inner gold frames, deckled paper edges, wax seals, museum tags, shelf lines.
+- **Texture:** subtle paper grain (about 5% opacity) on dark bands; dotted or grid backgrounds behind diagrams (Zapier, Stripe).
+- **Glossy 3D app tiles** (Switchyard) add depth to diagrams without photos.
+
+## 5.5 Imagery and illustration
+- **Priority:** real product UI > real photos of the work or people > custom illustration > stock (avoid).
+- **Product UI:** realistic names and data; cropped so it bleeds off the edge; never a full desktop screenshot shrunk to unreadability.
+- **Photography:** one consistent lighting style across the site (maker shops: warm low-key light, dark wood, moss, candles). Products on one backdrop.
+- **Illustration:**
+  - Linear's isometric line figures.
+  - Johanna Parker's hand-drawn folk patterns.
+  - Wolf Wytch's bold white folklore illustration on black.
+  - Cofounder's pixel-art landscapes.
+  - One style per site.
+- **Icons:** one line set, one stroke width. Never mix sets.
+
+---
+
+# Part 6: Motion and interaction
+
+## 6.1 What we've seen
+| Technique | Where | Use for |
+|---|---|---|
+| Logo marquee | Linear, n8n, Vercel | social proof strips |
+| Product window rising on load | Attio, Devin | heroes |
+| Tab auto-advance + progress bar | Attio, Gumloop | feature tabs |
+| Token moving through workflow nodes | Attio workflows, n8n canvas | automation stories |
+| Event stream cycling | Resend | integrations, live systems |
+| Rolling numbers (NumberFlow) | Linear pricing | stats, prices |
+| Letter or word split reveals | Tribe AI (characters), Distyl (words) | manifesto lines |
+| Hover reveal | Devin logo cloud, Framer carousel, Griffin testimonials, Glide cards | proof and stories |
+| Orbiting badges on dotted paths | Cloudflare Startups | integration ecosystems |
+| Typing dot-matrix headline + glowing graph | Giga | metric or ranking stories |
+| Slider through modes | Zapier Fluid Determinism | explaining spectra |
+| Video demos | Resend (4 videos), n8n (3) | complex products |
+| Peel sticker, grainy card, postage folder | vibrant.design feed | small delight moments |
+| Orb carousel with play button | ElevenLabs hero | letting people *experience* the product (hear a voice) |
+| Ruler-style timeline scrubber | ElevenLabs research section | release history, milestones, "our story" |
+| Floating product widget | ElevenLabs "Voice chat" pill (their own agent) | dogfooding: the product is the support widget |
+
+## 6.2 Rules
+- **Motion explains.** If it doesn't show a system working or guide attention, cut it.
+- **Durations:** 200–400ms for UI, ease-out. Loops are slow (6–10s) and pause on hover.
+- **One orchestrated moment per page** beats scattered effects.
+- **Never hide content waiting for animation.** It must be visible at rest, without JS, and on fast jumps.
+- **`prefers-reduced-motion`:** keep fades, remove movement. Among the SaaS sites we checked, only Attio had a reduced-motion rule. Do better.
+- **Hover states on everything clickable:** lift 2–6px, border to accent, image brightening (the "candlelight" brighten for shops), arrows nudging 4px.
+- **Focus states** match hover states, so the keyboard experience is designed too.
+
+---
+
+# Part 7: Copywriting that designs
+
+## 7.1 Patterns that work
+- **Two-beat lines:** "Agents dig. You close." (Attio) · "Simple enough to see. Powerful enough to ship." (n8n) · "Move fast. Break nothing." (n8n) · "Built for the future. Available today." (Linear)
+- **Bold + grey continuation:** "A new species of product tool. *Purpose-built for modern teams…*" (Linear)
+- **"X can Y" rotation:** "IT Ops *can*… Sales *can*… You *can*…" (n8n)
+- **Anti-consultancy bluntness:** "No 6-month strategy work. No 200-slide presentations." (Tenex)
+- **Menu descriptors:** "Radar: Fraud prevention" (Stripe), "Enrichment: Auto-enrich every record" (Attio)
+- **Honest disclaimers:** "Illustrative examples… We publish real case studies only with written approval." (WinTech)
+- **Promise lines with a guarantee:** "If the audit finds nothing worth automating, we tell you that and part friends." (WinTech's best line)
+- **Maker voice:** first person, warm, specific ("Hand poured in Chicago", "foraged by the Sea Wych herself")
+- **Microcopy under CTAs:** "No credit card required" (Cal.com) · "No contract · Same-week availability · In-person in Corona, CA"
+- **Named clubs and collections:** see 4.1
+
+## 7.2 Rules
+- Write from the user's side: name things by what people recognise ("notifications", not "webhook config").
+- Specific > clever. Numbers, places, timeframes, names.
+- Active voice. Buttons say exactly what happens ("Book a free AI audit", "Add to basket").
+- One idea per sentence. Short paragraphs (2–3 lines on the web).
+- Open each section with an **answer sentence** an AI assistant could quote ("WinTechnology is an AI automation, SEO and web development company in Corona, California that…").
+- **Avoid:** "leverage", "seamless", "cutting-edge", "unlock", "revolutionize", "solutions" as a noun on its own, "Results-Driven"-style labels, and lorem ipsum anywhere.
+- **Never invent** numbers, quotes, reviews or client names. Use `[NEEDS CLIENT: …]` placeholders.
+
+---
+
+# Part 8: Trust, proof and conversion
+
+## 8.1 Proof hierarchy (strongest first)
+1. Named customer + specific metric + products used (Stripe, Clay, Retool)
+2. Long specific testimonial with name and role (Fractional AI)
+3. Ratings with counts and sources (Cal.com hero badges; Mythologie's "5,000+ Five-Star Tales"; Goth Candles' 4.90★)
+4. Logos (customers, or tools if you have no customers)
+5. Scale stats with context (Stripe, "since 2003")
+6. Years in business, founder face, physical location (WinTech Corona, CA; maker workshops)
+7. Promises and guarantees (audit promise; "made-to-order times you can see")
+8. Compliance badges (SOC 2, GDPR: Zapier's security strip; Vercel footer)
+
+## 8.2 Conversion patterns
+- **One primary CTA label, everywhere.**
+- **Offer a deliverable, not a call:** "a map of how work flows · top 3 automations ranked by payback · hours back per month · a written summary you keep".
+- **Show the deliverable** as a mockup (bento report preview).
+- **Reduce form friction:** inline calendar booking (Cal.com), 4 fields maximum, "Prefer to write?" fallback.
+- **Repeat proof at the decision point:** stats beside forms (Vercel), reviews beside Add to basket.
+- **Scarcity only when true:** live stock badges ("Only 2 left"), "Leaving soon".
+- **Make expectations visible before checkout:** turnaround, proofs, returns policy for personalized goods.
+- **Engagement ladder for services:** Free audit → Project → Retainer → Fractional team, each card "Everything in X, plus:".
+
+---
+
+# Part 9: Technical quality, anti-patterns and checklists
+
+## 9.1 Technical standards
+- **Real text** for all headings. Letter animations go on an `aria-hidden` copy.
+- **Compiled CSS** (never the Tailwind Play CDN script in production; WinTech ran `cdn.tailwindcss.com` live).
+- **Content visible without JS** and without scroll triggers.
+- **Mockups in HTML/CSS/SVG,** not images or video, where possible.
+- **Images:** WebP/AVIF, hero under 300KB desktop / 180KB mobile, separate mobile crops, `loading="lazy"` below the fold.
+- **Performance:** Largest Contentful Paint (when the main image appears) under 2.5s on mobile; Lighthouse 90+.
+- **Schema:** Organization + LocalBusiness (with NAP), FAQPage, Product (shops), Article (blog).
+- **AI readability:** answer sentences, `llms.txt` (Distyl, n8n), clean heading hierarchy.
+- **Accessibility:**
+  - 4.5:1 contrast; visible focus states; keyboard-operable menus, tabs and accordions; Esc closes overlays.
+  - Alt text that describes the scene; `prefers-reduced-motion`.
+- **Forms:** one definition site-wide; clear error messages ("That email doesn't look quite right."); success states.
+- **Analytics:** fine (GA4, GTM, Clarity), but keep scripts lean.
+
+## 9.2 Anti-patterns we've actually found
+
+| Anti-pattern | Where we saw it | Fix |
+|---|---|---|
+| Copy lifted from a famous site | WinTech (Stripe wording, 4 blocks) | Rewrite in your own words; borrow structure only |
+| H1 split into single letters | WinTech hero and /services | Real text + aria-hidden animation |
+| Best asset hidden (`display:none`), broken photo | WinTech founder section | Ship it, or remove it |
+| Content invisible until scroll animation | WinTech | Animate from visible |
+| Headline with no content under it | WinTech "Choose an engagement model" | Build the section or delete it |
+| Same section twice | WinTech pillars ×2 | Merge |
+| Generic triple ("Dual Expertise / AI-First / Results-Driven") | WinTech | Specific proof |
+| Unsourced stats ("3x faster, 40% cost reduction") | WinTech /services | Context or source |
+| 3 fonts, 4 heading styles, leftover template colours | WinTech | One system |
+| 12 CTAs, 6 labels | WinTech | One label |
+| Two different contact forms | WinTech | One form |
+| Contact email on another domain | WinTech | Use the main domain |
+| Tailwind CDN in production | WinTech | Build step |
+| Stock "AI" imagery | WinTech | UI mockups or real photos |
+| Placeholder menu copy left live | Clay | Fill or remove |
+| Neon Halloween palette, clip-art bats, slime | Cheap gothic templates | Warm blacks, one metallic accent |
+| Mass skulls and gore | Darkothica, Killstar | Handmade story, restraint |
+| Spooky fonts for body or menu text | Cheap templates | Decorative fonts for one word at most |
+| Halloween all year | Many shops | Wheel of the year |
+| Hidden made-to-order times | Many shops | Show them next to the price |
+| Pop-ups blocking the page on load | Mythic Wick, Bethany Lowe, many Shopify stores | Delay, or show only on exit/scroll |
+
+## 9.3 Pre-design checklist
+- [ ] One-sentence job of the site and of each page
+- [ ] Audience and their top 5 questions
+- [ ] Primary CTA label chosen
+- [ ] Proof inventory: what's real (numbers, quotes, logos, photos)? Mark gaps `[NEEDS]`
+- [ ] Dark, light or hybrid chosen deliberately
+- [ ] Reference set: 2–3 references per section (Part 10)
+- [ ] Tokens drafted: colours (≤ 1 accent), 2 typefaces, scale, spacing, radius
+
+## 9.4 Pre-launch checklist
+- [ ] Headings are real text; one H1 per page
+- [ ] Everything visible with JS off and reduced motion on
+- [ ] Mobile checked on a real phone (no sideways scroll, readable type, thumb-reachable CTAs)
+- [ ] LCP under 2.5s on mobile; images optimised
+- [ ] All CTAs use the same label and go to the same place
+- [ ] No placeholder text, no lorem, no `[NEEDS]` left
+- [ ] No copied copy (search distinctive sentences on Google)
+- [ ] Schema validates (Rich Results Test); `llms.txt` present
+- [ ] Forms send, show success, and land in the right inbox or CRM
+- [ ] Keyboard pass: menu, tabs, accordions, dialogs, focus states
+- [ ] Contrast pass
+- [ ] Analytics firing, cookie banner (decline-friendly) where required
+- [ ] Shops: a test order of each product type (incl. personalization text on the packing slip), sync test, POS offline test
+
+---
+
+# Part 10: Reference library
+
+## 10.1 SaaS, product and services sites (studied in depth)
+
+| Site | URL | Best for | Notes |
+|---|---|---|---|
+| Linear | https://linear.app | Hero (full fake app), Fig cards, logo marquee, quote cards, changelog, footer | Dark #08090a, Inter Variable; "A new species of product tool." |
+| Linear Customers | https://linear.app/customers | Story grid + filter chips + stat triplet | "Your company: Make the switch" card |
+| Linear Pricing | https://linear.app/pricing | Pricing columns + comparison table | NumberFlow digits; "Trusted by more than 40,000 companies" |
+| Linear Contact | https://linear.app/contact/sales | Sparse sales page | Separate support path |
+| Stripe | https://stripe.com | Mega-menu, bento with UI, stories, stats band, integration diagram | Söhne; story line hero; pastel wave gradients |
+| Stripe Customers | https://stripe.com/customers | Live-sales bar | "8 sales reps available" |
+| Attio | https://attio.com | Hero product window, menu grouping, feature tabs, workflow nodes, kanban, "whole stack" band | Has `prefers-reduced-motion` |
+| Attio Pricing | https://attio.com/pricing | Toggle + "Popular" + descriptors | "From zero to IPO." |
+| Vercel | https://vercel.com | Clause-stack hero, huge directory footer | Geist; light/dark by system |
+| Vercel Contact Sales | https://vercel.com/contact/sales | Proof-beside-form | Customer metrics column |
+| Vercel Pricing | https://vercel.com/pricing | Reassurance callouts | "No idle, no waste" |
+| Resend | https://resend.com | Code tabs, event streams, blunt FAQ | Domaine + Inter, black |
+| Resend Pricing | https://resend.com/pricing | Honest one-line FAQ answers | — |
+| Cal.com | https://cal.com | Booking-widget hero, 3 steps, wall of love, FAQ | Cal Sans; ratings in hero |
+| Cal.com Embed | https://cal.com/embed | Inline, popup and floating booking | — |
+| Zapier | https://zapier.com | Menu by team/app/use case, Fluid Determinism slider, serif quote, dark CTA, A–Z footer | Cream + orange |
+| n8n | https://n8n.io | "X can Y" line, workflow canvas, proof row, final CTA | Dark + orange glow; Geomanist |
+| n8n Integrations | https://n8n.io/integrations | Integration directory | HITL category; `llms.txt` |
+| Raycast | https://www.raycast.com | Avatar-grid testimonials | "Take the short way" |
+| Clay | https://www.clay.com | Pillars with customer metrics | Cautionary: placeholder menu copy |
+| Retool | https://retool.com | Outcome-first stories | "$8M and 20,000+ hours saved" |
+| Framer | https://framer.com | Footer, logo carousel | — |
+| Notion | https://notion.com | General product marketing | Studied via summary only |
+| Tenex | https://tenex.co | Mood hero, anti-consultancy tone | Black + yellow, statues |
+| Tribe AI | https://www.tribe.ai | Map / Build / Activate process | Character-split reveal |
+| Distyl | https://distyl.ai | Manifesto, `llms.txt` | Word-split reveal |
+| Fractional AI | https://www.fractional.ai | Long specific testimonials | Banner: "now Ode with Anthropic" |
+| Switchyard | (on vibrant.design) | Hub-and-spoke hero | "Every agent. Every tool. One door." |
+| ElevenLabs | https://elevenlabs.io | Try-it hero, repeated product module, logo-to-story grid, research timeline, safety trio, floating widget | Waldenburg + Inter + Geist Mono; #FCFCFC / #F4F3F1, black pills; full study in Part 12 |
+
+## 10.2 vibrant.design: curated section library
+Browse by section at https://vibrant.design/sections/{hero, features, bento, pricing, cta, logo-cloud, testimonials, faq, footer, how-it-works, integrations, stats, blogs, changelog, careers, docs, login-and-signup, 404}
+
+| Section | Entry | Link | What's great |
+|---|---|---|---|
+| Hero | Devin AI | https://vibrant.design/website/c7qm6ik-devin-ai-s-hero-section | Light, bold type, live product demo |
+| Hero | Gumloop | https://vibrant.design/website/u3v2ccy-gumloop-s-hero-section | Headline above a detailed dashboard |
+| Hero | Cofounder | https://vibrant.design/website/80g9vjk-cofounder-s-hero-section | Pixel-art landscape + floating task cards |
+| Hero | Giga | https://vibrant.design/website/hw36cuj-giga-s-hero-section | Dot-matrix typing headline + glowing graph |
+| Hero | Equals | https://vibrant.design/website/pf4nyrc-equal-s-hero-section | Big serif on cream, logo grid |
+| Hero | Medusa | https://vibrant.design/website/indudmd-medusa-s-hero-section | Tabs with code and dashboard previews |
+| Hero | Griffin | https://vibrant.design/website/yovgmpb-griffin-the-bank-you-can-build-on | Logo grid reveals testimonial cards |
+| Hero | Cloudflare Startups | https://vibrant.design/website/b9owrkn-cloudflare-startups-hero-section | Orbiting badges on dotted paths |
+| Hero | Foglamp | https://vibrant.design/website/2ynra7m-foglamp-s-hero-section | Dark fade-in |
+| Hero | Arcade | https://vibrant.design/website/nje3aoa-arcade-s-hero-section | Video background |
+| Features | Gumloop | https://vibrant.design/website/chf53gf-gumloop-build-ai-agents-for-work | Vertical tabs swapping agent mockups |
+| Features | Resurf | https://vibrant.design/website/14z2f1a-resurf-s-feature-section | Minimal tabs, refined micro-interactions |
+| Features | Agentwork | https://vibrant.design/website/xn5dt91-agentwork-s-feature-section | Clean animated steps |
+| Features | Skydive | https://vibrant.design/website/cks556o-skydive-s-feature-section | Playful agent animation |
+| Features | Mobbin | https://vibrant.design/website/s0x2m91-mobbin-s-showcase-section | Tabbed phone-mockup carousel |
+| Bento | Stripe | https://vibrant.design/website/67v7a8g-stripe-s-bento-grid | White cards, pastel gradients, hover |
+| Bento | Resurf | https://vibrant.design/website/azzrrce-resurf-s-bento-grid | Serif + warm off-white + minimal mockups |
+| Bento | Agentwork | https://vibrant.design/website/taltt8n-agentwork-s-bento-grid | Synced line animations |
+| Bento | Clerk | https://vibrant.design/website/fcco7w4-clerk-s-bento-grid | Dark, looping micro-animations |
+| How it works | Cofounder | https://vibrant.design/website/okpwbm7-cofounder-s-how-it-works-section | Split layout, expanding steps, cream |
+| Integrations | Mobbin | https://vibrant.design/website/h8b7i90-mobbin-s-integrations-section | Icon ring around a big number |
+| Integrations / CTA | Skydive | https://vibrant.design/website/zphtbq4-skydive-s-cta-section | Integration ring + CTA card |
+| Logo cloud | Devin | https://vibrant.design/website/13543ty-devin-ai-s-logo-cloud | Hover reveals project image |
+| Logo cloud | Framer | https://vibrant.design/website/am10beg-framer-s-logo-cloud | Carousel with image reveals |
+| Stats | Cloudflare | https://vibrant.design/website/vjj6t68-cloudflare-s-stats-section | Chaos vs calm split |
+| Testimonials | Glide | https://vibrant.design/website/k7u6usn-glide-s-testimonials-section | Expanding image cards |
+| Testimonials | Mintlify | https://vibrant.design/website/9dry6si-mintlify-s-testimonials-section | Six muted cards |
+| Pricing | Foglamp | https://vibrant.design/website/hoj8obc-foglamp-s-pricing | Dark tiers, amber "Popular" |
+| Pricing | Stripe | https://vibrant.design/website/dwxceqe-stripe-s-pricing-section | Standard vs custom |
+| FAQ | Foglamp | https://vibrant.design/website/2rvarpi-foglamp-s-faq-section | Type your own question |
+| CTA | Calendly | https://vibrant.design/website/0gdgrxh-calendly-s-cta | People-first, colourful |
+| Footer | Skydive | https://vibrant.design/website/zggdkp6-skydive-s-footer | Oversized wordmark |
+| Footer | Framer | https://vibrant.design/website/4y39xd3-framer-s-footer | Multi-column, status, "New" badges |
+| Footer | Equals | https://vibrant.design/website/czx8m7r-equal-s-footer-section | Giant cropped wordmark, editorial |
+| Blog | Axiom | https://vibrant.design/website/w9n3w8y-axiom-s-blog-page | Dark grid, category nav |
+| Website | Stripe Press | https://vibrant.design/website/ul5v6zv-press-stripe-com | Objects shown like books on a shelf |
+| Website | Curated Supply | https://vibrant.design/website/39l2ltz-www-curated-supply | Gallery-like curated products |
+| Micro | Grainy card | https://vibrant.design/feed/59are8x-grainy-ace-of-diamonds-card | Tarot-style product card idea |
+| Micro | Peel sticker | https://vibrant.design/feed/8v5jq03-prism-peel-sticker-effect | Reveal / discount moment |
+| Micro | Postage folder | https://vibrant.design/feed/knvjyj6-japanese-postage-folder-animation | Order or stationery moment |
+| Micro | Cinematic calendar booking | https://vibrant.design/feed/hsr5pxf-cinematic-calendar-booking-page | Booking page idea |
+
+## 10.3 Maker, gothic and botanical shops
+
+| Shop | URL | Best for |
+|---|---|---|
+| Wolf Wytch | https://wolfwytch.com/ | Folklore collections, artist spotlight, "Join Our Coven", testimonials |
+| The Blackened Teeth | https://www.theblackenedteeth.com/ | Candlelit hero, Meet the Team, Shop the Look, Collectors Chamber, Dark Library |
+| Mythologie Candles | https://mythologiecandles.com/ | "Start Here", scent quiz, seasonal hero, The Guild, comparison table |
+| Hex and Wax Candle Co. | https://hexandwaxcandle.com/ | Mood-named collections, "100% Human Created", book club (blocks some regions) |
+| Witch City Wicks | https://witchcitywicks.com/ | Story-world collections, shop address high, subscription box |
+| HausWitch | https://hauswitchstore.com/ | Mission, community offers, events nav |
+| Thorn & Moon | https://thornandmoon.com/ | Curated brand roster, events and classes pages |
+| The Gilded Witch | https://www.gildedwitch.com/ | Nav by type and theme |
+| Lady Moon Co. | https://ladymoon.co/ | Shop by archetype, "no spam, just spells!", product page |
+| Sea Witch Botanicals | https://seawitchbotanicals.com/ | Seasonal campaign, values pillars, bundles, blog |
+| Witch Baby Soap | https://www.witchbabysoap.com/ | Turnaround shown up front, Spell Box |
+| Goth Candles | https://gothcandles.com/ | Review score on homepage, mystery box |
+| The Sea Wych | https://www.theseawych.com/ | "Meet the Sea Wych", handmade + sourced explained, workshops |
+| Toadstool Farm Vintage | https://www.toadstoolfarmvintage.com/ | Handmade + curated doors, Misfit's Tale, Misfit's Club |
+| Wax Apothecary | https://waxapothecary.com/ | Collection tiles, wax-seal footer, dried-flora styling |
+| Frostbeard Studio | https://frostbeardstudio.com/ | Navigation by scent strength, press logos |
+| Lunar Moth Jewellery | https://www.lunarmothjewellery.com/ | Bespoke, sizer, gift wrap, "limited piece" |
+| Alchemy of England | https://alchemyofengland.com/ | Heritage line, "Stories from the artroom" |
+| Haunt | https://www.hauntcult.com/ | Made-to-order product page, enquiry flow, Shop the Look |
+| Bethany Lowe Designs | https://www.bethanylowedesigns.com/ | Themed Halloween groups, designer story |
+| Johanna Parker Design | https://www.johannaparkerdesign.com/ | Hand-drawn folk Halloween |
+| JJ Potts the Store | https://jjpottsstore.com/ | Process GIFs, short origin story |
+| Mythic Wick (events) | https://www.mythicwick.com/events | Best events page |
+| Witch's Mark | https://www.witchsmark.ca/pages/upcoming-markets | Simple markets list |
+| The Crafty Mystic | https://www.thecraftymysticcandles.com/upcoming-events | Market banner cards |
+| Trudon | https://trudon.com/ | Heritage luxury restraint |
+| Astier de Villatte | https://www.astierdevillatte.com/ | Atelier storytelling |
+| East Fork | https://eastfork.com/ | Founder story, shop by colour, journal |
+| Crown & Paw | https://www.crownandpaw.com/ | Made-to-order step flow (blocks automated capture) |
+| Bloomist | https://bloomist.com/ | Maker collaborations, dried botanicals |
+| Little Words Project | https://littlewordsproject.com/ | "Create Your Own" entry |
+| Artifact Uprising | https://www.artifactuprising.com/ | DIY vs "we design it" |
+| Evermore London | https://evermorelondon.com/ | Dark/light toggle |
+| Diptyque | https://www.diptyqueparis.com/ | Build-your-own gift set |
+| Anima Mundi | https://animamundiherbals.com/ | Founder story + herbalist chat |
+| Wooden Spoon Herbs | https://woodenspoonherbs.com/ | Founder story |
+
+**Cautionary examples:** Darkothica (https://www.darkothica.com/) and Killstar (https://www.killstar.com/) show the mass-merch gothic look to avoid for handmade brands.
+
+## 10.4 Galleries and tools
+- **vibrant.design:** sections, websites, feed, launch videos, moodboards. https://vibrant.design
+- **Other galleries to search:** Godly, Land-book, Awwwards, SiteInspire, Httpster, Mobbin (app UI). These turned up mostly listicles in our searches, so go to the galleries directly.
+
+---
+
+# Part 11: Our process
+
+## 11.1 Research workflow
+1. **Audit the current site.**
+   - Read the page text and inventory every section, with a verdict for each: keep / rework / cut / move.
+   - Check the DOM: fonts, heading sizes, colours in use, CTA count, hidden sections, broken images, scripts (e.g. Tailwind CDN), schema, meta tags.
+   - Look for copy borrowed from big sites.
+2. **Map sections to vibrant.design categories,** and pull 2–5 entries per section, with their descriptions and preview media.
+3. **Study 10–20 live reference sites,** tagged by section, for the patterns in Parts 3–4.
+4. **Capture screenshots** at 1440×900, one frame per screen:
+   - Use headless Edge or Chrome over the DevTools protocol with a throwaway profile.
+   - Scroll the page once first to trigger lazy content.
+   - Hide cookie and newsletter pop-ups.
+   - Retry slow sites with a longer wait.
+   - Some sites block automation or regions (Hex and Wax, Crown & Paw, Bloomist); link those instead.
+5. **Make contact sheets** (3×3 thumbnails per site) to choose frames quickly.
+6. **Build a visual board:** sections in page order, each with "Now" (current site), the idea or plan, and the inspiration screenshots with captions and links. Click to enlarge.
+7. **Write the plan** in the template below. Publish it with the screenshots inline. Give Notion a Markdown + images zip.
+
+## 11.2 Section plan template (the format that worked)
+```
+### [n] Section name
+*Why it's here: one sentence on the visitor's question it answers.*
+**What we're borrowing.** Reference A (what exactly), Reference B (what exactly).
+[screenshots]
+[layout sketch: desktop wireframe in text]
+- Design: 3–6 points (layout, type, colour, imagery, hover/motion)
+- Copy: headline, sub, buttons, microcopy (real words, not placeholders)
+- Mobile: one line
+- Build: one line (platform-specific)
+```
+**Tone of plans:** a working draft that's open to change (nothing "locked" until the client agrees); to the point; screenshots next to every section; `[NEEDS]` for anything that must come from the client.
+
+## 11.3 Handing off
+- **Notion:** import a `.zip` of Markdown + `img/` folder (Import → Text & Markdown), or use Notion AI prompts to build a "sections" database (columns: Order, Section, Look like, Also borrow from, Background, Status, Priority, Owner, Needs from client).
+- **Visual boards** stay as published pages; link them from the Notion doc.
+- **Client content checklist:** collect every `[NEEDS]` item into one list or database.
+
+---
+
+# Part 12: Site studies
+
+Deep dives into single sites worth studying end to end. Each covers: why it's good, the system underneath, every section in order, and what to steal.
+
+## 12.1 ElevenLabs: https://elevenlabs.io
+*Studied Oct 4, 2026: live capture at 1440×900 (13 screens), page HTML, colours sampled from screenshots.*
+
+### Why it's great
+It's an AI audio company, and its homepage lets you **hear the product before you read about it.** Everything else is calm and monochrome, so the product moments (gradient voice orbs, live demos, research art) carry all the colour and attention. Then one module template repeats for each product line, so a huge offering (3 platforms, about 20 products) still feels simple.
+
+### The system underneath
+| Element | What they do |
+|---|---|
+| **Colour** | Near-white page **#FCFCFC**, warm light-grey panels **#F4F3F1**, black text, **black pill buttons (#000)**. No brand accent colour in the UI; colour lives only in imagery (grainy gradient orbs, gradient blog art). |
+| **Type** | Custom display face **Waldenburg** for headlines, set in a regular weight (not bold) at a large size. **Inter** for body, **Geist Mono** for code. Fallback fonts are size-matched (via Next.js font loading) so nothing jumps when fonts load. |
+| **Shape** | Big rounded panels (about 24px radius) in #F4F3F1; pill buttons and tabs; small rounded-square icon chips. |
+| **Frame** | **1px #EFEFEF vertical rules** run down both edges of the content column (about 1176px apart), like a drafting sheet. It's subtle structure that makes the page feel engineered. |
+| **Texture** | **Grainy gradients** (noise over soft colour fields) on orbs, tiles and blog images. They read organic and "audio-like", not glossy. |
+| **Buttons** | Primary: black pill, white text ("Sign up"). Secondary: white pill with a hairline border ("Contact sales", "Learn more", "Read all stories"). |
+| **Tech** | Next.js; `prefers-reduced-motion` present; 2 canvas elements; no `<video>` tags on the homepage (the demos are built UI). |
+
+### Section by section
+1. **Announcement bar** (warm grey): a gradient "V4" logotype, then bold "Meet Eleven v4, our most emotive model yet." followed by grey "With 3x credits included on Creator+ until October 12", then a "Discover" pill. This is the bold + grey continuation pattern again, plus a deadline.
+2. **Nav:** minimal. The wordmark, a few text links (Customers / Enterprise / Pricing visible at 1440px), then "Log in" (ghost pill) and "Sign up" (black pill). On scroll it collapses to the wordmark + "Contact sales" + "Sign up".
+3. **Hero, split statement:**
+   - H1 left over two lines: **"Bringing technology to life"**, with Sign up + Contact sales pills under it.
+   - Right column: one paragraph naming the three platforms ("From ElevenAgents for customer experience, ElevenCreative for content creation, to the leading AI voice generator.").
+4. **Try-it showcase** (inside the hero):
+   - A large #F4F3F1 panel with a **segmented tab bar** (ElevenCreative · ElevenAgents · ElevenAPI, each with a coloured dot).
+   - Inside: a **carousel of grainy gradient orbs**, one per voice style (Characters / Narration / Conversational / Advertisement / Social Media). The centre orb is large with a **play button**; side orbs shrink and fade; arrows step through.
+   - A second tab row underneath: AI Voice Generator / Text to Speech / Music / Speech to Text / Voice Cloning / Dubbing.
+5. **Logo grid:**
+   - "Trusted by leading developers and enterprises" + a "Read all stories" pill.
+   - A 3×7 grid of monochrome logos in hairline cells. Some logos link straight to their story ("Stripe is now an ElevenLabs customer", "Epic games uses ElevenLabs"), so **logos are doors to case studies.**
+6. **Platform split:** "Two platforms built on the same research foundation", two short columns (ElevenCreative / ElevenAgents), each with one line.
+7. **Product module** (repeated for Creative, Agents and API; this is the core of the page):
+   - eyebrow (product name) → H2 left + paragraph right → black "Learn more" pill
+   - → a **large real product screenshot** in a rounded panel
+   - → a **bento**: one wide tile on a grainy gradient holding a live editor mock ("All-in-one AI editor"), plus one tile with an **interactive demo**
+   - → **4 small feature cards** (icon chip, grey label, black description)
+   - → a **customer strip** (3 logo chips + "NVIDIA: Using synthetic voice technology to power multilingual marketing content" + a "Get started" pill)
+8. **Creative demo:** text-to-speech in a white card. The story text carries **emotion tags in grey brackets**, "[sarcastically] … [giggles] … [whispers]", with language and voice dropdowns (English · Spuds Oxley) and a black **Play** button. It shows exactly what the product can do, in place.
+9. **Agents demo:**
+   - Chat bubbles on a grainy gradient: "Can I get a refund?" → "Sure. Can you share your order number please?" → "It's EL4543490" → "I have initiated the order refund process." → a **"Refund completed"** pill.
+   - Beside it, an analytics card: "Resolution Rate 83.4%" with V1/V2 lines (87.37% vs 61.71%).
+   - Then cards for Testing / Guardrails / Workflows.
+10. **API module:**
+    - Left: a model list with one-line specs ("Eleven Flash: 75ms latency for conversational use cases", "Eleven Scribe: 98% accuracy").
+    - Right: a code panel with syntax highlighting (`client.textToSpeech.convert(…)`).
+    - Plus a benchmark illustration with diagonal labels.
+11. **Impact showcase:** "Showcasing the global impact of AI audio research", with a Creative/Agents toggle over a masonry of image cards (NVIDIA at Computex, Matthew McConaughey, a $1B in-kind donation). Press and impact used as proof.
+12. **Research timeline:**
+    - "Research that redefines human technology interaction" + a vision paragraph.
+    - A **ruler-style tick-mark scrubber** with arrows. The selected release shows its name ("Eleven v4"), one line, and its date (Sep 2026).
+    - Below: the latest research cards with grainy gradients, a wavy line pattern and date pills.
+    - **A domain-native control: the timeline looks like an audio track.**
+13. **Safety, built in:** three cards with **fine-line 3D wireframe drawings** (cone, cube, concentric rings): Moderation / Accountability / Provenance. Each has a belief sentence ("We believe misuse must have consequences.").
+14. **Latest updates:** three blog cards with gradient art and the title set *on* the image, plus category and date. "All posts" pill.
+15. **Final CTA:** quiet. "AI Communication Platform" on the left; "Talk to sales" + "Create an AI agent" pills on the right. No giant banner.
+16. **Footer:** light; columns by platform (ElevenCreative / ElevenAgents / ElevenAPI), then Resources / Socials / Company; a language selector under the wordmark.
+17. **Floating "Voice chat" pill** (bottom right, with a mini orb), present the whole way down. **The product is the support widget.**
+
+### What to steal
+1. **Let visitors experience the product in the hero**: play, try, type. *WinTech:* type a task ("chase unpaid invoices") and watch the automation steps appear. *Shops:* a hover or tap that shows the piece in candlelight, or a "hear the story" audio note from the maker.
+2. **Design one product module and repeat it.** The same order every time (eyebrow → H2 + paragraph → screenshot → bento with a live demo → 4 feature cards → customer strip) makes a big offering feel simple. *WinTech:* use it for the three pillars.
+3. **Monochrome UI, colour only in media.** It lets imagery and demos carry the brand. Pairs well with one signature texture (theirs: grainy gradients).
+4. **Show capabilities inside the demo text itself.** The [whispers] tags teach the feature without a feature list.
+5. **Logos that link to stories.**
+6. **A domain-native control** (the audio-ruler timeline). Find your subject's own metaphor: a moon-phase calendar for a witchy shop, a workflow track for an automation agency.
+7. **Values as belief sentences with line art** ("Safety, built in"), not icon soup.
+8. **Dogfood the floating widget.** WinTech's own AI agent as the chat bubble is the best demo they could give.
+9. **Drafting-frame hairlines** on the content column: almost invisible, but they make the layout feel precise.
+10. **A quiet final CTA.** A confident brand doesn't need a shouting banner at the end.
+
+### Watch-outs
+- The page is long (about 10,800px at 1440 wide). It works because the module repeats; without a repeated structure, that length would be tiring.
+- Regular-weight display headlines need a well-drawn typeface and generous size. With a weak font they look timid.
+- Much of the polish comes from a custom typeface and real product UI. With neither, lean harder on photography and a single strong texture.