← Collections

CURATED COLLECTION · 19 REFERENCES

Landing pages & funnels · Collection 02

A collection of design references, with notes and links to the originals.

Design notes

A Framer business-course funnel with a dark opening, clear curriculum blocks, instructor portraits, and bright enrollment actions.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Focused and technical
colors
Black, deep violet, white headings, and acid-green enrollment buttons.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Business-focused promise and video → designer problems → course introduction → six skill areas → instructor portraits → enrollment and FAQ.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Ryan Hayward — Framer Career Accelerator
Source: https://framercareercourse.com/
Swipefile reference: https://swipefile.design/ref/funnel-ryan-hayward-ultimate-framer-career-accelerator-course/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Focused and technical
- colors: Black, deep violet, white headings, and acid-green enrollment buttons.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Business-focused promise and video → designer problems → course introduction → six skill areas → instructor portraits → enrollment and FAQ.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A long course sales letter combining detailed written explanations, example products, and a clear breakdown of included tools and support.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Detailed and instructional
colors
White, pale lavender, dark navy type, and purple offer buttons and icons.
typography
Long readable text columns, emphatic section headings, detailed bullet lists, and selective highlights carry the sales argument.
layout
Course promise and example product imagery → detailed review-site argument → lesson breakdown → tools and support → instructor story → offer and closing proof.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Extended reading sections, inset examples and portraits, selective text emphasis, and recurring offer details.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Erica Stone — Review Rocket AI
Source: https://extremereviewer.com/review-rocket-ai
Swipefile reference: https://swipefile.design/ref/funnel-erica-stone-review-rocket-ai/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Detailed and instructional
- colors: White, pale lavender, dark navy type, and purple offer buttons and icons.
- typography: Long readable text columns, emphatic section headings, detailed bullet lists, and selective highlights carry the sales argument.
- layout: Course promise and example product imagery → detailed review-site argument → lesson breakdown → tools and support → instructor story → offer and closing proof.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Extended reading sections, inset examples and portraits, selective text emphasis, and recurring offer details.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A long Pinterest-course offer with expressive serif typography, warm color changes, detailed modules, and a three-option enrollment section.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Warm and expressive
colors
Charcoal, vivid orange, peach, cream, and yellow enrollment accents.
typography
Editorial serif headings, small uppercase labels, and readable supporting text. Broad type-size changes mark each stage of the offer.
layout
Large editorial promise → audience frustrations → Pinterest teaching approach → curriculum → student stories and instructor context → three payment options.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Jenna Kutcher — The Pinterest Lab
Source: https://thepinterestlab.jennakutcher.com/
Swipefile reference: https://swipefile.design/ref/funnel-jenna-kutcher-the-pinterest-lab/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Warm and expressive
- colors: Charcoal, vivid orange, peach, cream, and yellow enrollment accents.
- typography: Editorial serif headings, small uppercase labels, and readable supporting text. Broad type-size changes mark each stage of the offer.
- layout: Large editorial promise → audience frustrations → Pinterest teaching approach → curriculum → student stories and instructor context → three payment options.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

