saglitzdesign-mcp 0.3.1

package/knowledge/patterns/web/pricing-sections.md

@@ -0,0 +1,122 @@
+---
+id: web-pricing-sections
+title: "Website Pricing Section Patterns"
+category: pattern
+platform: web
+tags: [pricing, plans, comparison, conversion]
+sources:
+  - "https://mobbin.com/sites/sections/5125964c-8b12-49cc-b037-8e052fc553f9"
+  - "https://mobbin.com/sites/sections/af28a0bd-bca7-461c-881b-23e85ec3c674"
+  - "https://mobbin.com/sites/sections/7506bd76-c42f-431d-8478-8f477d4ba895"
+  - "https://mobbin.com/sites/sections/8fb5fbc1-d28e-4109-a136-08a08db99d2f"
+  - "https://mobbin.com/sites/sections/d845ba92-3fe4-4968-9a69-d5ae6e0a4237"
+  - "https://mobbin.com/sites/sections/1c1738fa-6ce1-47e6-b749-8d52442dba8d"
+  - "https://mobbin.com/sites/sections/13aa6320-cc57-4952-916c-95b0a74300c0"
+updated: 2026-07-08
+---
+
+# Website Pricing Section Patterns
+
+Derived from Mobbin section screenshots of Clerk, Chronicle, Framer, Qatalog,
+Equals, Maze, and Sprig (July 2026 research pass).
+
+## Observed patterns
+
+### 1. Three-column card grid is the default
+[Chronicle](https://mobbin.com/sites/sections/af28a0bd-bca7-461c-881b-23e85ec3c674)
+(Free $0 / Pro $15 / Team $30),
+[Maze](https://mobbin.com/sites/sections/1c1738fa-6ce1-47e6-b749-8d52442dba8d)
+(Free / paid / Professional+), and
+[Sprig](https://mobbin.com/sites/sections/13aa6320-cc57-4952-916c-95b0a74300c0)
+(Free / Starter / Enterprise) all use three equal-width cards with identical
+internal structure: plan name → price → feature checklist → CTA. Equal card
+heights and aligned baselines make scanning horizontal.
+
+### 2. Two-plan split when the sell is simple
+[Qatalog](https://mobbin.com/sites/sections/8fb5fbc1-d28e-4109-a136-08a08db99d2f)
+shows just Pro ($15/mo per user, blue "Start your trial" button) and
+Enterprise (no price, black "Book a demo" button), each with a one-line
+persona description ("For scaling teams…", "For established organizations…")
+and an "Includes Pro, plus:" delta list. Enterprise cards consistently swap
+price for "Book a demo".
+
+### 3. The recommended-plan highlight
+[Chronicle](https://mobbin.com/sites/sections/af28a0bd-bca7-461c-881b-23e85ec3c674)
+tags Pro with a "Popular" badge and gives only that card a filled white
+button (others get outlined buttons) — on a dark theme this single inversion
+is enough to steer choice.
+[Framer](https://mobbin.com/sites/sections/7506bd76-c42f-431d-8478-8f477d4ba895)
+color-codes each tier's CTA (blue → purple → black) and renders the entry
+plan as a fully saturated purple gradient card.
+[Qatalog](https://mobbin.com/sites/sections/8fb5fbc1-d28e-4109-a136-08a08db99d2f)
+pins a "14 days free trial" badge on the recommended plan.
+
+### 4. Delta feature lists ("Everything in X, plus…")
+Chronicle ("Everything in Free, plus:"), Maze ("All Free features, plus:",
+"All Professional features, plus:"), Sprig ("Everything in Free, plus",
+"Everything in Starter, plus") and Qatalog ("Includes Pro, plus:") all avoid
+repeating shared features. Checkmark bullets, 5–8 items per card, grouped
+under small-caps or bold section labels when lists get long
+([Equals](https://mobbin.com/sites/sections/d845ba92-3fe4-4968-9a69-d5ae6e0a4237)
+groups by "Queries", "Connectors" with per-group check/cross marks, using a
+monospace face that matches its spreadsheet product).
+
+### 5. Price typography and billing toggle
+Price is the largest element on the card: Chronicle and
+[Clerk](https://mobbin.com/sites/sections/5125964c-8b12-49cc-b037-8e052fc553f9)
+set "$0"/"$25" in display size with "per month"/"per user / month" in small
+muted text beside it. Chronicle adds a "Pay annually (save 20%)" toggle above
+the grid. Clerk leads the whole section with a value headline ("Pricing that
+scales with you") plus a generosity line ("10,000 monthly active users free")
+before any cards, and sells add-ons as separate priced line items
+("Enhanced authentication add-on — $100/mo").
+
+### 6. Escape hatches below the grid
+Maze closes with a centered outlined "Compare all features" button linking to
+the full matrix; Framer follows the card grid with a separate "Business Plan"
+band for larger organizations; Equals ends each column with its own CTA
+("Get started" ×2, "Request a demo" for the top tier). Sprig differentiates
+CTA labels per tier: "Create Account" / "Start Free Trial" / "Book a Demo".
+
+## Design rules derived
+
+**Do**
+- Default to 2–4 plans in equal-width cards; three is the sweet spot.
+- Make price the dominant element; qualify it with a small unit label
+  ("per user / month") and an annual-discount toggle where relevant.
+- Highlight exactly one plan via badge + button treatment (filled vs
+  outlined); leave the rest visually quiet.
+- Write feature lists as deltas from the tier below; cap visible items at
+  ~8 and group with labels beyond that.
+- Give each tier a one-line "recommended for" persona sentence.
+- Match CTA label to the tier's motion: self-serve tiers get "Try/Start
+  free", enterprise gets "Book a demo" with no listed price.
+- Offer a "Compare all features" link rather than showing the full matrix
+  inline.
+- Repeat the CTA at both top and bottom of tall cards (Sprig puts buttons
+  at top; Equals at bottom of long lists — either works, be consistent).
+
+**Don't**
+- Don't highlight multiple plans or use equal-strength buttons everywhere —
+  the user loses the default choice.
+- Don't repeat identical features across all columns; use "Everything in X,
+  plus".
+- Don't hide the free tier's $0 price — top sites display it as proudly as
+  paid prices.
+- Don't mix billing periods across cards without a toggle clarifying which
+  is shown.
+
+## Anti-patterns
+
+- **Wall-of-matrix pricing**: leading with a 40-row comparison table instead
+  of cards. Equals shows long lists can work, but only with grouping, and
+  Maze explicitly demotes the matrix behind a "Compare all features" click.
+- **Priceless paid tiers**: hiding all numbers ("Contact us" on every plan)
+  kills self-serve scanning; observed sites hide price only on the single
+  enterprise tier.
+- **Badge inflation**: "Most popular" + "Best value" + "Recommended" on
+  different plans simultaneously — sampled sites use exactly one badge.
+- **Cross-marks as shaming**: long columns of ✗ on cheaper plans (Equals
+  grays them out instead, keeping the tone informative, not punitive).
+- **Inconsistent card anatomy**: shuffling the order of name/price/features
+  between columns breaks horizontal comparison scanning.

package/knowledge/patterns/web/social-proof-footer.md

@@ -0,0 +1,156 @@
+---
+id: web-social-proof-footer
+title: "Website Social Proof & Footer Patterns"
+category: pattern
+platform: web
+tags: [testimonials, social-proof, footer, newsletter, sitemap]
+sources:
+  - "https://mobbin.com/sites/sections/1a0904da-e870-48b5-bd03-18e75cbb8de3"
+  - "https://mobbin.com/sites/sections/15b459ef-ab1a-4648-8f36-940ab45d4731"
+  - "https://mobbin.com/sites/sections/02e3c65c-ed1d-42b0-9439-4c285f360e44"
+  - "https://mobbin.com/sites/sections/eed4c66c-5c16-4493-945c-0ce6610ce9d4"
+  - "https://mobbin.com/sites/sections/25b74d46-54e3-4564-9a7d-044360efd897"
+  - "https://mobbin.com/sites/sections/58a55724-34ad-4dc5-accb-743f3b00cd68"
+  - "https://mobbin.com/sites/sections/84369ba1-6d5b-4709-9bdc-0dbe58183c62"
+  - "https://mobbin.com/sites/sections/f1844604-7696-4970-b30e-43a7669e9ee1"
+  - "https://mobbin.com/sites/sections/6d088b40-a574-4e35-905c-bff022cfc5d5"
+  - "https://mobbin.com/sites/sections/c6e14a19-78bb-4396-9a3d-387d3f996980"
+  - "https://mobbin.com/sites/sections/dfd1f2e5-2a98-4621-95dd-3786d5b5d07b"
+  - "https://mobbin.com/sites/sections/5271842f-2780-414a-b9f6-aed741bbb222"
+  - "https://mobbin.com/sites/sections/572867f5-c7e0-47e1-bb03-d135047170ff"
+  - "https://mobbin.com/sites/sections/6efab40e-de5e-4dff-bf1c-b28c818a934d"
+updated: 2026-07-08
+---
+
+# Website Social Proof & Footer Patterns
+
+Derived from Mobbin section screenshots: testimonials from Klarna, Sprout
+Social, Mixpanel, Notion, Hims, Tines, and Intercom; footers from In Common
+With, Spade, SOTF, Bird, Lightship, Hims, and Employment Hero (July 2026).
+
+## Part A — Testimonials & social proof
+
+### Observed patterns
+
+**1. Third-party rating anchor + quote cards.**
+[Klarna](https://mobbin.com/sites/sections/1a0904da-e870-48b5-bd03-18e75cbb8de3)
+leads with a Trustpilot logo, star row and "4.0 | 370,674 reviews" beside the
+headline "Shoppers love Klarna", then shows two large colored quote cards
+(5-star row, quote, first name + date) with prev/next arrows.
+[Sprout Social](https://mobbin.com/sites/sections/15b459ef-ab1a-4648-8f36-940ab45d4731)
+anchors on the G2 logo: three white cards each with a bold pull-quote
+headline, star rating, excerpt, "Read more →" link, and an avatar + name +
+job title below the card. Naming the review platform (Trustpilot, G2)
+converts opinion into verifiable evidence.
+
+**2. Social-wall / masonry of real posts.**
+[Notion](https://mobbin.com/sites/sections/eed4c66c-5c16-4493-945c-0ce6610ce9d4)
+renders a masonry wall of genuine tweets — avatars, @handles, verified badges,
+inline product screenshots — deliberately uneven card heights signal "real,
+unedited". [Mixpanel](https://mobbin.com/sites/sections/02e3c65c-ed1d-42b0-9439-4c285f360e44)
+mixes tweet cards with anonymous NPS-survey quote cards in horizontally
+scrolling rows under a dark headline band ("Teams like yours are building
+from their product data").
+[Intercom](https://mobbin.com/sites/sections/84369ba1-6d5b-4709-9bdc-0dbe58183c62)
+tags each quote card with the source icon (G2, X/Twitter, LinkedIn) and the
+reviewer's company size ("Enterprise (>1000 emp.)").
+
+**3. Metrics-as-proof bento.**
+[Tines](https://mobbin.com/sites/sections/58a55724-34ad-4dc5-accb-743f3b00cd68)
+addresses skepticism head-on ("Sounds… hard to believe?" / "Don't take our
+word for it."), pairs a G2 badge ("200+ reviews on G2.com ★4.8") with a
+pastel bento of customer-logo cards mixing quotes with hard numbers
+("50% reduction in time spent per ticket" — KnowBe4; "10 hours of work time
+saved every day" — Snowflake).
+[Hims](https://mobbin.com/sites/sections/25b74d46-54e3-4564-9a7d-044360efd897)
+sandwiches a "2.4 million* active subscribers" stat card between two quote
+cards ("Out of 5 stars, I'd give Hims 6."), with an asterisked legal footnote
+below the grid.
+
+### Design rules derived — social proof
+
+- Anchor the section with an external, verifiable source (G2, Trustpilot,
+  App Store) — logo + aggregate score + review count.
+- Attribute every quote: name (or handle) + role/company or persona detail
+  ("Brandon, 44 — Real Hims customer"); anonymous quotes need a labeled
+  source ("NPS Score").
+- Mix formats: 1 stat + 2 quotes (Hims) or logos + metrics + quotes (Tines)
+  outperform a monotone row of identical quote cards.
+- Keep quotes short enough to read at a glance; bold a pull-quote headline
+  if the full quote is long (Sprout Social).
+- Use section headlines that assert the crowd ("Shoppers love Klarna",
+  "Teams like yours…", "See what customers are sharing on socials").
+- Footnote any hard numbers (Hims's asterisk pattern) for legal safety.
+
+### Anti-patterns — social proof
+
+- Unattributed or stock-photo testimonials; every sampled site uses real
+  names/handles or explicit anonymized sourcing.
+- Perfect uniform 5.0 ratings everywhere — Klarna shows 4.0, Sprout shows
+  4.5-star cards; imperfection reads as authentic.
+- Auto-rotating carousels with no manual controls (Klarna's uses explicit
+  arrows).
+- Burying proof below the footer; Eventbrite/Mixpanel place it adjacent to
+  feature or CTA sections where doubt peaks.
+
+## Part B — Footers
+
+### Observed patterns
+
+**1. Link-column sitemap + newsletter block.**
+[Bird](https://mobbin.com/sites/sections/dfd1f2e5-2a98-4621-95dd-3786d5b5d07b)
+stacks two tiers: product-family columns with colored icon bullets on top,
+then Resources/Company columns beside a "Newsletter" form; consent microcopy
+("You can unsubscribe anytime…") sits under the black Signup button.
+[Employment Hero](https://mobbin.com/sites/sections/6efab40e-de5e-4dff-bf1c-b28c818a934d)
+runs six columns (Company / Get in Touch / Support / Region / Product /
+Connect with social icons), then a subscribe row with explicit GDPR-style
+checkboxes, then a legal strip with a country selector.
+
+**2. Brand-forward minimal footer.**
+[Spade](https://mobbin.com/sites/sections/6d088b40-a574-4e35-905c-bff022cfc5d5)
+uses a dark green field, three small-caps-labeled link columns (USE CASES /
+INDUSTRIES / COMPANY) and a single newsletter input with an arrow button —
+legal links reduced to one bottom-right line.
+[SOTF](https://mobbin.com/sites/sections/c6e14a19-78bb-4396-9a3d-387d3f996980)
+turns the footer into brand art: giant watermark logotype filling the lower
+half, monospace all-caps micro-links above, payment-method icons in the
+legal strip. [Lightship](https://mobbin.com/sites/sections/5271842f-2780-414a-b9f6-aed741bbb222)
+centers its logomark, pairs a mission paragraph + newsletter (left) with
+product/company links (right), and ends with a slim copyright row.
+
+**3. Commerce/utility footer.**
+[In Common With](https://mobbin.com/sites/sections/f1844604-7696-4970-b30e-43a7669e9ee1)
+leads with contact info, showroom addresses and hours in the top row, then
+Shop/Info/Account columns beside the newsletter signup with privacy-policy
+microcopy. [Hims](https://mobbin.com/sites/sections/572867f5-c7e0-47e1-bb03-d135047170ff)
+(dark footer) leads with "Get the latest from Hims" email capture + social
+icons + app-download QR code, then Popular/Learn/Connect/Careers columns,
+then a dense legal strip (terms, privacy, sitemap, trademark line) with a
+LegitScript trust seal and a cross-brand card linking to forhers.com.
+
+### Design rules derived — footers
+
+- Structure: (1) fat footer — 3–6 labeled link columns + newsletter/contact
+  block; (2) thin legal strip — copyright, terms, privacy, locale.
+- Newsletter capture is one email field + one button, always with consent or
+  privacy microcopy directly beneath it.
+- Label columns by user intent (Shop, Support, Company, Resources), 4–8
+  links each; overflow goes to a dedicated sitemap page, not longer columns.
+- Put social icons and region/language selectors in the footer, not the nav.
+- Dark or brand-colored footers are fine — maintain text contrast and mute
+  the legal strip one step below body links.
+- E-commerce: include contact details, payment icons, and trust seals; SaaS:
+  include docs/changelog/status style resource links (Bird).
+
+### Anti-patterns — footers
+
+- Newsletter forms with no consent/privacy note (every sampled form has one).
+- Ten-plus link columns or 20-link columns — scannability dies; sampled max
+  is ~6 columns × ~9 links.
+- Hiding legal/regulatory content entirely; even the most minimal (Spade,
+  SOTF) keep a terms/privacy line.
+- Repeating the entire nav in the footer verbatim instead of curating
+  intent-based groups.
+- Decorative giant-logo footers (SOTF-style) on content-heavy sites — that
+  treatment fits fashion/brand sites, not utility SaaS.

package/knowledge/process/marketing-website-roadmap.md

@@ -0,0 +1,72 @@
+---
+id: marketing-website-roadmap
+title: "Marketing Website Roadmap — Positioning to CRO Loop"
+category: process
+platform: web
+tags: [process, roadmap, marketing, positioning, copywriting, seo, geo, cro]
+sources: ["Synthesized from Dunford, Miller (StoryBrand), Cialdini, Ogilvy, Google Search documentation, GEO research"]
+updated: 2026-07-08
+---
+
+# Marketing Website Roadmap — Positioning to CRO Loop
+
+Marketing sites fail in this order: positioning → copy → structure → design → speed. Fix upstream first; a beautiful site with unclear positioning converts worse than an ugly one with sharp positioning.
+
+## Phase 1 — Positioning (before any page exists)
+
+1. Run the positioning exercise (`positioning-messaging`): alternatives → unique attributes → value → best-fit segment → market category.
+2. Output one positioning statement: "For [segment] who [struggle], [product] is the [category] that [key value], unlike [alternative]."
+3. Decide the ONE conversion goal of the site (trial signup / demo booking / purchase / waitlist). Every page will serve it.
+
+**Exit:** positioning statement approved; primary conversion + metric defined.
+
+## Phase 2 — Message & Copy architecture
+
+1. Apply StoryBrand SB7 (`storybrand-copywriting`): customer = hero, product = guide; write the one-liner (problem → solution → success).
+2. Draft the homepage narrative before wireframing: headline (outcome, ≤10 words) → subhead (how/who) → proof → 3 benefit blocks → objection/FAQ → final CTA.
+3. Write CTAs value-forward ("Start my free trial"), define the risk-reducers next to them (free/no card/cancel anytime).
+4. Collect proof assets NOW: named testimonials with results, logos, numbers, case studies (`influence-persuasion` — social proof + authority placement). Missing proof is a launch blocker, not a nice-to-have.
+
+**Exit:** homepage copy doc + proof inventory.
+
+## Phase 3 — Site architecture & SEO/GEO foundations
+
+1. Page map from search + funnel logic: homepage, product/feature pages, pricing, use-case/persona pages, comparison pages ("X vs Y"), blog/resource hub, docs. Each page = one search intent = one primary keyword/entity (`on-page-seo`).
+2. URL structure flat and readable; internal linking plan (hub-and-spoke).
+3. GEO decisions up front (`geo-tactics-checklist`): answer-first page intros, FAQ blocks with real Q&A phrasing, llms.txt, schema plan (Organization, Product, FAQPage, Article), stats/citations in content.
+4. Technical baseline (`technical-seo`): SSR/SSG rendering, CWV budget (LCP <2.5s / INP <200ms / CLS <0.1), sitemap, canonicals.
+
+**Exit:** sitemap with intent per page; schema + rendering plan; performance budget.
+
+## Phase 4 — Design & build
+
+1. Wireframe with the real copy from Phase 2 (never design first, write later).
+2. Follow conversion layout (`conversion-ux`): above-the-fold contract, CTA every 1.5-2 viewports, proof adjacency, pricing page patterns.
+3. Visual system per `landing-signup` / `hero-sections` / `pricing-sections` patterns + brand direction; craft pass per `visual-craft-standards`.
+4. Build with the SEO-for-designers rules (`seo-for-designers`): image discipline, font loading, zero CLS, semantic HTML (also the #1 GEO extractability factor).
+5. Accessibility pass (`accessibility`) — overlaps ~70% with SEO/GEO quality signals.
+
+**Exit:** staging site passing Lighthouse ≥90 perf/SEO/a11y, all copy real, analytics installed.
+
+## Phase 5 — Launch checklist
+
+1. Meta titles/descriptions per page; OG/Twitter cards; favicon set.
+2. Schema validated; sitemap submitted (Search Console + Bing); llms.txt live; robots allows AI crawlers you want (GPTBot, ClaudeBot, PerplexityBot).
+3. Analytics events on every CTA + funnel step; goal tracking verified end-to-end with a real test conversion.
+4. 404 page designed; forms tested from mobile; thank-you/confirmation pages carry next steps.
+
+## Phase 6 — CRO loop (forever)
+
+Weekly/biweekly cadence:
+1. Review funnel: traffic → scroll depth → CTA click → form start → completion. Fix the biggest drop-off, nothing else.
+2. Test one variable at a time; headline/offer tests before button-color tests; ship winners into the design system.
+3. Refresh proof quarterly (new numbers, logos, testimonials); refresh content for GEO freshness signals.
+4. Monthly: check AI-engine visibility (brand mentions in ChatGPT/Perplexity/AI Overviews answers) alongside rankings (`geo-fundamentals` measurement loop).
+
+## Anti-patterns
+
+- Designing the hero before positioning exists ("we'll write copy into the design later").
+- Launching without proof assets or with anonymous testimonials.
+- Pricing hidden on a self-serve product; "Learn more" as the primary CTA.
+- Treating SEO/GEO as a post-launch task — rendering and IA decisions are unfixable-cheap later.
+- Redesigns driven by taste instead of funnel data; testing 5 changes at once.

package/knowledge/process/product-design-roadmap.md

@@ -0,0 +1,117 @@
+---
+id: product-design-roadmap
+title: "Product Design Roadmap — From Idea to Shipped Interface"
+category: process
+platform: both
+tags: [process, roadmap, workflow, discovery, wireframe, design-system, testing]
+sources: ["Synthesized from Norman, Krug, Dunford, Refactoring UI, Apple HIG, Material 3, NN/g research methods"]
+updated: 2026-07-08
+---
+
+# Product Design Roadmap — From Idea to Shipped Interface
+
+The canonical sequence for designing a website or app well. Phases overlap in practice, but **skipping a phase always resurfaces as rework**. Each phase lists its exit criteria — don't advance without them.
+
+## Phase 0 — Discovery & Strategy
+
+**Goal:** know who this is for, what job it does, and how success is measured — before any pixels.
+
+1. Define the target user in one sentence (role + situation + goal). "Everyone" is not an answer.
+2. Write the core job-to-be-done: "When [situation], I want to [motivation], so I can [outcome]."
+3. Positioning (Dunford method): list real competitive alternatives (including "do nothing/spreadsheet"), isolate unique attributes, translate to value, pick the segment that cares most, choose the market category to frame it.
+4. Define 1 primary success metric (activation, purchase, retention) + 2-3 guardrails.
+5. Competitive teardown: walk 3-5 competitors' core flows; note conventions (follow them — Jakob's Law) and gaps (your differentiation budget).
+
+**Exit criteria:** one-sentence positioning statement, primary persona, primary metric, list of conventions to respect.
+
+## Phase 1 — Information Architecture & Flows
+
+**Goal:** the skeleton — what exists and how users move.
+
+1. Content/feature inventory → group into a sitemap or app map (aim: ≤5 top-level destinations for apps).
+2. Map the 2-3 critical user flows end-to-end (entry → aha → conversion/retention loop) as flow diagrams. Every screen must justify its place in a flow.
+3. Choose navigation architecture per platform: web navbar/sidebar, iOS tab bar + stacks, macOS sidebar + menus (see `navigation`, `ios-app-design`, `macos-app-design`).
+4. Trunk test each key screen on paper: can a user tell what site/app this is, where they are, and what they can do here?
+
+**Exit criteria:** sitemap/app map, critical flow diagrams, chosen nav pattern.
+
+## Phase 2 — Wireframes & Content
+
+**Goal:** layout and words, zero styling. Content before chrome.
+
+1. Write the real copy first — headlines, CTAs, empty states, errors (see `ux-writing`, `storybrand-copywriting`). Lorem ipsum hides layout failures.
+2. Lo-fi wireframes for each screen in the critical flows: hierarchy via size/position only (grayscale — Refactoring UI discipline).
+3. One primary action per screen; place it per platform ergonomics (thumb zone / F-pattern).
+4. Design the edge states NOW: empty, loading, error, offline, long-content, zero-results. They're half the screens of a real product.
+5. Hallway-test the wireframes with 3-5 people (Krug method: "what is this? what would you do first?").
+
+**Exit criteria:** wireframes for every state of critical flows, real copy, one round of test feedback applied.
+
+## Phase 3 — Design System Foundations
+
+**Goal:** decide the visual language once, as tokens — before designing all screens.
+
+1. Type scale + families (see `typography`), spacing scale (8pt — `spacing-layout`), color ramps + semantic tokens with dark mode (`color-systems`, `design-tokens-theming`), radius/elevation scale, motion durations/easings (`motion-microinteractions`).
+2. Pick the platform design language baseline: Material 3 (Android/web-app), Apple HIG/Liquid Glass (iOS/macOS), or a custom web system — customize from it, don't fight it.
+3. Build the core component set first: button set, inputs, list/card, nav shell, modal/sheet, toast (specs in `buttons`, `forms-inputs`, `cards-lists-modals`).
+4. Verify accessibility at the token level: every text/surface pairing ≥4.5:1, focus ring defined (`accessibility`).
+
+**Exit criteria:** token sheet + core components that pass contrast; one screen fully assembled from them as proof.
+
+## Phase 4 — High-Fidelity Design
+
+**Goal:** apply the system to every screen; add craft.
+
+1. Design the hardest, densest screen first (it stress-tests the system); the marketing hero LAST (it's the most fun and least structural).
+2. Apply hierarchy passes (Refactoring UI): de-emphasize secondary content rather than enlarging primary; labels last resort; align everything to the grid.
+3. Craft pass per screen: optical alignment, spacing rhythm, consistent radii/shadows, real content stress test (longest German string, 1-item list, 10k-item list) — see `visual-craft-standards`.
+4. Motion spec for key transitions and micro-interactions; reduced-motion variants.
+5. Responsive/adaptive: mobile-first breakpoints for web; size classes for iOS; window resizing for macOS.
+
+**Exit criteria:** all critical-flow screens hi-fi in all states, on all target sizes; passes the squint test (primary action pops) and grayscale test.
+
+## Phase 5 — Prototype & Validate
+
+**Goal:** catch failures while they're cheap.
+
+1. Clickable prototype of the critical flows.
+2. 5-user usability test per iteration (NN/g: 5 users find ~85% of issues); task-based, think-aloud; measure completion, not opinions.
+3. Accessibility audit: keyboard-only pass, screen-reader pass on core flow, contrast sweep, 200% zoom / largest Dynamic Type.
+4. Design review against `design_review_checklist` for the project type.
+
+**Exit criteria:** critical tasks completed unaided by ≥4/5 testers; a11y audit clean; checklist violations resolved or accepted deliberately.
+
+## Phase 6 — Build Handoff & Quality
+
+**Goal:** ship what was designed, not an approximation.
+
+1. Handoff = tokens + components + states + motion specs + copy doc, not just flat mocks.
+2. Performance budget agreed with engineering: LCP <2.5s, INP <200ms, CLS <0.1 (web); 60fps scroll, <2s cold start (apps) — design decisions (images, fonts, animation) must respect it (`seo-for-designers`).
+3. Design QA on real builds/devices before release: spacing, states, motion, dark mode, smallest supported screen.
+
+**Exit criteria:** design QA sign-off on staging/TestFlight build.
+
+## Phase 7 — Launch, Measure, Iterate
+
+**Goal:** the design is a hypothesis; production data is the test.
+
+1. Instrument the critical flows (funnel steps, drop-off, rage-clicks/dead-taps).
+2. Watch week-1: activation rate, funnel drop-offs, support tickets, store reviews — each is a design bug report.
+3. Iterate in the same system: fixes go through tokens/components so consistency survives.
+4. Quarterly: re-run the heuristic audit and refresh against platform updates (new HIG/Material releases).
+
+## Per-platform overlays
+
+- **Website/landing:** interleave `marketing-website-roadmap` (positioning → copy → SEO/GEO are load-bearing phases, not afterthoughts).
+- **iOS app:** Phase 3 baseline = `ios-app-design` + `apple-hig-liquid-glass`; add App Store asset design (icon, screenshots) as a Phase 6 deliverable.
+- **macOS app:** Phase 1 must include menu bar + keyboard shortcut map; multi-window/document model decided before wireframes (`macos-app-design`).
+- **Cross-platform:** design tokens shared; navigation/controls per-platform native (`design-tokens-theming`).
+
+## Anti-patterns (process smells)
+
+- Starting in high-fidelity ("designing the hero first").
+- Lorem ipsum surviving past Phase 2; edge states designed "later" (= never).
+- Design system built after 40 screens exist (retrofit costs 3×).
+- Usability testing once, at the end, as theater.
+- Handoff as a Figma link with no states or tokens.
+- Redesigning visuals when the funnel problem is positioning or copy.

package/knowledge/seo/on-page-seo.md

@@ -0,0 +1,124 @@
+---
+id: on-page-seo
+title: "On-Page SEO 2026"
+category: seo
+platform: web
+tags: [titles, meta-descriptions, headings, internal-linking, eeat, entity-seo, ai-overviews, local-seo]
+sources: ["https://developers.google.com/search/docs/fundamentals/creating-helpful-content", "https://developers.google.com/search/docs/appearance/title-link", "https://mrs.digital/blog/entity-seo/", "https://thefrankagency.com/blog/entity-seo-guide/", "https://eseospace.com/blog/how-ai-overviews-impact-seo-2026/", "https://www.stackmatix.com/blog/aeo-seo-geo", "https://www.surmado.com/blog/answer-engine-optimization-aeo-geo-guide", "https://naturallinks.net/blog/seo-checklist/"]
+updated: 2026-07-08
+---
+
+# On-Page SEO 2026
+
+On-page SEO in 2026 optimizes for three consumers at once: Google's classic ranking systems, Google AI Overviews / AI Mode, and third-party answer engines (ChatGPT, Perplexity, Claude). The same fundamentals serve all three — clear structure, verifiable expertise, entity clarity, and directly quotable answers.
+
+## 1. Title Tags
+
+**Rules:**
+- One unique `<title>` per page, **50–60 characters** (~580 px) so it doesn't truncate.
+- Primary keyword/topic in the **first half**; brand at the end: `Web Design for Startups | Saglitz Design`.
+- Write for click-through, not keyword density. Titles are a strong relevance signal AND your SERP ad copy.
+- Match search intent type: transactional pages get action words ("Hire", "Pricing", "Get"), informational pages get question/outcome phrasing ("How to…", "…Explained").
+- Google rewrites ~60% of titles it considers poor. Mismatched H1/title, keyword stuffing, and boilerplate ("Home") trigger rewrites — keep title and H1 semantically aligned (not necessarily identical).
+
+**Don't:** stuff multiple keywords with pipes, ALL-CAPS, emoji, year-spam ("Best X 2026 2025"), or duplicate titles across pages.
+
+## 2. Meta Descriptions
+
+- **150–160 characters.** Not a ranking factor; purely CTR. Google rewrites them often — a good one earns being kept.
+- Formula: *what the page delivers + differentiator + soft CTA*. Include the primary keyword (it gets bolded in SERPs).
+- Every indexable page gets a unique one. Duplicates are worse than none (Google will generate from content).
+- For pages targeting AI Overviews, front-load a one-sentence direct answer — descriptions sometimes feed snippet/citation selection.
+
+## 3. Heading Hierarchy
+
+- Exactly **one `<h1>`** per page, stating the page's core topic. Multiple H1s won't tank you, but one is the clean signal for both Google and LLMs parsing structure.
+- Strict nesting: H1 → H2 → H3. Never skip levels for styling reasons — style with CSS, structure with semantics.
+- H2s should read as a table of contents; each H2 section should be able to stand alone as an extractable answer (AI Overviews lift individual sections, not whole pages).
+- Put question-phrased H2s (`How much does a website redesign cost?`) directly above a 40–60 word direct answer, then elaborate. This is the featured-snippet and AI-citation pattern.
+- Headings are not decoration: don't wrap taglines, buttons, or card labels in `<h*>` just for font size.
+
+## 4. Internal Linking
+
+The most underused on-page lever. Rules:
+
+- Every important page: **≥ 3 internal links pointing to it** from relevant pages. Zero incoming links = orphan = barely indexed.
+- **Descriptive anchor text**: "our web design pricing" not "click here" / "learn more". Anchors tell Google (and screen readers) what the target is about.
+- Hub-and-spoke topic clusters: pillar page (`/web-design/`) links to every subtopic (`/web-design/ecommerce/`, `/web-design/portfolio-sites/`); every subtopic links back to the pillar and to 2–3 siblings.
+- Link from high-authority pages (homepage, top blog posts) to pages you want to rank.
+- Keep global nav lean (≤ ~7 top items); use contextual in-body links for the long tail — in-content links carry more weight than footer/nav boilerplate.
+- Plain `<a href>` HTML links only (see technical-seo.md §2).
+- Quarterly: crawl for orphans and pages > 3 clicks deep; fix with new contextual links.
+
+## 5. E-E-A-T (Experience, Expertise, Authoritativeness, Trust)
+
+E-E-A-T is not a direct score; it's the pattern Google's systems and quality raters reward. **Trust is the most important member.** Make it machine-verifiable:
+
+- **Bylines everywhere:** real author name linked to a bio page with credentials, photo, and `sameAs` links (LinkedIn etc.). Back it with `Person`/`author` structured data.
+- **Show first-hand experience:** original screenshots, project photos, real numbers from your own work ("we cut LCP from 4.1 s to 1.8 s on this client build"). This is the "E" that AI-generated content cannot fake and that post-Helpful-Content systems reward.
+- **About + Contact pages** with a physical address, email, and phone. Anonymous sites are structurally distrusted in YMYL-adjacent niches.
+- **Cite sources** with outbound links to authoritative references. Outbound linking to good sources is a quality signal, not "leaking PageRank".
+- **Dates:** show published AND updated dates truthfully; update decaying content instead of republishing with fake fresh dates.
+- **AI-assisted content is allowed** if it meets these standards: human-reviewed, experience-injected, accurate, and adds value beyond what an LLM would generate from scratch. Pure unedited AI output at scale matches Google's "scaled content abuse" spam policy — don't ship it.
+
+## 6. Content Quality Signals
+
+- **Intent match beats length.** No minimum word count exists. A pricing page that answers in 300 words outranks a 2,000-word essay that buries it.
+- One page = one search intent. If a page targets two intents, split it; if two pages target one intent, merge them (cannibalizing pages dilute each other).
+- Answer-first structure: conclusion in the first 100 words, details after (inverted pyramid). Users, featured snippets, and AI extraction all prefer it.
+- Original information gain: data, opinions, examples, comparisons that don't exist elsewhere. "Same info, rewritten" is the profile the Helpful Content system demotes.
+- Scannability: short paragraphs (2–4 lines), bullet lists, comparison tables, descriptive subheads. Tables and lists are disproportionately quoted by AI Overviews.
+- Prune or consolidate zombie pages (no traffic, no links, no purpose, 12+ months). Site-wide quality is assessed in aggregate.
+
+## 7. Entity SEO
+
+Google and LLMs rank *entities* (things with defined attributes and relationships), not strings. Make your brand and topics unambiguous:
+
+- **Define your entity home:** one canonical About/Organization page stating who you are, what you do, where, for whom. All profiles link to it.
+- **`Organization`/`Person` schema with `sameAs`** arrays connecting your site to LinkedIn, Crunchbase, Wikipedia/Wikidata (if eligible), social profiles — this is how the Knowledge Graph reconciles your identity.
+- **Consistent naming everywhere:** same brand name, description, and category across your site, GBP, directories, and socials. Inconsistency fragments the entity.
+- Use related entities in content: a page about "web design" that naturally covers wireframes, Figma, responsive layout, accessibility, and conversion signals topical depth to entity-based systems.
+- Topical authority = covering a topic cluster completely, not publishing one viral post. Map the cluster before writing.
+
+## 8. Optimizing for AI Overviews & Answer Engines (AEO/GEO)
+
+Ranking #1 no longer guarantees the click; being **cited** is the new visibility layer. AI Overviews sources correlate heavily with top-10 organic results, so classic SEO remains the entry ticket. Then:
+
+- Direct-answer blocks: question H2 + concise 40–60 word answer + supporting detail.
+- Quotable, self-contained sentences with claims + numbers ("Design agencies charge £3,000–£15,000 for a marketing site in 2026") get lifted verbatim.
+- Publish statistics, original research, definitions, and step lists — the formats LLMs cite most.
+- Ensure full server-rendered HTML (AI crawlers don't run JS — see technical-seo.md §3/§8).
+- Track: Search Console impressions vs clicks divergence (zero-click growth), plus brand mentions inside ChatGPT/Perplexity answers.
+- Expect lower CTR on pure-informational queries; weight content strategy toward queries where users still click (transactional, local, comparison, tools).
+
+## 9. Local SEO Essentials
+
+For any business serving a geographic area:
+
+- **Google Business Profile (GBP)** is the #1 local ranking asset:
+  - Exact legal business name — **no keyword stuffing** (2026 enforcement actively suspends profiles for it, especially contractors/locksmiths/movers).
+  - Correct primary category + all applicable secondary categories; complete every field (hours, services, attributes, description).
+  - 10+ real, high-resolution photos (interior/exterior/work); add new ones monthly.
+  - Reply to every review; steady review velocity beats a one-time burst. Never buy reviews.
+  - Post updates/offers monthly; keep holiday hours current.
+- **NAP consistency:** identical Name/Address/Phone on site footer, GBP, and major directories/citations.
+- **LocalBusiness schema** on the contact/location page (see technical-seo.md §4 example).
+- **Location pages** for each service area: unique local content (projects in that city, local testimonials, directions) — not find-and-replace city-name doorways, which are a spam policy violation.
+- Embed a Google Map, list service areas, and use locally phrased headings ("Web Design in Manchester").
+- Local link signals: chamber of commerce, local press, sponsorships, supplier/partner pages.
+
+## 10. On-Page Checklist (per page, pre-publish)
+
+- [ ] Unique title 50–60 chars, keyword first, brand last
+- [ ] Unique meta description 150–160 chars with direct answer + CTA
+- [ ] One H1; logical H2/H3 outline; question-phrased H2s where intent is informational
+- [ ] First 100 words answer the query directly
+- [ ] Primary keyword in H1, first paragraph, and URL slug (short, hyphenated, lowercase)
+- [ ] 3–8 contextual internal links out (descriptive anchors); ≥ 3 internal links pointing in
+- [ ] 1–3 outbound citations to authoritative sources
+- [ ] Author byline → bio page with credentials + Person schema
+- [ ] Relevant schema type added and validated
+- [ ] Images: descriptive filenames, alt text, dimensions set (see seo-for-designers.md)
+- [ ] Published/updated dates visible and truthful
+- [ ] Content exists in raw server HTML (curl test)
+- [ ] No other page on the site targets the same intent