saglitzdesign-mcp 0.3.1

package/knowledge/patterns/mobile/settings-lists.md

@@ -0,0 +1,71 @@
+---
+id: mobile-settings-lists
+title: "Mobile Settings & Grouped List Patterns"
+category: pattern
+platform: mobile
+tags: [settings, lists, grouped-lists, toggles, information-architecture]
+sources:
+  - "https://mobbin.com/screens/3f573b95-4bbb-4978-957e-56178543e8e7"
+  - "https://mobbin.com/screens/1402efff-5fe3-487c-8137-a3a96cc81f1a"
+  - "https://mobbin.com/screens/bc43b8c8-3c94-4e67-912e-da5e9f8e4de5"
+  - "https://mobbin.com/screens/2ead27ba-ec0e-4818-b14f-037748c06cef"
+  - "https://mobbin.com/screens/2110f6a5-e7d0-4fd8-a7d0-f081913dfaac"
+  - "https://mobbin.com/screens/ad5aa6e3-c55c-441c-ac9e-691473e07f92"
+  - "https://mobbin.com/screens/d10c285d-ab1d-472b-a5e3-e69f6069c66f"
+updated: 2026-07-08
+---
+
+# Settings Screens with Grouped Lists (iOS)
+
+Based on real screens from Base, Deepstash, Meta AI, NGL, Binance, TextNow, and Linktree on Mobbin.
+
+## Observed patterns
+
+### Grouping and section headers
+- Every screen groups rows under short section headers. [Deepstash](https://mobbin.com/screens/1402efff-5fe3-487c-8137-a3a96cc81f1a) uses uppercase gray micro-headers (SUBSCRIPTION / CONTENT / ACCOUNT); [Binance](https://mobbin.com/screens/2110f6a5-e7d0-4fd8-a7d0-f081913dfaac) uses sentence-case gray labels (General / Appearance / Payment); [TextNow](https://mobbin.com/screens/ad5aa6e3-c55c-441c-ac9e-691473e07f92) puts uppercase headers on tinted separator bands (PROFILE / NOTIFICATIONS / VOICE / LOOK AND FEEL); [NGL](https://mobbin.com/screens/2ead27ba-ec0e-4818-b14f-037748c06cef) even gives each header its own small icon (🔔 Preferences, ⚠️ Safety controls).
+- Groups run 3–8 rows; semantically ordered with the most-used (subscription, notifications, preferences) at the top and legal/support/danger items at the bottom.
+
+### Two container styles
+- **Edge-to-edge rows with hairline dividers**: [Base](https://mobbin.com/screens/3f573b95-4bbb-4978-957e-56178543e8e7), Binance, TextNow — classic iOS grouped-table look.
+- **Inset rounded cards per group**: NGL and [Meta AI](https://mobbin.com/screens/bc43b8c8-3c94-4e67-912e-da5e9f8e4de5) wrap each group in a rounded card on a tinted background; [Linktree](https://mobbin.com/screens/d10c285d-ab1d-472b-a5e3-e69f6069c66f) uses flat rows with thin outlined leading icons on an off-white page. Both styles coexist in top apps; the card style reads more "product-branded", the flat style more native.
+
+### Row anatomy (the universal grammar)
+- Label left; **current value right in gray** + chevron for navigable choices: Base "Language — English - US ›", Binance "Currency — USD ›", "Mode & Theme — System & Glacier White ›", TextNow "Notification Sound — Alert 3 ›" (value tinted red as its accent), Meta AI "…›" rows.
+- **Toggles inline** for binary settings — TextNow's green switches for "Perks Notifications", "Email Notifications"; no navigation for on/off decisions.
+- **Two-line rows** when a setting needs explanation: Base pairs the bold label with a lighter one-line description ("Appearance Mode — Light, dark, or match your device").
+- **Visual previews** where words fail: Base shows the actual theme color as a small blue swatch in the "Theme" row; Binance shows red/green arrows for "Color Preference".
+- Leading icons are optional: Deepstash, NGL, Meta AI, and Linktree use small monochrome outline icons per row; Base and Binance omit them entirely — both work, but each app is internally consistent.
+- Row height ~44–56pt, one setting per row, full-row tap target.
+
+### Status surfaced in the list
+- Deepstash shows subscription state inline: "My subscription: Pro" with a shield icon at the very top. TextNow shows counts in labels ("Blocked Numbers (0)") and values like "Call Forwarding — Off ›". The list is a dashboard, not just a menu.
+
+### Navigation chrome
+- Back chevron (Base, Binance, TextNow, NGL, Linktree) or close X (Deepstash) plus a title — centered "Settings" (TextNow, NGL, Linktree) or large-title left-aligned (Binance's big "Settings", Base's "Display"). No other header actions; settings headers stay minimal.
+
+## Design rules derived
+
+**Do**
+1. Group every setting under a 1–2 word section header; never render one undifferentiated list.
+2. Follow the row grammar strictly: label left → (optional gray value) → chevron for drill-ins; label left → switch for booleans. Users decode this instantly.
+3. Show the current value in the row itself (language, currency, theme, sound) so users never drill in just to check state.
+4. Use a second, lighter description line only for genuinely ambiguous settings (Base's appearance row) — not on every row.
+5. Order groups by frequency of use; push About/Terms/Support/Sign out to the last group.
+6. If using leading icons, use them on every row at one consistent size and stroke weight (Linktree, NGL); if not, use none (Base, Binance).
+7. Render tiny previews for visual settings — color swatch, theme thumbnail — instead of describing them.
+8. Keep rows ≥44pt with the entire row tappable, and one setting per row.
+9. Surface account/subscription status at the top of the settings root (Deepstash's "My subscription: Pro").
+10. Pick one container style (inset cards or edge-to-edge hairline rows) for the whole settings tree.
+
+**Don't**
+1. Don't hide binary settings behind a chevron and a detail page — inline the switch.
+2. Don't use chevrons on rows that trigger immediate actions (share, sign out); chevron promises navigation.
+3. Don't let section headers grow into sentences; 1–3 words, consistently cased.
+4. Don't mix value-accent colors arbitrarily — TextNow's red values read as warnings even when they're neutral state.
+
+## Anti-patterns seen
+
+- **Accent-colored value text** (TextNow's red "Alert 3" / "Off"): brand red on a value column mimics an error state; reserve red for destructive or alert semantics.
+- **Overloaded root list** (TextNow, Binance): 6+ groups on one endless scroll with no search; past ~25 rows a settings search field or a two-level IA is warranted.
+- **Ambiguous rows without values** (Linktree's "Social", "SEO"): bare labels with chevrons give no scent of what's inside; a gray value or count would fix it.
+- **Header-icon noise** (NGL): icons on both section headers *and* every row double the visual vocabulary without adding information.

package/knowledge/patterns/web/dashboards.md

@@ -0,0 +1,141 @@
+---
+id: web-dashboards
+title: "Web App Dashboard Patterns (Sidebar + Data Cards)"
+category: pattern
+platform: web
+tags: [dashboard, sidebar, navigation, cards, app-shell, data]
+sources:
+  - "https://mobbin.com/screens/1c5de4d2-cf69-44e3-8352-55790c400acb"
+  - "https://mobbin.com/screens/bcbc434d-f7e8-44f4-a17a-a00655f0ca4b"
+  - "https://mobbin.com/screens/79f37f27-f1f0-4d31-96ec-899917cb9aa4"
+  - "https://mobbin.com/screens/cd6232db-c7ee-4756-a78d-d7b11f772a74"
+  - "https://mobbin.com/screens/4560f04c-5d7c-4a1c-9316-088ec410a8fb"
+  - "https://mobbin.com/screens/f89c973f-b307-4129-a88b-f4ff50b6807f"
+  - "https://mobbin.com/screens/8e9ffe26-ef22-4540-b5e4-101f78abf96a"
+updated: 2026-07-08
+---
+
+# Web App Dashboard Patterns (Sidebar + Data Cards)
+
+Derived from Mobbin web screens of Frame, Dovetail, Felt, Sana AI (two
+screens), Amplitude, and Asana (July 2026 research pass).
+
+## Observed patterns
+
+### 1. The universal shell: left sidebar + main canvas
+Every sampled product uses a fixed left sidebar (~220–260px) over a wide
+content region.
+[Asana](https://mobbin.com/screens/8e9ffe26-ef22-4540-b5e4-101f78abf96a)
+(dark sidebar, light canvas) groups nav as: top-level (Home, My tasks,
+Inbox) → labeled groups ("Insights", "Starred", "Projects", "Team") with
+"+" add-buttons per group.
+[Felt](https://mobbin.com/screens/79f37f27-f1f0-4d31-96ec-899917cb9aa4)
+(light sidebar): workspace switcher at top, Recents/Drafts/Settings/Invite
+members/Help, then a "Projects" group.
+[Amplitude](https://mobbin.com/screens/f89c973f-b307-4129-a88b-f4ff50b6807f)
+nests collapsible groups (Tracking Plan → Events/Properties/Filters;
+Connections → Sources/Destinations) and pins Pricing/Settings at the bottom.
+
+### 2. Sidebar anatomy (top → bottom)
+Consistent slots across samples:
+1. Workspace/account switcher or logo (Frame's app picker, Felt's
+   workspace dropdown, Amplitude's project + branch selectors).
+2. Primary create action near the top — Amplitude and Asana both place a
+   prominent "+ Create" button in the top bar/sidebar head; Felt uses a red
+   "New map" button in the content header instead.
+3. Personal/nav items (Home, Recents, Inbox, Search).
+4. Labeled, collapsible groups for user content (Projects, Collections)
+   with color-dot or emoji identifiers (Sana AI's colored collection dots,
+   Asana's colored project squares).
+5. Bottom-pinned utility: Settings, Help, and monetization/trial cards.
+
+### 3. Trial/upsell cards live at the sidebar bottom
+[Felt](https://mobbin.com/screens/79f37f27-f1f0-4d31-96ec-899917cb9aa4)
+shows a blue tinted card ("2 days left in your Enterprise trial" + "Talk to
+Sales" button); Asana shows "Advanced free trial — 5 days left" with an
+amber "Add billing info" button;
+[Sana AI](https://mobbin.com/screens/4560f04c-5d7c-4a1c-9316-088ec410a8fb)
+shows a credits meter ("100 credits left today"). The pattern: persistent
+but non-blocking, pinned to the sidebar's bottom edge.
+
+### 4. Content canvas: card grids for browse, widgets for metrics
+- **Document/asset grids**:
+  [Dovetail](https://mobbin.com/screens/bcbc434d-f7e8-44f4-a17a-a00655f0ca4b)
+  and [Frame](https://mobbin.com/screens/1c5de4d2-cf69-44e3-8352-55790c400acb)
+  show 3–4-column card grids where each card = preview/summary + bold title
+  + author/timestamp metadata. Empty grid cells become dashed or ghosted
+  action cards ("+ New note", "Import data") — onboarding embedded in the
+  grid itself.
+- **Map/asset thumbnails**: Felt's grid uses large colorful map thumbnails
+  + name + "Last viewed X days ago", with a "Welcome to Felt!" dismissible
+  onboarding row of video cards on first run.
+- **Metric widgets**: Asana's "New dashboard" screen is a 2-column widget
+  grid (area chart, bar chart) with per-widget filter chips ("1 Filter ·
+  Tasks in 1 project"), legends, and "Add widget" affordance. Amplitude's
+  home mixes "Quick actions" shortcut cards, a "Project quota" card with
+  progress bars (0.1% / 2.3% used), and a "Recent activity" feed.
+
+### 5. Home-as-launcher for AI products
+[Sana AI](https://mobbin.com/screens/cd6232db-c7ee-4756-a78d-d7b11f772a74)
+centers a greeting ("Hello, Jane — How can I help you today?"), a row of
+suggested-task cards (some with thumbnails), and a persistent omnibox
+("Ask or search for anything…") pinned at the bottom. The dashboard is a
+starting point, not a report.
+
+### 6. Visual language
+- Light neutral canvases (white/#FAFAFA); sidebars either same-tone with a
+  hairline divider (Felt, Dovetail, Sana) or dark inverted (Asana, Linear
+  style; Sana AI also ships a dark variant).
+- Cards: white, 1px light-gray border or very soft shadow, 8–12px radius,
+  consistent internal padding; selected/hover states use tinted fills
+  (Felt's pink "Recents" active row, Amplitude's blue active "Home").
+- Exactly one saturated accent for the primary action (Felt red, Amplitude
+  blue, Asana coral "+ Create") — everything else stays gray-scale.
+- Active nav item = tinted pill + colored icon/text, never just bold.
+
+## Design rules derived
+
+**Do**
+- Use the standard shell: sidebar (switcher → create → nav → groups →
+  pinned utilities) + top bar (search/breadcrumb + share/invite/profile) +
+  card-based canvas.
+- Make "create new X" the single most prominent colored control on screen.
+- Group sidebar links under small-caps/muted labels; make user-content
+  groups collapsible with inline "+" actions.
+- Give every card grid an embedded empty/action card so blank space
+  teaches ("+ New note", "Create project").
+- Show recency metadata ("Last viewed 3 days ago") on asset cards — it's
+  the primary re-entry scent.
+- Pin trial status, quotas, or credits as a compact card at the sidebar
+  bottom with one clear CTA.
+- For metric widgets: title, chart, legend, and a filter-context line per
+  widget; allow adding/rearranging widgets.
+- Include global search prominently (Asana's centered top search, Dovetail's
+  full-width "Search and discover", Sana's omnibox).
+- Add a dismissible first-run row (welcome videos/checklist) rather than a
+  modal tour (Felt).
+
+**Don't**
+- Don't exceed ~2 levels of sidebar nesting (Amplitude's group → item is
+  the observed max).
+- Don't scatter multiple saturated accent colors across the canvas; charts
+  may be colorful, chrome may not.
+- Don't hide the create action inside menus.
+- Don't ship blank empty states — every sampled product fills first-run
+  space with templates, demos, or sample content (Frame's pre-seeded docs,
+  Dovetail's sample video, Sana's demo tasks).
+
+## Anti-patterns
+
+- **Dashboard-as-wall-of-KPIs**: none of the sampled homes lead with dense
+  stat tiles; they lead with the user's recent work or next action.
+  Metrics live in dedicated dashboard/reporting views (Asana) or scoped
+  cards (Amplitude quota).
+- **Mystery-meat icon-only sidebars** for primary nav — all samples pair
+  icons with labels at default width.
+- **Blocking upsells**: trial/paywall prompts are pinned cards, never
+  modals covering the canvas.
+- **Inconsistent card anatomy in one grid** (mixed metadata, misaligned
+  titles) — grids read as broken; Dovetail/Felt keep every card identical.
+- **Top-nav-only app chrome** for multi-object products; the sidebar is the
+  de facto standard for anything with projects/collections/spaces.

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

@@ -0,0 +1,122 @@
+---
+id: web-feature-sections
+title: "Website Feature Section Patterns (Grids & Bento)"
+category: pattern
+platform: web
+tags: [features, bento, grid, screenshots, product-marketing]
+sources:
+  - "https://mobbin.com/sites/sections/7295b73f-1281-49d3-99dd-3701cae70072"
+  - "https://mobbin.com/sites/sections/54ba196c-c979-4564-a54a-c02a23e8e8f7"
+  - "https://mobbin.com/sites/sections/3f148051-6eff-401c-bc33-113cc1d2e964"
+  - "https://mobbin.com/sites/sections/011f833e-b660-43b2-abce-affa60297789"
+  - "https://mobbin.com/sites/sections/a37dec6a-3829-46e4-b3df-a5cb16185f55"
+  - "https://mobbin.com/sites/sections/9038df26-d13c-4c95-98d5-62ba4fd5fad3"
+  - "https://mobbin.com/sites/sections/a0b1fcee-ed8b-4709-a230-d750ca54c280"
+updated: 2026-07-08
+---
+
+# Website Feature Section Patterns (Grids & Bento)
+
+Derived from Mobbin section screenshots of Better Stack, Square, Fibery,
+Eventbrite, PamPam, Attio, and Jitter (July 2026 research pass).
+
+## Observed patterns
+
+### 1. Bento/card grid with cropped UI vignettes
+[Better Stack](https://mobbin.com/sites/sections/7295b73f-1281-49d3-99dd-3701cae70072)
+runs a 3×2 dark bento grid under the headline "That's just the tip of the
+iceberg": each rounded card holds a cropped, simplified product-UI vignette
+on top, then a bold feature name ("Screenshots and error logs", "Incident
+audit timeline") and a 1–2 sentence description. Card borders are a subtle
+1px lighter-than-background stroke.
+[Attio](https://mobbin.com/sites/sections/9038df26-d13c-4c95-98d5-62ba4fd5fad3)
+uses the identical dark 3×2 recipe but with *abstracted wireframe
+illustrations* of the UI (gray boxes, dashed outlines) instead of real
+screenshots — schematic drawings keep visual noise low while still implying
+the interface.
+
+### 2. Alternating media + copy rows
+[Square](https://mobbin.com/sites/sections/54ba196c-c979-4564-a54a-c02a23e8e8f7)
+lists four features as horizontal rows separated by hairline dividers: small
+lifestyle photo left, bold feature title + short paragraph + "Learn more +"
+link right. Photography (real merchants using the product) replaces UI
+shots because the product is physical. One section headline
+("Seamless selling from one location to one hundred") frames all rows.
+
+### 3. Icon-led capability index (many features, low depth)
+[Fibery](https://mobbin.com/sites/sections/3f148051-6eff-401c-bc33-113cc1d2e964)
+shows a 4-column grid of ~16 features, each just a small colored icon + name
+("Map view", "Whiteboards", "Automation Rules") with occasional "new"
+badges. [PamPam](https://mobbin.com/sites/sections/a37dec6a-3829-46e4-b3df-a5cb16185f55)
+does a calmer 2-column version: each item is a soft rounded icon tile + name
++ one-line description ("AI chat — Find places with AI"). This pattern says
+"we have breadth" rather than explaining any one feature.
+
+### 4. 2×2 benefit grid, icon + heading + paragraph
+[Jitter](https://mobbin.com/sites/sections/a0b1fcee-ed8b-4709-a230-d750ca54c280)
+uses a 2×2 grid; each cell has a small outlined pastel icon, a 2-line bold
+benefit heading ("Make professional-quality animations in no time"), and a
+~40-word paragraph. No imagery at all — copy does the persuading, whitespace
+keeps it airy.
+
+### 5. Four-up screenshot columns
+[Eventbrite](https://mobbin.com/sites/sections/011f833e-b660-43b2-abce-affa60297789)
+tops the section with four columns, each a floating product screenshot above
+a centered feature name ("Embedded checkout", "Scheduled payouts") and a
+short paragraph — then transitions directly into a dark testimonial band,
+pairing capability with proof.
+
+### Copy & rhythm observations
+- Feature titles are noun phrases or imperative benefits, 2–6 words.
+- Descriptions are 15–45 words; Better Stack's pattern ("We don't just tell
+  you that your service went down. We also tell you why.") shows
+  conversational tone works inside cards.
+- Dark-theme bento (Better Stack, Attio) is favored by dev/data tools;
+  light, warm palettes (PamPam, Jitter, Square) by consumer/creative tools.
+- Grids are strict: consistent card padding, equal gutters (~24px), aligned
+  title baselines across a row.
+
+## Design rules derived
+
+**Do**
+- Pick the pattern by information depth: bento cards for 4–6 differentiated
+  features with visuals; alternating rows for 3–5 features needing longer
+  stories; icon index for 10+ shallow capabilities; 2×2 icon+copy for pure
+  benefit messaging.
+- Crop and simplify product screenshots to the one region that proves the
+  feature — never paste full-window screenshots into cards.
+- Keep every card structurally identical: media → title → description, with
+  the same padding and type sizes.
+- Frame the grid with one section headline that makes an aggregate claim;
+  let cards carry specifics.
+- On dark bento grids, use 1px low-contrast borders and slight card
+  elevation instead of shadows.
+- Use "Learn more" links per row (Square) only when deeper pages exist;
+  otherwise omit links to keep cards non-interactive and calm.
+- Consider schematic/wireframe illustrations (Attio) when real UI is too
+  dense to read at card size.
+
+**Don't**
+- Don't mix media types (photo, screenshot, icon, illustration) within one
+  grid — every sampled grid is internally homogeneous.
+- Don't exceed ~2 sentences of description inside a card.
+- Don't let cards vary in height within a row; pad copy to balance.
+- Don't add a CTA button inside every card; the section-level CTA or row
+  "Learn more" link suffices.
+
+## Anti-patterns
+
+- **Full-app screenshots at thumbnail size**: unreadable UI crammed into a
+  card; top sites crop to a single component or redraw schematically.
+- **Feature-count vanity grids with paragraph depth**: 16-item indexes must
+  stay one-line (Fibery, PamPam); giving each of 16 items a paragraph
+  produces a wall of text.
+- **Zig-zag rows without dividers or consistent image sizing** — Square's
+  version works because photos are uniform in size and each row is separated
+  by a hairline rule.
+- **Icon soup**: decorative icons that don't map to the feature named (all
+  sampled icon grids use literal, recognizable glyphs: map pin for Map view,
+  chart for Charts).
+- **Repeating body copy across cards** (visible as a flaw even in Jitter,
+  where two cells reuse the same paragraph) — each card must earn distinct
+  copy or be cut.

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

@@ -0,0 +1,121 @@
+---
+id: web-hero-sections
+title: "Website Hero Section Patterns"
+category: pattern
+platform: web
+tags: [hero, landing, cta, headline, signup]
+sources:
+  - "https://mobbin.com/sites/sections/8aefc8b7-fe79-4dfa-b0ce-9aa1677e4e45"
+  - "https://mobbin.com/sites/sections/8fdb8f57-192b-43e5-b448-532203ec444d"
+  - "https://mobbin.com/sites/sections/86f504e1-5a41-4a12-9683-b6e6b9672111"
+  - "https://mobbin.com/sites/sections/d008689a-c73f-4513-a760-25a93ef6f043"
+  - "https://mobbin.com/sites/sections/e727f26d-79e1-49d9-9ed7-f6590091ec8d"
+  - "https://mobbin.com/sites/sections/5f84e90e-f4ae-48e5-bdb0-9b0b9b303f03"
+  - "https://mobbin.com/sites/sections/edb14076-5e1f-48d8-ba26-5e5e43f9a9b0"
+updated: 2026-07-08
+---
+
+# Website Hero Section Patterns
+
+Derived from Mobbin section screenshots of Analogue Agency, ClickUp, Proton,
+Passionfroot, Retool, Figma, and Mural (July 2026 research pass).
+
+## Observed patterns
+
+### 1. Center-stacked hero: headline → subhead → single CTA
+[Passionfroot](https://mobbin.com/sites/sections/d008689a-c73f-4513-a760-25a93ef6f043)
+is the canonical example: a two-line serif headline ("Where creators do brand
+deals"), one short sans subhead, and a single dark pill button ("Start for
+Free →") — all center-aligned on a warm cream background. Floating, tilted
+product-UI fragments (payment card, chart, calendar) sit at the edges of the
+canvas, decorating without competing with the copy.
+[Retool](https://mobbin.com/sites/sections/e727f26d-79e1-49d9-9ed7-f6590091ec8d)
+uses the same skeleton for its bottom CTA band: small "BETA" pill badge above,
+one bold headline ("Get up and running in seconds"), one purple button —
+nothing else.
+
+### 2. Headline + inline email capture (single-field signup)
+[ClickUp](https://mobbin.com/sites/sections/8fdb8f57-192b-43e5-b448-532203ec444d)
+puts a bold left-aligned headline ("Let's make the world more productive,
+together.") beside a one-field form: "Enter your work email" input with an
+attached purple "Get Started" button, on a white card over a subtle dotted
+texture. [Analogue Agency](https://mobbin.com/sites/sections/8aefc8b7-fe79-4dfa-b0ce-9aa1677e4e45)
+does the compact version inside a saturated blue rounded card: two-line value
+promise, email field + white "Sign Up" pill. Rule of thumb: email capture
+heroes ask for exactly one field.
+
+### 3. Oversized statement typography as the hero itself
+[Figma](https://mobbin.com/sites/sections/5f84e90e-f4ae-48e5-bdb0-9b0b9b303f03)
+fills a flat yellow band with a giant black grotesque headline ("Creative
+tools meet the internet.") — no imagery at all; type occupies ~60% of the
+viewport width and the brand color does the visual work.
+[Mural](https://mobbin.com/sites/sections/edb14076-5e1f-48d8-ba26-5e5e43f9a9b0)
+inverts hierarchy: a small kicker line ("Work better for better work") over an
+enormous "Get started" serif wordmark rendered inside a yellow sticky-note
+graphic on a violet field — the CTA literally *is* the hero art.
+
+### 4. Split-tone editorial hero
+[Proton](https://mobbin.com/sites/sections/86f504e1-5a41-4a12-9683-b6e6b9672111)
+uses a mission-style headline with two-color emphasis: the second line
+("privacy and digital freedom") switches to the brand purple while the first
+line stays near-black. Body copy is constrained to a narrow ~560px column,
+centered. The nav keeps the account CTA (filled purple pill "Create a free
+account") even on content pages.
+
+### 5. Nav CTA mirrors hero CTA
+In every capture the top-right nav carries the same conversion action as the
+hero: Retool ("Start for free", blue), Figma ("Get started for free", black),
+Mural ("Sign up, free forever", black), Passionfroot ("Get access →", black),
+Proton ("Create a free account", purple). Secondary auth ("Log in"/"Sign in")
+sits to its left as plain text or a ghost button.
+
+### Copy style
+- Headlines are 3–8 words, benefit- or vision-led, sentence case, often ending
+  with a period (Figma, Passionfroot-adjacent style).
+- Subheads are one sentence, ~12–20 words, in a muted gray.
+- CTA labels lead with a verb and de-risk: "Start for free", "Get started for
+  free", "Sign up, free forever". "Free" appears in almost every primary CTA.
+
+### Visual rhythm
+- Generous vertical padding: headline blocks float in whitespace roughly 2–3×
+  the headline height above and below.
+- One accent color per hero; buttons are solid fills with high contrast
+  against the field (white-on-blue, black-on-yellow, white-on-black).
+- Rounded-rectangle / pill buttons everywhere; no outlined primary CTAs.
+
+## Design rules derived
+
+**Do**
+- Lead with one headline (3–8 words), one subhead (≤20 words), one primary
+  CTA. Center-stack unless pairing with a form or screenshot.
+- Repeat the primary CTA verbatim in the top-right of the nav.
+- Include a risk-reducer in or near the CTA ("free", "no credit card",
+  "free forever").
+- If capturing email in the hero, use a single input joined to the button as
+  one visual unit.
+- Pick one saturated brand color and let it dominate either the background
+  (Figma, Mural, Analogue) or the button (ClickUp, Retool, Proton) — not both.
+- Keep decorative product imagery tilted/cropped at the edges so the copy
+  column stays clean (Passionfroot).
+- Constrain hero copy to a readable measure (~50–65ch for subheads).
+
+**Don't**
+- Don't put two competing primary buttons in the hero; a secondary action, if
+  present, should be text or ghost style.
+- Don't ask for more than an email address in a hero form.
+- Don't run headlines longer than two lines at desktop width.
+- Don't layer copy over busy photography — every observed hero uses flat
+  color, subtle texture, or heavily muted imagery behind text.
+
+## Anti-patterns
+
+- **Feature-dump heroes**: cramming bullet lists or 3+ paragraphs above the
+  fold. Top sites defer detail to feature sections.
+- **Vague CTA labels** ("Submit", "Learn more") as the primary action — the
+  observed set is uniformly verb-first and outcome-specific.
+- **Carousel/slider heroes**: absent from all sampled top-tier sites; one
+  static message wins.
+- **Low-contrast buttons**: every sampled CTA passes obvious contrast against
+  its background; avoid tonal (same-hue, low-delta) primary buttons.
+- **Orphaned signup**: hero CTA present but missing from the nav, forcing
+  users to scroll back up after reading — top sites never do this.

package/knowledge/patterns/web/landing-signup.md

@@ -0,0 +1,168 @@
+---
+id: web-landing-signup
+title: "SaaS Landing Page & Signup Page Patterns"
+category: pattern
+platform: web
+tags: [landing, saas, signup, onboarding, forms, product-screenshot]
+sources:
+  - "https://mobbin.com/screens/00877e31-4b84-477f-844f-000bb4b4405e"
+  - "https://mobbin.com/screens/bb369cb4-f7e0-4c16-a0f3-f39e7e4a3adf"
+  - "https://mobbin.com/screens/b840e398-8b41-4259-917a-1f0d989b54a6"
+  - "https://mobbin.com/screens/b8490a12-b5c8-4f88-9a68-7bdbaf4b59ad"
+  - "https://mobbin.com/screens/887269c3-bc0d-4090-aaef-13c4462a1b53"
+  - "https://mobbin.com/screens/bdd15498-8db4-480d-b3b4-eecce6d5317e"
+  - "https://mobbin.com/screens/7d8b276e-b850-40f0-8692-ffe16dde5a8a"
+  - "https://mobbin.com/screens/3605d7a3-481f-4a13-a3be-2c8b8f570037"
+  - "https://mobbin.com/screens/6e15fdd2-969a-42bf-8de9-66735dc04257"
+  - "https://mobbin.com/screens/7bebd01a-1b4b-43e4-a573-6ff2115a3823"
+  - "https://mobbin.com/screens/e2e2434d-ae6c-4354-ac0d-a4b7b4bc82a6"
+  - "https://mobbin.com/screens/9435af96-1fb6-46c7-9b67-3fd456ccc485"
+  - "https://mobbin.com/screens/e23573ed-428f-4c2b-9a0d-dde328c1516e"
+  - "https://mobbin.com/screens/afda2628-1eab-42c5-9802-2247692a2cc3"
+updated: 2026-07-08
+---
+
+# SaaS Landing Page & Signup Page Patterns
+
+Derived from Mobbin web screens: landing pages from StackAI, Laravel Cloud,
+Coda, Airtable, Linear, OpenPhone, and Wrangle; signup pages from OpenAI
+Platform, Vercel, Intercom, Amie, Faire, and Tally (July 2026 research pass).
+
+## Part A — SaaS landing pages with product screenshot
+
+### Observed patterns
+
+**1. The dominant recipe: centered headline stack + big screenshot below the fold line.**
+[OpenPhone](https://mobbin.com/screens/bdd15498-8db4-480d-b3b4-eecce6d5317e)
+("The all-in-one phone system for teams"),
+[Airtable](https://mobbin.com/screens/b8490a12-b5c8-4f88-9a68-7bdbaf4b59ad),
+[StackAI](https://mobbin.com/screens/00877e31-4b84-477f-844f-000bb4b4405e)
+("From process to AI agent, in minutes") and
+[Wrangle](https://mobbin.com/screens/7d8b276e-b850-40f0-8692-ffe16dde5a8a)
+all center a 2-line headline, 1–2 line subhead, CTA row, then a large
+framed product screenshot that bleeds off the bottom of the viewport. The
+partially-cropped screenshot acts as a scroll cue.
+
+**2. Left-aligned variant for denser copy.**
+[Laravel Cloud](https://mobbin.com/screens/bb369cb4-f7e0-4c16-a0f3-f39e7e4a3adf)
+(deep blue gradient, white "Get started" + outlined "Contact sales", 3-line
+benefit subhead including "$5 of free usage credit") and
+[Coda](https://mobbin.com/screens/b840e398-8b41-4259-917a-1f0d989b54a6)
+(peach background, black "Get started for free" + white "Contact sales") use
+left-aligned headline blocks; Coda still centers its screenshot below.
+[Linear](https://mobbin.com/screens/887269c3-bc0d-4090-aaef-13c4462a1b53)
+left-aligns "The product development system for teams and agents" on
+near-black, with the app screenshot showing a real issue view plus an
+in-screenshot agent panel — the screenshot itself tells the product story.
+
+**3. CTA pairing logic.**
+Primary + secondary appear together and encode the GTM motion:
+"Get a Demo" + "Try It Now" (StackAI), "Get started" + "Contact sales"
+(Laravel Cloud, Coda), "Get started for free" + "Book demo" (Airtable).
+OpenPhone uses a single black "Try for free →". Primary is always the
+filled, higher-contrast button on the left.
+
+**4. Screenshot treatment.**
+Screenshots are real UI, lightly framed: rounded corners, thin border or
+laptop-bezel crop (StackAI), soft glow/gradient halo (Wrangle's lavender
+field, Laravel Cloud's floating card with "Watch demo" play chip overlaid).
+Airtable overlays an AI prompt bar on top of the shot to dramatize the
+feature. Backgrounds tint toward brand color; screenshots stay light-theme
+readable even on dark pages (Linear excepted — dark-on-dark, consistent
+with its brand).
+
+**5. Announcement pills.**
+Wrangle floats a small rounded changelog pill above the headline
+("Jan 20: Introducing Search by Calibration Profile") — a common slot for
+news without disturbing the hero.
+
+### Design rules — landing
+
+- Order: nav → (optional announcement pill) → headline → subhead → CTA row →
+  product screenshot. Let the screenshot crop at the fold.
+- Headline ≤ 2 lines; make a category claim ("The all-in-one…", "The product
+  development system…").
+- Pair one filled primary CTA with one quieter secondary; map labels to
+  self-serve vs sales motion.
+- Frame screenshots with rounded corners + border/glow; never paste an
+  unframed rectangle onto the page.
+- Show real, populated product UI — believable data, no lorem ipsum.
+- Keep the hero background flat or a single gradient; reserve saturation for
+  either background or buttons.
+
+## Part B — Signup pages with minimal form
+
+### Observed patterns
+
+**1. Radical minimalism: one centered card, 1–3 fields, no marketing.**
+[Vercel](https://mobbin.com/screens/6e15fdd2-969a-42bf-8de9-66735dc04257):
+"Sign up for Vercel" + one email field + black "Continue with Email" + a
+link to "Other Sign Up options".
+[OpenAI Platform](https://mobbin.com/screens/3605d7a3-481f-4a13-a3be-2c8b8f570037):
+logo, "Tell us about you", first/last name side-by-side, green Continue,
+terms microcopy underneath.
+[Intercom](https://mobbin.com/screens/7bebd01a-1b4b-43e4-a573-6ff2115a3823)
+asks a single question per screen ("Your full name") with a full-width black
+Continue and a thin progress bar under the header.
+[Tally](https://mobbin.com/screens/e23573ed-428f-4c2b-9a0d-dde328c1516e) and
+[Faire](https://mobbin.com/screens/9435af96-1fb6-46c7-9b67-3fd456ccc485)
+cap at three stacked fields (name(s) + password) with helper text
+("8 characters minimum") under the password field.
+
+**2. Value restated at the moment of commitment.**
+[Intercom's email step](https://mobbin.com/screens/afda2628-1eab-42c5-9802-2247692a2cc3)
+headlines the form with "Start your 14-day free trial. No credit card
+needed." — the risk-reducer lives on the signup page itself, not only the
+landing page. Its Continue button stays visibly disabled (gray) until the
+email is valid, with "Continue with Google" as an alternative below an "or"
+divider.
+
+**3. Progressive disclosure over long forms.**
+Intercom's stepper (progress bar + one field per screen) and OpenAI's
+name-only step show top products split signup into micro-steps rather than
+one long form. Tally's step is explicitly framed as finishing: "Tell us a
+little about yourself — add your name and create a password to finish
+setting up."
+
+**4. Personality is allowed but optional.**
+[Amie](https://mobbin.com/screens/e2e2434d-ae6c-4354-ac0d-a4b7b4bc82a6)
+uses conversational lowercase labels ("what's your email? (only Gmail for
+now)", "we also love nicknames!") with inline tips — playful, but still just
+two fields and one Continue button.
+
+**5. Chrome is stripped.**
+All signup screens remove the marketing nav; at most a logo (centered or
+top-left) and a single escape link ("Sign in" top-right on Intercom/Vercel).
+Legal consent is one line of small gray text with inline links, under the
+button (OpenAI: "By clicking 'Continue', you agree to our Terms…").
+
+### Design rules — signup
+
+- One column, centered, max ~400px wide; logo above; page background plain
+  white/neutral.
+- Ask 1–3 fields per screen; prefer multiple micro-steps to one long form.
+- Label fields above inputs; put format hints as small helper text below.
+- Full-width Continue button in brand/near-black; disable until valid.
+- Offer one OAuth alternative separated by "or" — don't stack five providers
+  above the fold (Vercel tucks extras behind "Other Sign Up options").
+- Restate the offer/risk-reducer as the form headline ("14-day free trial.
+  No credit card needed.").
+- Show progress (bar or step count) when signup spans multiple screens.
+- Keep terms consent as passive microcopy under the CTA, not a checkbox,
+  unless legally required (contrast: marketing consent checkboxes belong in
+  footers/newsletters).
+
+## Anti-patterns
+
+- **Marketing on the signup page**: sidebars of testimonials, feature lists,
+  or nav menus — every sampled signup screen is empty except the form.
+- **Long monolithic forms** (name + email + password + company + phone +
+  role on one screen); leaders split these across steps.
+- **Password rules revealed only on error** — Faire/Tally show requirements
+  up front as helper text.
+- **Landing screenshots that are fake or empty-state UI** — sampled leaders
+  show populated, plausible workspaces.
+- **Two equally-weighted hero CTAs** — the primary is always visually
+  dominant; demo/sales is secondary.
+- **Hiding "Sign in"** from returning users on signup pages; Vercel and
+  Intercom keep it top-right.