An expert-interview bundle page that devotes most of its length to the contents of each session before presenting the offer.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Direct and bundle-focused
colors
Black circuit-pattern opening, white and gray reading panels, yellow accents, and red signup buttons.
typography
Long readable text columns, emphatic section headings, detailed bullet lists, and selective highlights carry the sales argument.
layout
Expert bundle introduction → individual speaker portraits → detailed session descriptions → offer stack → signup invitation → FAQ.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Extended reading sections, inset examples and portraits, selective text emphasis, and recurring offer details.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Drop Dead Copy — AI Copywriting Secrets
Source: https://dropdeadcopy.com/ai-march-2025
Swipefile reference: https://swipefile.design/ref/funnel-drop-dead-copy-ai-copywriting-secrets-volume-1/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Direct and bundle-focused
- colors: Black circuit-pattern opening, white and gray reading panels, yellow accents, and red signup buttons.
- typography: Long readable text columns, emphatic section headings, detailed bullet lists, and selective highlights carry the sales argument.
- layout: Expert bundle introduction → individual speaker portraits → detailed session descriptions → offer stack → signup invitation → FAQ.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Extended reading sections, inset examples and portraits, selective text emphasis, and recurring offer details.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A hiring-course funnel with retro lettering, product mockups, colorful checklists, and a personal team-video close.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Playful and personal
colors
Warm cream, orange display lettering, pale turquoise panels, and teal buttons.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Product bundle hero → hiring objections and benefits → course contents → audience-fit checklist → enrollment → team video and final CTA.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Maria Wendt — Dream Team
Source: https://mariawendt.com/dream-team
Swipefile reference: https://swipefile.design/ref/funnel-maria-wendt-dream-team/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Playful and personal
- colors: Warm cream, orange display lettering, pale turquoise panels, and teal buttons.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Product bundle hero → hiring objections and benefits → course contents → audience-fit checklist → enrollment → team video and final CTA.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A traditional seminar sales letter with a narrow reading column, video opening, long bullet lists, and bright yellow offer graphics.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Classic direct response
colors
White, black text, yellow emphasis, and hand-marked offer graphics.
typography
Long readable text columns, emphatic section headings, detailed bullet lists, and selective highlights carry the sales argument.
layout
Seminar video → extended copywriting argument → lesson and expert details → value explanation → written objections → final access action.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Extended reading sections, inset examples and portraits, selective text emphasis, and recurring offer details.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Gary Halbert — Last Seminar
Source: https://thegaryhalbertletter.com/gary-halberts-last-seminar
Swipefile reference: https://swipefile.design/ref/funnel-gary-halbert-last-seminar/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Classic direct response
- colors: White, black text, yellow emphasis, and hand-marked offer graphics.
- typography: Long readable text columns, emphatic section headings, detailed bullet lists, and selective highlights carry the sales argument.
- layout: Seminar video → extended copywriting argument → lesson and expert details → value explanation → written objections → final access action.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Extended reading sections, inset examples and portraits, selective text emphasis, and recurring offer details.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A compact video-led course funnel that alternates black proof sections with a white curriculum and offer explanation.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Simple and practical
colors
Black and white sections with green enrollment buttons and small gold guarantee details.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Video and one-time offer → student proof → curriculum modules → resource previews → member video → mentorship bonus → closing guarantee and CTA.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Kevin Dang — 1 Day Dropshipper
Source: https://smarternomad.com/1daydropshipper
Swipefile reference: https://swipefile.design/ref/funnel-kevin-dang-1-day-dropshipper/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Simple and practical
- colors: Black and white sections with green enrollment buttons and small gold guarantee details.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Video and one-time offer → student proof → curriculum modules → resource previews → member video → mentorship bonus → closing guarantee and CTA.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A copywriting-course page with a clear daily-practice explanation, five curriculum modules, handwritten accents, and student proof.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Confident and readable
colors
White, black, green enrollment buttons, pale green panels, and small red handwritten annotations.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Large course promise → brand and student proof → reader problem → daily practice method → five curriculum modules → offer → instructor story and close.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: CopyHour — Copywriting Course
Source: https://copyhour.com/
Swipefile reference: https://swipefile.design/ref/funnel-derek-johanson-copyhour/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Confident and readable
- colors: White, black, green enrollment buttons, pale green panels, and small red handwritten annotations.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Large course promise → brand and student proof → reader problem → daily practice method → five curriculum modules → offer → instructor story and close.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A buyer-psychology course funnel with bold product illustrations, bright emphasis, teaching examples, and repeated purchase actions.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Playful and emphatic
colors
Black, bright yellow, hot pink, white, and vivid green illustration accents.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Illustrated product hero → brand proof → copywriting frustrations → teaching method and creators → lessons and examples → offer → FAQ and closing purchase action.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Wallet-Opening Words — Copywriting Course
Source: https://walletopeningwords.com/katelyn
Swipefile reference: https://swipefile.design/ref/funnel-katelyn-bourgoin-wallet-opening-words/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Playful and emphatic
- colors: Black, bright yellow, hot pink, white, and vivid green illustration accents.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Illustrated product hero → brand proof → copywriting frustrations → teaching method and creators → lessons and examples → offer → FAQ and closing purchase action.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

