{
  "version": 1,
  "name": "Turn expertise into an offer",
  "url": "https://swipefile.design/board/turn-expertise-into-an-offer/",
  "markdown_url": "https://swipefile.design/board/turn-expertise-into-an-offer/notes.md",
  "json_url": "https://swipefile.design/board/turn-expertise-into-an-offer/data.json",
  "pdf_url": "https://swipefile.design/board/turn-expertise-into-an-offer/export.pdf",
  "reference_count": 11,
  "unavailable_count": 1,
  "guidance": "Use these references for design principles. Follow the project brief and use original branding, content, and imagery. Captures document a particular date; they do not verify current product behavior.",
  "references": [
    {
      "slug": "personal-dan-mall",
      "name": "Dan Mall",
      "kind": "inspiration",
      "archetype": "Personal Expert",
      "summary": "A cinematic portrait, oversized name, and flowers make a design educator feel immediately recognizable.",
      "use_for": "Combining a specific audience promise with newsletter entry points, teaching content, and coaching. The copy addresses career problems before presenting expertise. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://danmall.com/",
      "reference_url": "https://swipefile.design/ref/personal-dan-mall/",
      "screenshot_url": "https://swipefile.design/_astro/preview.CGsF2Ptd.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.BA3pyinh.webp",
      "captured": "2026-09-05",
      "capture_scope": "excerpt",
      "provenance": "live",
      "tags": [
        "personal-website",
        "expert",
        "designer",
        "educator",
        "brand"
      ],
      "patterns": [
        "Personal websites",
        "Lead generation"
      ],
      "design_notes": {
        "mood": "Designer Educator Brand. A cinematic portrait, oversized name, and flowers make a design educator feel immediately recognizable.",
        "colors": "Near-black, bright pink, white, and photographic floral colors.",
        "typography": "Very bold condensed display type paired with more expressive italic supporting lines.",
        "layout": "Portrait-led opening followed by an audience problem statement, biography, proof, and learning paths.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Layered flowers and photography create depth around the name.",
        "dont": "Keep offers from covering the face or headline; retain one clearly prioritized next step."
      },
      "recreation_prompt": "# Design reference: Dan Mall\nSource: https://danmall.com/\nSwipefile reference: https://swipefile.design/ref/personal-dan-mall/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: a page excerpt. Do not infer unseen sections or interactions.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Designer Educator Brand. A cinematic portrait, oversized name, and flowers make a design educator feel immediately recognizable.\n- colors: Near-black, bright pink, white, and photographic floral colors.\n- typography: Very bold condensed display type paired with more expressive italic supporting lines.\n- layout: Portrait-led opening followed by an audience problem statement, biography, proof, and learning paths.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Layered flowers and photography create depth around the name.\n- dont: Keep offers from covering the face or headline; retain one clearly prioritized next step.\n\nUseful for: Combining a specific audience promise with newsletter entry points, teaching content, and coaching. The copy addresses career problems before presenting expertise. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-josh-comeau",
      "name": "Josh Comeau",
      "kind": "inspiration",
      "archetype": "Personal Educator",
      "summary": "A playful illustrated header leads into an exceptionally readable programming publication.",
      "use_for": "Building trust through useful free tutorials with an obvious Courses route. Category and popular-content links give readers several relevant starting points. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://www.joshwcomeau.com/",
      "reference_url": "https://swipefile.design/ref/personal-josh-comeau/",
      "screenshot_url": "https://swipefile.design/_astro/preview.fDAfXqvS.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.UxEz2L3y.webp",
      "captured": "2026-09-05",
      "capture_scope": "page",
      "provenance": "live",
      "tags": [
        "personal-website",
        "educator",
        "teaching-first",
        "website"
      ],
      "patterns": [
        "Personal websites",
        "Content & media"
      ],
      "design_notes": {
        "mood": "Teaching-First Website. A playful illustrated header leads into an exceptionally readable programming publication.",
        "colors": "White, sky blue, dark text, and small pink-purple accents.",
        "typography": "Readable article headings and generous paragraphs, supported by compact uppercase section labels.",
        "layout": "A broad article stream with a narrower discovery sidebar under an illustrated banner.",
        "motion": "The header exposes an edit control for its generative art; keep this optional beside the reading experience.",
        "texture": "Cloud-like shapes and editable generative artwork soften the technical material.",
        "dont": "Do not let playful decoration compete with article readability or course discovery."
      },
      "recreation_prompt": "# Design reference: Josh Comeau\nSource: https://www.joshwcomeau.com/\nSwipefile reference: https://swipefile.design/ref/personal-josh-comeau/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\n\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Teaching-First Website. A playful illustrated header leads into an exceptionally readable programming publication.\n- colors: White, sky blue, dark text, and small pink-purple accents.\n- typography: Readable article headings and generous paragraphs, supported by compact uppercase section labels.\n- layout: A broad article stream with a narrower discovery sidebar under an illustrated banner.\n- motion: The header exposes an edit control for its generative art; keep this optional beside the reading experience.\n- texture: Cloud-like shapes and editable generative artwork soften the technical material.\n- dont: Do not let playful decoration compete with article readability or course discovery.\n\nUseful for: Building trust through useful free tutorials with an obvious Courses route. Category and popular-content links give readers several relevant starting points. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-femke",
      "name": "Femke",
      "kind": "inspiration",
      "archetype": "Personal Educator",
      "summary": "A warm personal brand turns a specific career obstacle into clear learning and coaching paths.",
      "use_for": "Leading with the gap between design craft and strategic influence, then offering an audit, a free lesson, and more involved support. Audience-specific choices help visitors self-select. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://femke.design/",
      "reference_url": "https://swipefile.design/ref/personal-femke/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BrjqIwXQ.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.bex80TbS.webp",
      "captured": "2026-09-05",
      "capture_scope": "excerpt",
      "provenance": "live",
      "tags": [
        "personal-website",
        "educator",
        "designer",
        "coaching",
        "funnel"
      ],
      "patterns": [
        "Personal websites",
        "Content & media"
      ],
      "design_notes": {
        "mood": "Designer Coaching Funnel. A warm personal brand turns a specific career obstacle into clear learning and coaching paths.",
        "colors": "Burgundy, blush, pale yellow-green, and white with a deeper blue lower section.",
        "typography": "Confident sans-serif headings with occasional italic emphasis.",
        "layout": "Portrait-and-promise hero, compact credentials, problem cards, audience choices, and testimonials.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Layered portrait cards and small bracket-like accents.",
        "dont": "Avoid vague career promises; explain who each offer serves and what the first step involves."
      },
      "recreation_prompt": "# Design reference: Femke\nSource: https://femke.design/\nSwipefile reference: https://swipefile.design/ref/personal-femke/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: a page excerpt. Do not infer unseen sections or interactions.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Designer Coaching Funnel. A warm personal brand turns a specific career obstacle into clear learning and coaching paths.\n- colors: Burgundy, blush, pale yellow-green, and white with a deeper blue lower section.\n- typography: Confident sans-serif headings with occasional italic emphasis.\n- layout: Portrait-and-promise hero, compact credentials, problem cards, audience choices, and testimonials.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Layered portrait cards and small bracket-like accents.\n- dont: Avoid vague career promises; explain who each offer serves and what the first step involves.\n\nUseful for: Leading with the gap between design craft and strategic influence, then offering an audit, a free lesson, and more involved support. Audience-specific choices help visitors self-select. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-tiago-forte",
      "name": "Tiago Forte",
      "kind": "inspiration",
      "archetype": "Personal Educator",
      "summary": "A personal teaching brand introduces a productivity quiz before presenting books, courses, and free learning resources.",
      "use_for": "Using a self-assessment as an easy first step, then matching visitors to resources at different levels of commitment. The founder introduction ties the offers together. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://fortelabs.com/",
      "reference_url": "https://swipefile.design/ref/personal-tiago-forte/",
      "screenshot_url": "https://swipefile.design/_astro/preview.ft8EBbmx.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DUKjF8SG.webp",
      "captured": "2026-09-05",
      "capture_scope": "excerpt",
      "provenance": "live",
      "tags": [
        "personal-website",
        "educator",
        "expert-led",
        "learning",
        "brand"
      ],
      "patterns": [
        "Personal websites",
        "Content & media"
      ],
      "design_notes": {
        "mood": "Expert-Led Learning Brand. A personal teaching brand introduces a productivity quiz before presenting books, courses, and free learning resources.",
        "colors": "White, orange-red actions, pale gray sections, and deep blue-green accents.",
        "typography": "Clear sans-serif headings with restrained body copy.",
        "layout": "Portrait-and-quiz hero, proof marks, founder biography, product choices, testimonials, and resource cards.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Book covers, video thumbnails, and a natural founder photograph.",
        "dont": "Keep the expert visible and make it clear when visitors are entering a broader business or course platform."
      },
      "recreation_prompt": "# Design reference: Tiago Forte\nSource: https://fortelabs.com/\nSwipefile reference: https://swipefile.design/ref/personal-tiago-forte/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: a page excerpt. Do not infer unseen sections or interactions.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Expert-Led Learning Brand. A personal teaching brand introduces a productivity quiz before presenting books, courses, and free learning resources.\n- colors: White, orange-red actions, pale gray sections, and deep blue-green accents.\n- typography: Clear sans-serif headings with restrained body copy.\n- layout: Portrait-and-quiz hero, proof marks, founder biography, product choices, testimonials, and resource cards.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Book covers, video thumbnails, and a natural founder photograph.\n- dont: Keep the expert visible and make it clear when visitors are entering a broader business or course platform.\n\nUseful for: Using a self-assessment as an easy first step, then matching visitors to resources at different levels of commitment. The founder introduction ties the offers together. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-jonathan-stark",
      "name": "Jonathan Stark",
      "kind": "inspiration",
      "archetype": "Personal Expert",
      "summary": "A focused personal sales letter names the audience’s pricing problem before introducing ways to get help.",
      "use_for": "Turning an expert’s point of view into a daily-email entry point, educational material, and services. The sequence connects a recognizable problem to specific next steps. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://jonathanstark.com/",
      "reference_url": "https://swipefile.design/ref/personal-jonathan-stark/",
      "screenshot_url": "https://swipefile.design/_astro/preview.B4t4AbBK.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CWhi_mKL.webp",
      "captured": "2026-09-05",
      "capture_scope": "excerpt",
      "provenance": "live",
      "tags": [
        "personal-website",
        "expert",
        "consultant",
        "sales",
        "letter"
      ],
      "patterns": [
        "Personal websites",
        "Lead generation"
      ],
      "design_notes": {
        "mood": "Consultant Sales Letter. A focused personal sales letter names the audience’s pricing problem before introducing ways to get help.",
        "colors": "White, deep blue-green, dark text, and warm cream testimonial panels.",
        "typography": "Condensed uppercase headings with compact long-form body text.",
        "layout": "Centered introduction and portrait, clear email action, problem-and-solution narrative, offer choices, and testimonials.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Minimal portrait photography and lightly tinted proof blocks.",
        "dont": "Do not copy income promises or rely on long copy without useful section headings."
      },
      "recreation_prompt": "# Design reference: Jonathan Stark\nSource: https://jonathanstark.com/\nSwipefile reference: https://swipefile.design/ref/personal-jonathan-stark/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: a page excerpt. Do not infer unseen sections or interactions.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Consultant Sales Letter. A focused personal sales letter names the audience’s pricing problem before introducing ways to get help.\n- colors: White, deep blue-green, dark text, and warm cream testimonial panels.\n- typography: Condensed uppercase headings with compact long-form body text.\n- layout: Centered introduction and portrait, clear email action, problem-and-solution narrative, offer choices, and testimonials.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Minimal portrait photography and lightly tinted proof blocks.\n- dont: Do not copy income promises or rely on long copy without useful section headings.\n\nUseful for: Turning an expert’s point of view into a daily-email entry point, educational material, and services. The sequence connects a recognizable problem to specific next steps. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-marie-forleo",
      "name": "Marie Forleo",
      "kind": "inspiration",
      "archetype": "Personal Expert",
      "summary": "A cinematic introduction transitions quickly into a free resource and a personable guide to the site.",
      "use_for": "Offering a low-commitment audio resource before routing visitors toward programs, video, podcast, and books. Distinct content sections make a broad personal brand easier to navigate. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://www.marieforleo.com/",
      "reference_url": "https://swipefile.design/ref/personal-marie-forleo/",
      "screenshot_url": "https://swipefile.design/_astro/preview.RVT0jpTC.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.lQK4IXfc.webp",
      "captured": "2026-09-05",
      "capture_scope": "excerpt",
      "provenance": "live",
      "tags": [
        "personal-website",
        "expert",
        "personality-led",
        "education",
        "brand"
      ],
      "patterns": [
        "Personal websites",
        "Lead generation"
      ],
      "design_notes": {
        "mood": "Personality-Led Education Brand. A cinematic introduction transitions quickly into a free resource and a personable guide to the site.",
        "colors": "Warm cream, black, pale lime actions, and rich photography.",
        "typography": "Large elegant serif headings with conversational supporting text.",
        "layout": "Image-led hero, inline resource form, personal introduction, press marks, and alternating program/media sections.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Lifestyle photography and tangible book and course imagery.",
        "dont": "Keep the first offer clear even when the brand has many products and channels."
      },
      "recreation_prompt": "# Design reference: Marie Forleo\nSource: https://www.marieforleo.com/\nSwipefile reference: https://swipefile.design/ref/personal-marie-forleo/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: a page excerpt. Do not infer unseen sections or interactions.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Personality-Led Education Brand. A cinematic introduction transitions quickly into a free resource and a personable guide to the site.\n- colors: Warm cream, black, pale lime actions, and rich photography.\n- typography: Large elegant serif headings with conversational supporting text.\n- layout: Image-led hero, inline resource form, personal introduction, press marks, and alternating program/media sections.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Lifestyle photography and tangible book and course imagery.\n- dont: Keep the first offer clear even when the brand has many products and channels.\n\nUseful for: Offering a low-commitment audio resource before routing visitors toward programs, video, podcast, and books. Distinct content sections make a broad personal brand easier to navigate. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-amy-porterfield",
      "name": "Amy Porterfield",
      "kind": "inspiration",
      "archetype": "Personal Expert",
      "summary": "A bold personal portrait and editorial typography connect business education to a visible free-training offer.",
      "use_for": "Moving from a broad business problem to a concrete free resource, podcast samples, testimonials, and newsletter. The training link remains easy to identify. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://www.amyporterfield.com/",
      "reference_url": "https://swipefile.design/ref/personal-amy-porterfield/",
      "screenshot_url": "https://swipefile.design/_astro/preview.CLMeMcPF.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DahAEWj4.webp",
      "captured": "2026-09-05",
      "capture_scope": "excerpt",
      "provenance": "live",
      "tags": [
        "personal-website",
        "expert",
        "training",
        "funnel"
      ],
      "patterns": [
        "Personal websites",
        "Lead generation"
      ],
      "design_notes": {
        "mood": "Expert Training Funnel. A bold personal portrait and editorial typography connect business education to a visible free-training offer.",
        "colors": "Bright blue, sunny yellow, pale blue-white, and a vivid pink portrait outfit.",
        "typography": "Expressive serif headlines paired with small uppercase utility labels.",
        "layout": "Portrait hero, empathetic biography, press marks, resource signup, podcast section, and proof.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Cutout portraits, rounded image frames, and real device mockups.",
        "dont": "Keep free and paid offers distinguishable and avoid overwhelming visitors with simultaneous signup requests."
      },
      "recreation_prompt": "# Design reference: Amy Porterfield\nSource: https://www.amyporterfield.com/\nSwipefile reference: https://swipefile.design/ref/personal-amy-porterfield/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: a page excerpt. Do not infer unseen sections or interactions.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Expert Training Funnel. A bold personal portrait and editorial typography connect business education to a visible free-training offer.\n- colors: Bright blue, sunny yellow, pale blue-white, and a vivid pink portrait outfit.\n- typography: Expressive serif headlines paired with small uppercase utility labels.\n- layout: Portrait hero, empathetic biography, press marks, resource signup, podcast section, and proof.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Cutout portraits, rounded image frames, and real device mockups.\n- dont: Keep free and paid offers distinguishable and avoid overwhelming visitors with simultaneous signup requests.\n\nUseful for: Moving from a broad business problem to a concrete free resource, podcast samples, testimonials, and newsletter. The training link remains easy to identify. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-wes-bos",
      "name": "Wes Bos",
      "kind": "inspiration",
      "archetype": "Personal Educator",
      "summary": "A punchy black-and-yellow personal site makes a developer’s teaching offer immediately recognizable.",
      "use_for": "Routing visitors toward courses, the podcast, and practical tips after a short audience-focused introduction. Each content card has a distinct purpose. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://wesbos.com/",
      "reference_url": "https://swipefile.design/ref/personal-wes-bos/",
      "screenshot_url": "https://swipefile.design/_astro/preview.ClDX-h-3.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CZMWOZEN.webp",
      "captured": "2026-09-05",
      "capture_scope": "page",
      "provenance": "live",
      "tags": [
        "personal-website",
        "educator",
        "developer",
        "brand"
      ],
      "patterns": [
        "Personal websites",
        "Content & media"
      ],
      "design_notes": {
        "mood": "Developer Educator Brand. A punchy black-and-yellow personal site makes a developer’s teaching offer immediately recognizable.",
        "colors": "Black, white, and saturated yellow with color in course artwork.",
        "typography": "Heavy sans-serif navigation, highlighted headings, and code-like body text.",
        "layout": "Boxed navigation over a photo-backed introduction, then a compact row of content and course panels.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Marker-like highlights, grid lines, and workshop photography.",
        "dont": "Do not allow dense navigation to reduce target sizes or hide the primary course route on mobile."
      },
      "recreation_prompt": "# Design reference: Wes Bos\nSource: https://wesbos.com/\nSwipefile reference: https://swipefile.design/ref/personal-wes-bos/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\n\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Developer Educator Brand. A punchy black-and-yellow personal site makes a developer’s teaching offer immediately recognizable.\n- colors: Black, white, and saturated yellow with color in course artwork.\n- typography: Heavy sans-serif navigation, highlighted headings, and code-like body text.\n- layout: Boxed navigation over a photo-backed introduction, then a compact row of content and course panels.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Marker-like highlights, grid lines, and workshop photography.\n- dont: Do not allow dense navigation to reduce target sizes or hide the primary course route on mobile.\n\nUseful for: Routing visitors toward courses, the podcast, and practical tips after a short audience-focused introduction. Each content card has a distinct purpose. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-kent-c-dodds",
      "name": "Kent C. Dodds",
      "kind": "inspiration",
      "archetype": "Personal Educator",
      "summary": "A playful illustrated personal homepage separates free reading from deeper technical training.",
      "use_for": "Giving learners a clear choice between reading the blog and taking a course. Personal context and recommended articles help them assess the teaching style first. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://kentcdodds.com/",
      "reference_url": "https://swipefile.design/ref/personal-kent-c-dodds/",
      "screenshot_url": "https://swipefile.design/_astro/preview.CAhSXmb3.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.C6PFmsBe.webp",
      "captured": "2026-09-05",
      "capture_scope": "excerpt",
      "provenance": "live",
      "tags": [
        "personal-website",
        "educator",
        "developer",
        "learning",
        "hub"
      ],
      "patterns": [
        "Personal websites",
        "Content & media"
      ],
      "design_notes": {
        "mood": "Developer Learning Hub. A playful illustrated personal homepage separates free reading from deeper technical training.",
        "colors": "White, black, soft gray, and bright illustration colors.",
        "typography": "Clean sans-serif typography with short, direct headings.",
        "layout": "Split illustrated hero, brief personal introduction, learning-route chooser, and recommended content cards.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Character illustration and small three-dimensional objects.",
        "dont": "Do not let the illustration become the only explanation of the offer."
      },
      "recreation_prompt": "# Design reference: Kent C. Dodds\nSource: https://kentcdodds.com/\nSwipefile reference: https://swipefile.design/ref/personal-kent-c-dodds/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: a page excerpt. Do not infer unseen sections or interactions.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Developer Learning Hub. A playful illustrated personal homepage separates free reading from deeper technical training.\n- colors: White, black, soft gray, and bright illustration colors.\n- typography: Clean sans-serif typography with short, direct headings.\n- layout: Split illustrated hero, brief personal introduction, learning-route chooser, and recommended content cards.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Character illustration and small three-dimensional objects.\n- dont: Do not let the illustration become the only explanation of the offer.\n\nUseful for: Giving learners a clear choice between reading the blog and taking a course. Personal context and recommended articles help them assess the teaching style first. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-mel-robbins",
      "name": "Mel Robbins",
      "kind": "inspiration",
      "archetype": "Personal Expert",
      "summary": "A confident portrait-led homepage connects a recognizable expert to podcasts, books, and a newsletter.",
      "use_for": "Helping a large content audience find a relevant episode or choose a clear next step. Topic browsing and search reduce dependence on a single featured episode. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://www.melrobbins.com/",
      "reference_url": "https://swipefile.design/ref/personal-mel-robbins/",
      "screenshot_url": "https://swipefile.design/_astro/preview.DJOYd83y.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.D2VTO6be.webp",
      "captured": "2026-09-05",
      "capture_scope": "excerpt",
      "provenance": "live",
      "tags": [
        "personal-website",
        "expert",
        "personal",
        "media",
        "platform"
      ],
      "patterns": [
        "Personal websites",
        "Lead generation"
      ],
      "design_notes": {
        "mood": "Personal Media Platform. A confident portrait-led homepage connects a recognizable expert to podcasts, books, and a newsletter.",
        "colors": "Black, warm white, and bright yellow with strong book-cover colors.",
        "typography": "Bold sans-serif section headings paired with a signature-style identity.",
        "layout": "Dark portrait hero, podcast introduction, episode discovery, book feature, and newsletter section.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Large personal photographs and real publishing assets.",
        "dont": "Avoid copying popularity claims; use accurate evidence and keep content discovery useful without it."
      },
      "recreation_prompt": "# Design reference: Mel Robbins\nSource: https://www.melrobbins.com/\nSwipefile reference: https://swipefile.design/ref/personal-mel-robbins/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: a page excerpt. Do not infer unseen sections or interactions.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Personal Media Platform. A confident portrait-led homepage connects a recognizable expert to podcasts, books, and a newsletter.\n- colors: Black, warm white, and bright yellow with strong book-cover colors.\n- typography: Bold sans-serif section headings paired with a signature-style identity.\n- layout: Dark portrait hero, podcast introduction, episode discovery, book feature, and newsletter section.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Large personal photographs and real publishing assets.\n- dont: Avoid copying popularity claims; use accurate evidence and keep content discovery useful without it.\n\nUseful for: Helping a large content audience find a relevant episode or choose a clear next step. Topic browsing and search reduce dependence on a single featured episode. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "personal-liz-mosley",
      "name": "Liz Mosley",
      "kind": "inspiration",
      "archetype": "Personal Expert",
      "summary": "A friendly design brand names its small-business audience and makes service choices easy to compare.",
      "use_for": "Routing prospective clients into branding, animation, or additional design services, supported by testimonials and repeated contact actions. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.",
      "source_url": "https://www.lizmosley.net/",
      "reference_url": "https://swipefile.design/ref/personal-liz-mosley/",
      "screenshot_url": "https://swipefile.design/_astro/preview.Bjo_m_zM.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CYBazlyk.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "personal-website",
        "expert",
        "independent",
        "designer",
        "website"
      ],
      "patterns": [
        "Personal websites",
        "Lead generation"
      ],
      "design_notes": {
        "mood": "Independent Designer Website. A friendly design brand names its small-business audience and makes service choices easy to compare.",
        "colors": "Deep green, bright grass green, cream, lavender, and blue buttons.",
        "typography": "Large friendly sans-serif headings with a handwritten personal wordmark.",
        "layout": "Audience-specific introduction, three service panels, a product offer, testimonials, and a final contact invitation.",
        "motion": "Keep navigation and reading immediate; motion should support the work rather than delay access.",
        "texture": "Handwritten identity, circular accents, and candid studio photography.",
        "dont": "Keep the service descriptions specific and ensure the contact action stands apart from paid downloads."
      },
      "recreation_prompt": "# Design reference: Liz Mosley\nSource: https://www.lizmosley.net/\nSwipefile reference: https://swipefile.design/ref/personal-liz-mosley/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Independent Designer Website. A friendly design brand names its small-business audience and makes service choices easy to compare.\n- colors: Deep green, bright grass green, cream, lavender, and blue buttons.\n- typography: Large friendly sans-serif headings with a handwritten personal wordmark.\n- layout: Audience-specific introduction, three service panels, a product offer, testimonials, and a final contact invitation.\n- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.\n- texture: Handwritten identity, circular accents, and candid studio photography.\n- dont: Keep the service descriptions specific and ensure the contact action stands apart from paid downloads.\n\nUseful for: Routing prospective clients into branding, animation, or additional design services, supported by testimonials and repeated contact actions. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    }
  ]
}