ui-ux-master 1.2.1 → 1.5.0

package/references/brand-method-conversion-simplicity.md

@@ -0,0 +1,276 @@
+# Brand Method: Conversion Simplicity
+
+Use this skill when building for subscription products, fintech signups, mobile app downloads, SaaS trials, waitlists, or any context where the entire page exists to convert one type of visitor to one action.
+
+Reference brands: Netflix, PayPal, Uber, Google (signup), Instagram (signup), LinkedIn (signup), Dropbox, Stripe, Linear.
+
+---
+
+## When to Apply This Method
+
+Apply Conversion Simplicity when:
+- There is one primary user action: sign up, start trial, download, subscribe, join waitlist.
+- The user is a new visitor evaluating whether to commit.
+- Reducing friction is more valuable than providing exhaustive information.
+- The funnel is: land → understand → trust → act.
+
+Do not apply when:
+- Users need to browse or discover first (use Card-Based Discovery).
+- Multiple stakeholders are evaluating a complex product (use Enterprise Trust Hub).
+- The product experience is the selling point (use Product Cinema or Editorial Brand World).
+
+---
+
+## Layout Structure
+
+### Above the Fold (the only thing that matters)
+- **One promise**: the most compelling, specific outcome the user gets. Not a feature list.
+- **One primary CTA**: email signup, "Start Free Trial", "Get the App", "Join Waitlist". Nothing else.
+- **Visual proof**: product screenshot, phone mockup, short testimonial, or simple illustration.
+- **Objection handler**: one line of trust copy beneath the CTA ("No credit card required", "Free forever plan", "Cancel anytime").
+
+### Page Flow (in order)
+1. **Hero** — promise + CTA + objection handler.
+2. **Social proof** — trusted by N users/companies, logo strip, star rating aggregate.
+3. **Core benefit blocks** — 3 benefits max. Each: icon, one-line headline, one supporting sentence.
+4. **Product proof** — screenshot, animation, or short demo video showing the product working.
+5. **Testimonials** — 3 specific quotes with name, title, company, photo.
+6. **FAQ** — 5-7 questions answering the top objections (pricing, commitment, compatibility).
+7. **Final CTA** — repeat the hero CTA with the same promise, no new information.
+
+### Navigation
+- Minimal: logo left, 2-3 links max (Features, Pricing, Login), primary CTA right.
+- Do not provide a full mega-nav — it gives users escape routes.
+- No sticky nav unless it includes the CTA.
+
+### Footer
+- Minimal. Legal links, privacy, terms, social icons. No sitemap.
+
+---
+
+## Color Scheme
+
+### Primary Palette Patterns
+
+**SaaS / Startup (Stripe, Linear, Vercel)**
+- Background: `#FFFFFF` or dark `#0A0A0A` / `#111111`
+- Primary: brand color (`#635BFF` Stripe purple, `#5E6AD2` Linear, `#000000` Vercel)
+- Surface: `#F4F4F5` (light) or `#1C1C1E` (dark)
+- Text: `#0F0F0F` (light) or `#FAFAFA` (dark)
+- Secondary text: `#71717A`
+- CTA: brand primary, white text — maximum contrast
+- CTA hover: darken 10%
+- Accent: gradient (`#635BFF → #0074D9`) for premium SaaS feel
+
+**Fintech / Payments (PayPal, Stripe)**
+- Background: `#FFFFFF`
+- Primary: `#0070BA` (PayPal blue) or `#635BFF`
+- Trust accent: `#00457C` (darker blue, for security copy)
+- CTA: primary blue, white text
+- Success: `#007B5E`
+
+**Consumer App (Netflix, Uber, Instagram)**
+- Netflix: Background `#000000`, accent `#E50914` (red), text white
+- Uber: Background `#000000` or `#FFFFFF`, monochrome, CTA black-on-white or white-on-black
+- Instagram: gradient CTA on white background, or gradient hero
+
+**Minimal / Developer (Vercel, GitHub, Linear)**
+- Background: `#000000` or `#FAFAFA`
+- Text: inverse of background
+- Accent: 1 brand color or white
+- No gradients unless minimal and purposeful
+
+### Rules
+- CTA button must be the highest-contrast interactive element on the page.
+- Social proof logos: grayscale — they support, not compete.
+- Testimonial sections: slightly different background (`#F9FAFB`) to create visual rhythm.
+- Never use two competing CTAs in the hero (no "Sign Up" + "Learn More" — pick one).
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| Hero headline | 40-72px | 700-900 | Bold, specific promise |
+| Hero subheadline | 18-22px | 400 | Supporting detail, max 2 lines |
+| Section headline | 28-36px | 600-700 | |
+| Benefit headline | 18-20px | 600 | |
+| Benefit body | 15-16px | 400 | 1 sentence |
+| Testimonial quote | 18-22px | 400-500 | Italic optional |
+| Testimonial attribution | 14px | 500 | Name, title, company |
+| FAQ question | 16-18px | 600 | |
+| FAQ answer | 15-16px | 400 | |
+| CTA | 15-18px | 600 | |
+| Trust copy (under CTA) | 12-14px | 400 | Muted color |
+
+### Font Pairings
+| Context | Font |
+|---|---|
+| SaaS / startup | Inter, Plus Jakarta Sans, or Geist |
+| Fintech | Helvetica Neue, DM Sans, or Lato |
+| Consumer app | Circular, Nunito, or Poppins |
+| Developer tool | Geist, JetBrains Mono (for code), Inter |
+
+### Rules
+- Hero headline: the most important thing on the page. It must be large and specific.
+- Avoid vague headlines ("The future of work") — use outcomes ("Ship 3× faster with automated deploys").
+- Trust copy under CTA: 12-14px, muted color — supportive, not competing.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Trust copy gap from CTA |
+| `--space-sm` | 8px | Icon to text, badge padding |
+| `--space-md` | 16-20px | Component padding |
+| `--space-lg` | 32-40px | Between sections within same topic |
+| `--space-xl` | 64-80px | Between major page sections |
+| `--space-2xl` | 96-128px | Hero padding, final CTA section |
+
+- Hero: generous padding top and bottom (80-128px) — breathing room signals confidence.
+- Benefit blocks: equal spacing, grid alignment — visual consistency conveys professionalism.
+- FAQ: no extra spacing — tight, scannable, no wasted room.
+
+---
+
+## Motion and Interaction
+
+### Hero CTA
+- Button: no over-engineered animation. Hover: darken 8-10%, scale `1.02`, transition 150ms.
+- On submit: show loading spinner inside button, disable button, replace text with "…".
+- On success: replace CTA area with success message ("Check your email!" or redirect).
+- On error: show inline error below CTA, shake animation on button (3-frame, 200ms).
+
+### Product Preview
+- Short looping video (10-15s, muted, no controls) OR animated GIF OR screenshot with subtle entrance animation.
+- `prefers-reduced-motion`: replace with static screenshot.
+- Load above fold immediately — this is conversion-critical content.
+
+### FAQ Accordion
+- Height transition: `max-height` 0 → auto equivalent, 200ms ease.
+- Icon rotates 90° or 45° when open.
+- Only one open at a time (optional — single-expand pattern).
+
+### Scroll Animations
+- Keep minimal: fade-in of benefit blocks, testimonials. Duration 300-500ms.
+- Never use scroll animations on the CTA — users may be scrolling to reach it.
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Hero: headline 28-36px. CTA: full-width button. Benefit blocks: single column. Testimonials: horizontal scroll or single-column. Nav: logo + CTA only (no extra links). |
+| Tablet 768px | Hero: headline 36-48px. 2-column benefits. |
+| Desktop 1024px | Full layout. Side-by-side hero text + product image/video. |
+| Wide 1440px+ | Max-width 1100-1200px centered. Hero may use split layout at 1440px+. |
+
+- Mobile CTA: full-width button, at least 48px height, pinned to viewport if possible.
+- Mobile: no horizontal scroll except testimonials carousel.
+
+---
+
+## Accessibility Requirements
+
+- CTA button: descriptive label — not just "Sign Up" but "Start your free trial" or match the specific offer.
+- Email input: always a `<label>`. `type="email"`, `autocomplete="email"`, `inputmode="email"`.
+- Trust copy under CTA: `role="note"` or just visible text — no hidden aria required.
+- Product video: `<video>` with `aria-label`, `loop`, `muted`, no `autoplay` without `playsinline`; poster image required; `prefers-reduced-motion` disables autoplay.
+- Testimonial images: `alt="[Person Name], [Title] at [Company]"`.
+- FAQ accordion: `<button aria-expanded="true/false" aria-controls="faq-answer-id">`. Answer `<div id="faq-answer-id">`.
+- Social proof logos: `alt="[Company Name]"`.
+- All text: 4.5:1 contrast minimum. CTA text on brand button must pass.
+- Focus: CTA is the first logical focus target after the hero heading.
+
+---
+
+## UX Principles for This Method
+
+1. **One job, one CTA.** Every element on the page exists to support the single conversion event.
+2. **Answer objections before they form.** "No credit card" under the CTA is worth more than a features section.
+3. **Specificity converts.** "Save 5 hours/week on reporting" beats "Save time." Name the number, name the outcome.
+4. **Social proof is not decoration.** Real names, real companies, specific outcomes in quotes.
+5. **Remove escape routes.** Minimal nav means fewer ways to leave the page without converting.
+6. **Repeat the CTA.** Users need to see it multiple times before committing — top, middle, and bottom of page.
+7. **Speed is a conversion feature.** A 1-second delay reduces conversions. Image optimization, no-blocking scripts, instant form feedback.
+
+---
+
+## Component Specs
+
+### Hero CTA Button
+```
+Background: brand primary (max contrast)
+Text: white or high-contrast inverse
+Padding: 14-16px 32-40px
+Border-radius: 6px (modern) | 24px (friendly) | 2px (serious/fintech)
+Font: 16-18px, weight 600
+Min-height: 48-52px
+Width: auto (desktop) | 100% (mobile)
+Transition: background 150ms, transform 120ms
+```
+
+### Trust Copy (under CTA)
+```
+Font: 12-13px
+Color: var(--text-muted)
+Margin-top: 10-12px
+Icon: optional checkmark or lock icon (14px)
+Example: "✓ No credit card required  ·  ✓ Cancel anytime"
+```
+
+### Testimonial Card
+```
+Background: white (on light) or var(--surface) (on dark)
+Border: 1px solid var(--border)
+Border-radius: 12px
+Padding: 24-28px
+Quote: 17-20px, weight 400, font-style italic optional
+Attribution: 14px, weight 500, flex row with avatar
+Avatar: 36-40px, border-radius 50%
+```
+
+### FAQ Item
+```
+Border-bottom: 1px solid var(--border)
+Trigger button: full width, text-left, 17-18px, weight 600, padding 16px 0
+Chevron icon: right-aligned, 16px, rotates 180° on open, transition 200ms
+Answer: 15-16px, text-secondary, padding 0 0 16px, line-height 1.6
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not add a full navigation with 8+ links — it gives users too many ways to leave.
+- Do not use vague CTAs like "Learn More" as the primary action — users need to know what happens next.
+- Do not put pricing objections in a way that makes pricing seem scary — be honest and frame value first.
+- Do not require more than an email (and optionally a name) for the first signup step.
+- Do not use dark patterns: pre-checked marketing consent, hidden trial-to-paid, confusing cancellation.
+- Do not show 10 testimonials — 3 specific, credible testimonials outperform 10 generic ones.
+- Do not use countdown timers unless the offer genuinely expires.
+- Do not make the page long before you've earned the scroll — the best Conversion Simplicity pages are short.
+
+---
+
+## QA Checklist
+
+- [ ] Hero headline is specific and outcome-focused — not generic.
+- [ ] CTA is the visually dominant interactive element.
+- [ ] Trust copy (no credit card / cancel anytime) visible below CTA.
+- [ ] Email input has `<label>` and correct input type.
+- [ ] CTA button has descriptive accessible label.
+- [ ] Form error message shown inline, associated with input via `aria-describedby`.
+- [ ] Product video: muted, poster, `prefers-reduced-motion` fallback.
+- [ ] Social proof logos grayscale.
+- [ ] FAQ accordion has `aria-expanded` and `aria-controls`.
+- [ ] Final CTA section repeats the hero CTA.
+- [ ] Mobile: CTA full-width, at least 48px height.
+- [ ] No more than 3 links in nav.
+- [ ] Page LCP ≤ 2.5s — hero content must be server-rendered or critically preloaded.
+- [ ] No dark patterns: no pre-checked marketing consent, no hidden costs, no fake urgency.

package/references/brand-method-ecosystem-bundling.md

@@ -0,0 +1,263 @@
+# Brand Method: Ecosystem Bundling
+
+Use this skill when building for multi-product platforms, product suites, or brands where the value is in the combination of products, not a single product. The goal is to cross-sell, upsell, and create lock-in through integrated value.
+
+Reference brands: Microsoft 365, Adobe Creative Cloud, Apple (hardware + software + services), Google (Search + Maps + Workspace + Cloud), Sony (PlayStation + Electronics + Entertainment), Xbox (Game Pass + Console + Cloud).
+
+---
+
+## When to Apply This Method
+
+Apply Ecosystem Bundling when:
+- The brand has 3+ products that work better together than separately.
+- The primary value proposition is integration, continuity, or bundled savings.
+- The user arrives to find "the right plan" or "what's included."
+- The goal is to move a user from one product to the full suite.
+
+Do not apply when:
+- The brand has a single flagship product (use Product Cinema).
+- The user wants to accomplish one specific task (use Utility Command Center or Conversion Simplicity).
+- The brand is enterprise-only (use Enterprise Trust Hub).
+
+---
+
+## Layout Structure
+
+### Hero
+- Not a single product — the ecosystem or suite value is the headline.
+- Example: "One subscription. Everything creative." (Adobe) or "More with Microsoft 365."
+- Hero visual: collage of product interfaces, device ecosystem, or abstract "connected" illustration.
+- Primary CTA: "See all plans", "Get the bundle", or "Start free trial" (most inclusive plan).
+
+### Product Overview Section
+- Grid or horizontal scroll of product cards: each card = one product in the ecosystem.
+- Card: product icon, product name, 1-line description, "Learn more" link.
+- Group products by category if 6+: "Creative Tools", "Video + Audio", "Web + Cloud."
+
+### Bundle / Plan Comparison
+- Pricing table: 2-4 columns (Individual, Team, Business, Enterprise).
+- Each column: plan name, price, primary CTA, included products (checked or listed).
+- Highlight recommended plan: border, "Most Popular" badge, slightly elevated.
+- Toggle: Monthly / Annual (with savings callout for annual).
+- Scrollable on mobile: sticky column headers.
+
+### Integration Showcase
+- Diagram or animation showing how products connect.
+- Example: "Edit in Photoshop → Preview in XD → Export to After Effects."
+- Step-based or flowchart layout.
+
+### Individual Product Deep-Dives
+- Accordion or tabbed section: each tab = one product, with key features and screenshot.
+- Or: separate product pages linked from the overview cards.
+
+### CTA Section
+- "Start with [Product A]" + "Or explore the full suite."
+- Include a plan recommendation quiz if 4+ plans (CTA: "Help me choose").
+
+---
+
+## Color Scheme
+
+### Palette Patterns
+
+**Creative Suite (Adobe)**
+- Background: `#1B1B1B` dark or `#FFFFFF`
+- Primary: `#FF0000` (Adobe red) with product-specific colors as accents
+- Surface: `#292929` (dark) or `#F8F8F8` (light)
+- Text: `#FFFFFF` (dark) or `#1A1A1A` (light)
+- Product colors: each product has signature accent (Photoshop blue, Illustrator orange, Premiere purple)
+- CTA: product primary on dark, or brand red on light
+
+**Tech Suite (Microsoft)**
+- Background: `#FFFFFF`
+- Primary: `#0078D4` (M365 blue)
+- Product palette: each Microsoft product uses brand colors (Teams purple, Excel green, Word blue, etc.)
+- Surface: `#F4F6F9`
+- Text: `#1A1A1A`
+- Pricing highlight: `#0078D4` (primary plan)
+
+**Gaming Ecosystem (Xbox)**
+- Background: `#000000`
+- Primary: `#107C10` (Xbox green)
+- Surface: `#1A1A1A`
+- Text: `#FFFFFF`
+- Accent: green, used for "included" checkmarks, active state, pricing CTA
+
+**Consumer Ecosystem (Apple)**
+- Background: `#FFFFFF` (light) or `#000000` (dark sections)
+- Text: `#1D1D1F` / `#F5F5F7`
+- Product accents: per-product marketing colors (used sparingly)
+- CTA: `#0071E3` (Apple blue)
+
+### Rules
+- Each product in the ecosystem may have its own accent color — use in product cards/icons only.
+- The suite-level brand color dominates — product accents are subordinate.
+- Pricing table: highlight column must have clear visual separation (border, elevation, background) — not just a color change.
+- Never use 6+ colors on the same screen — product accents appear only in dedicated product sections.
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| Suite headline | 40-64px | 600-700 | Ecosystem promise |
+| Product name (card) | 16-18px | 600 | |
+| Product description | 14-15px | 400 | 1-2 lines |
+| Plan name | 20-24px | 700 | |
+| Price | 32-48px | 700 | Tabular numerals |
+| Price period | 14-16px | 400 | "/month" or "/year" |
+| Feature list | 14-15px | 400 | Checkmark + text |
+| CTA | 14-16px | 600 | |
+| Savings badge | 11-12px | 700 | All-caps: "SAVE 40%" |
+
+### Font Pairings
+| Context | Font |
+|---|---|
+| Tech / enterprise suite | Segoe UI, Inter, or system font |
+| Creative suite | Adobe Clean, or Inter |
+| Gaming | custom brand font or Rajdhani, Barlow Condensed |
+| Consumer tech | SF Pro (system) or Inter |
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Checkmark list gaps |
+| `--space-sm` | 8px | Product icon margins |
+| `--space-md` | 16px | Card padding |
+| `--space-lg` | 24-32px | Between product cards |
+| `--space-xl` | 48-64px | Between page sections |
+| `--space-2xl` | 80-96px | Hero, pricing sections |
+
+- Pricing table: column padding 24-32px. Row: 12-16px vertical padding per row.
+- Product card grid: 16-24px gutter. Cards equal height via CSS grid `align-items: stretch`.
+
+---
+
+## Motion and Interaction
+
+### Pricing Toggle (Monthly/Annual)
+- Toggle: smooth slide, 200ms ease. Active state clearly indicated.
+- Price change: number crossfade or count animation (300ms) — never a jarring instant swap.
+- Savings badge: appears on Annual toggle with fade-in.
+
+### Plan Comparison Table
+- "Included" checkmark: SVG check, brand color. "Not included": dash or X, muted color.
+- Hover row: subtle highlight `rgba(0,0,0,0.04)`.
+- Sticky column headers on vertical scroll.
+
+### Product Cards
+- Hover: lift shadow, 150ms.
+- Click: navigate to product detail section or page.
+
+### Integration Diagram
+- Step-by-step animation on scroll: each connection draws itself (SVG stroke animation, 400ms per step).
+- `prefers-reduced-motion`: show all steps immediately with no animation.
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Product cards: 2×2 grid or single column. Pricing table: horizontal scroll, sticky plan names. Plan toggle: full-width. |
+| Tablet 768px | Product cards: 3-column. Pricing: 2-3 columns visible. |
+| Desktop 1024px | Full pricing table. Side-by-side product cards. |
+| Wide 1440px+ | Max-width 1200px. Pricing table centered. |
+
+- Mobile pricing table: allow horizontal scroll — show 1.5 columns to hint at more.
+- Mobile: sticky "Get [Plan Name]" CTA at bottom of pricing page.
+
+---
+
+## Accessibility Requirements
+
+- Pricing table: use `<table>` with `<th scope="col">` for plan names, `<th scope="row">` for feature names.
+- "Included" checkmark: `aria-label="Included"` not just a visual check icon.
+- "Not included": `aria-label="Not included"`.
+- Plan toggle (monthly/annual): `<button role="switch" aria-checked="true/false">` or `<input type="radio">` with `<fieldset>` and `<legend>`.
+- Highlighted plan: `aria-describedby` linking to "Most Popular" label.
+- Product cards: each card is a link with a descriptive accessible name including product name.
+- Savings badge: always a text element, not background-only.
+- Price: screen reader announces full price ("12 dollars per month, billed annually").
+
+---
+
+## UX Principles for This Method
+
+1. **Sell the why before the what.** "One place for everything creative" converts before the product list does.
+2. **Comparison tables are trust builders.** Transparent feature-by-feature comparison signals confidence.
+3. **Recommend a plan.** Users are overwhelmed by 4+ plans. Highlight one as "Best for most people."
+4. **Individual entry points.** Let users enter through a single product and discover the suite value.
+5. **Bundle savings must be explicit.** Show the per-product cost vs. bundle cost. The math must be obvious.
+6. **Never force the full suite.** Some users only need one product — serve them well and upsell contextually.
+
+---
+
+## Component Specs
+
+### Pricing Column (Recommended)
+```
+Border: 2px solid var(--primary)
+Border-radius: 12px
+Background: white (light) or var(--surface-raised) (dark)
+Box-shadow: 0 8px 32px rgba(0,0,0,0.12)
+Badge: "Most Popular" — absolute top-center, background var(--primary), 11px all-caps
+Price: 40-48px, weight 700
+Period: 14px, weight 400, text-secondary
+CTA: filled primary button, full-width
+```
+
+### Product Card (Ecosystem Overview)
+```
+Background: var(--surface)
+Border: 1px solid var(--border)
+Border-radius: 12px
+Padding: 24px
+Icon: 40-48px, product accent color
+Product name: 17-18px, weight 600, margin-top 12px
+Description: 14px, text-secondary, 2-line clamp
+"Learn more" link: 13-14px, brand color, arrow icon
+```
+
+### Plan Toggle
+```
+Container: pill shape, background var(--surface)
+Active side: filled pill, brand color, white text, 200ms transition
+Labels: "Monthly" / "Annually  SAVE 40%"
+Savings badge: inline, accent background, bold, 10-11px all-caps
+Height: 36-40px, border-radius 20px
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not show all plans without a recommendation — choice overload kills conversion.
+- Do not hide savings — if annual is cheaper, show the math prominently.
+- Do not use features list jargon that non-technical buyers won't understand.
+- Do not require users to navigate 4 levels deep to find what's in a plan.
+- Do not use different interaction patterns for the same action across product cards.
+- Do not present the pricing table on mobile without horizontal scroll — broken tables are unusable.
+- Do not use 6+ product accent colors simultaneously — visual chaos.
+
+---
+
+## QA Checklist
+
+- [ ] Pricing table uses semantic `<table>` with scoped headers.
+- [ ] Checkmarks have `aria-label="Included"`.
+- [ ] Plan toggle accessible as `role="switch"` or radio group.
+- [ ] Recommended plan visually distinct and labeled.
+- [ ] Monthly/Annual toggle updates price display without page reload.
+- [ ] Savings amount shown on annual toggle.
+- [ ] Mobile pricing: horizontal scroll with 1.5 column hint.
+- [ ] Product cards link to individual product sections/pages.
+- [ ] Integration diagram has text fallback for screen readers.
+- [ ] `prefers-reduced-motion`: integration diagram shows all steps immediately.
+- [ ] All product icons/images have `alt` text.
+- [ ] Price announced correctly to screen readers.