An editorial template-business course page with restrained serif headings, a personal story, curriculum details, and generous spacing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Calm and editorial
colors
Warm white, muted brown, dusty rose, black type, and neutral photography.
typography
Editorial serif headings, small uppercase labels, and readable supporting text. Broad type-size changes mark each stage of the offer.
layout
Portrait and template-shop promise → reader objections → instructor story → student proof → five-stage curriculum → enrollment choices → FAQ and final action.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Kate Scott — Scale with Templates
Source: https://katescott.co/scale-with-templates
Swipefile reference: https://swipefile.design/ref/funnel-kate-scott-scale-with-templates-2-0/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Calm and editorial
- colors: Warm white, muted brown, dusty rose, black type, and neutral photography.
- typography: Editorial serif headings, small uppercase labels, and readable supporting text. Broad type-size changes mark each stage of the offer.
- layout: Portrait and template-shop promise → reader objections → instructor story → student proof → five-stage curriculum → enrollment choices → FAQ and final action.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A digital-shop course offer that turns a content problem into a phased teaching framework, then presents resources, proof, and enrollment options.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Practical and encouraging
colors
White and pale gray, cherry-red buttons and accents, dark text, and photographic sections.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Shop-building promise → unused-content problem → sales examples → three-phase teaching framework → bonuses and templates → student proof → price and guarantee.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Monica Froese — Digital Shop Experience
Source: https://digitalshopexperience.com/
Swipefile reference: https://swipefile.design/ref/funnel-monica-froese-the-digital-shop-experience/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Practical and encouraging
- colors: White and pale gray, cherry-red buttons and accents, dark text, and photographic sections.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Shop-building promise → unused-content problem → sales examples → three-phase teaching framework → bonuses and templates → student proof → price and guarantee.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A Framer training page with a clean video opening, extensive student proof, project previews, and a structured enrollment section.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Clear and structured
colors
Off-white, black headings, violet buttons, and soft lavender accents.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Course promise and instructor video → designer testimonials → course features → project and lesson previews → instructor context → plans and questions.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Ryan Hayward — Ultimate Framer Masterclass
Source: https://ultimateframercourse.com/
Swipefile reference: https://swipefile.design/ref/funnel-ryan-hayward-ultimate-framer-masterclass-3-0/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Clear and structured
- colors: Off-white, black headings, violet buttons, and soft lavender accents.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Course promise and instructor video → designer testimonials → course features → project and lesson previews → instructor context → plans and questions.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

An Instagram-resource offer combining warm portrait photography, editorial headings, grouped resources, and an approachable implementation plan.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Warm and reassuring
colors
Cream, caramel, peach, muted blue, and dark serif typography.
typography
Editorial serif headings, small uppercase labels, and readable supporting text. Broad type-size changes mark each stage of the offer.
layout
Portrait-led Instagram reset offer → audience situations → included playbook and resources → short implementation plan → instructor and student proof → purchase invitation.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Jenna Kutcher — Insta Essentials
Source: https://thelab.jennakutcher.com/
Swipefile reference: https://swipefile.design/ref/funnel-jenna-kutcher-instagram-lab/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Warm and reassuring
- colors: Cream, caramel, peach, muted blue, and dark serif typography.
- typography: Editorial serif headings, small uppercase labels, and readable supporting text. Broad type-size changes mark each stage of the offer.
- layout: Portrait-led Instagram reset offer → audience situations → included playbook and resources → short implementation plan → instructor and student proof → purchase invitation.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

An exceptionally long coaching-program sales page built around a pre-launch method, detailed client stories, program resources, and repeated enrollment invitations.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Personal and persuasive
colors
White, charcoal, pale pink, and vivid yellow action buttons.
typography
Long readable text columns, emphatic section headings, detailed bullet lists, and selective highlights carry the sales argument.
layout
Portrait and pre-launch promise → client stories → detailed anticipation-marketing argument → program process → coaching and resources → enrollment → objections and final offer.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Extended reading sections, inset examples and portraits, selective text emphasis, and recurring offer details.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Brenna McGowan — Pre-Launch Plan Program
Source: https://brennamcgowan.co/ppp
Swipefile reference: https://swipefile.design/ref/funnel-brenna-mcgowan-pre-launch-plan-program/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Personal and persuasive
- colors: White, charcoal, pale pink, and vivid yellow action buttons.
- typography: Long readable text columns, emphatic section headings, detailed bullet lists, and selective highlights carry the sales argument.
- layout: Portrait and pre-launch promise → client stories → detailed anticipation-marketing argument → program process → coaching and resources → enrollment → objections and final offer.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Extended reading sections, inset examples and portraits, selective text emphasis, and recurring offer details.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

An SEO-course page for service providers with a soft editorial palette, a clear four-module curriculum, and practical resource previews.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Supportive and editorial
colors
Warm white, pale green, dusty rose, dark blue text, and restrained green buttons.
typography
Editorial serif headings, small uppercase labels, and readable supporting text. Broad type-size changes mark each stage of the offer.
layout
SEO-service promise → audience problem → course introduction → four core modules → practical resources → instructor and student proof → enrollment and questions.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Sara Dunn — Rank for Revenue
Source: https://saradoesseo.com/rank-for-revenue
Swipefile reference: https://swipefile.design/ref/funnel-sara-dunn-rank-for-revenue/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Supportive and editorial
- colors: Warm white, pale green, dusty rose, dark blue text, and restrained green buttons.
- typography: Editorial serif headings, small uppercase labels, and readable supporting text. Broad type-size changes mark each stage of the offer.
- layout: SEO-service promise → audience problem → course introduction → four core modules → practical resources → instructor and student proof → enrollment and questions.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

An AI sales-training page with a concise program overview, structured teaching pillars, instructor cards, and bright enrollment accents.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Technical and purposeful
colors
Charcoal, white, acid-green accents, and dark illustrated panels.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Automation promise → program overview → three teaching pillars → curriculum → instructors → pricing → FAQ and final enrollment panel.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Higher Levels — AI Sales Accelerator
Source: https://higherlevels.com/ai-sales-accelerator
Swipefile reference: https://swipefile.design/ref/funnel-higher-levels-ai-sales-accelerator/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Technical and purposeful
- colors: Charcoal, white, acid-green accents, and dark illustrated panels.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Automation promise → program overview → three teaching pillars → curriculum → instructors → pricing → FAQ and final enrollment panel.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A YouTube-course offer that explains a complete marketing system through customer stories, resource previews, and approachable teaching sections.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Friendly and practical
colors
Warm white, peach, pale yellow, charcoal type, and small playful floral shapes.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Portrait and marketing promise → three audience situations → customer stories → course system and resources → instructor context → enrollment → FAQ and final invitation.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Stephanie Kase — YouTube for Business
Source: https://stephaniekase.com/youtubeforbusiness
Swipefile reference: https://swipefile.design/ref/funnel-stephanie-kase-youtube-for-business/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Friendly and practical
- colors: Warm white, peach, pale yellow, charcoal type, and small playful floral shapes.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Portrait and marketing promise → three audience situations → customer stories → course system and resources → instructor context → enrollment → FAQ and final invitation.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

A web-design course funnel that uses a cinematic opening, three visual project examples, detailed curriculum, and mentor support to explain the offer.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Cinematic and structured
colors
Black, deep violet, white, and soft pink enrollment buttons.
typography
Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
layout
Instructor and project montage → designer problems → course features → three example projects → curriculum → mentor support and community → enrollment and FAQ.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Flux Academy — Web Design Masterclass
Source: https://flux-academy.com/courses/web-design-masterclass
Swipefile reference: https://swipefile.design/ref/funnel-matt-jumper-flux-academy-web-design-masterclass/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Cinematic and structured
- colors: Black, deep violet, white, and soft pink enrollment buttons.
- typography: Bold sans-serif headings, compact labels, short benefit lists, and clearly separated curriculum sections make the long offer scannable.
- layout: Instructor and project montage → designer problems → course features → three example projects → curriculum → mentor support and community → enrollment and FAQ.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.
Design notes

An expressive design-course sales page with a manifesto opening, collage imagery, playful copy, an extensive lesson preview, and two offer tiers.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

mood
Irreverent and expressive
colors
Charcoal, white, vivid pink and turquoise accents, and colorful collage imagery.
typography
Condensed display lettering, hand-marked labels, playful inline emphasis, and a distinct visual hierarchy through the long lesson lists.
layout
Manifesto-style introduction → instructor story → what you will and will not learn → course preview → detailed lesson lists → two offer tiers → FAQ and personal close.
motion
The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
texture
Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
dont
Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.
Design adaptation prompt
# Design reference: Jack McDade — Radical Design
Source: https://radicaldesigncourse.com/
Swipefile reference: https://swipefile.design/ref/funnel-jack-mcdade-radical-design/
Captured: 2026-09-07. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Irreverent and expressive
- colors: Charcoal, white, vivid pink and turquoise accents, and colorful collage imagery.
- typography: Condensed display lettering, hand-marked labels, playful inline emphasis, and a distinct visual hierarchy through the long lesson lists.
- layout: Manifesto-style introduction → instructor story → what you will and will not learn → course preview → detailed lesson lists → two offer tiers → FAQ and personal close.
- motion: The screenshot records a static page state. Preserve readable scrolling and clear action feedback; do not infer video playback, counters, or hidden form behavior.
- texture: Product or instructor imagery, contrasting section backgrounds, grouped curriculum details, and customer-story panels.
- dont: Use your own offer, brand, and assets. Do not invent testimonials, results, scarcity, guarantees, or pricing.

Useful for: Study the complete public offer page, its section order, and calls to action. Checkout steps, current enrollment availability, and conversion results are not verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- 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.
- 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.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear 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.