# Turn expertise into an offer Board: https://swipefile.design/board/turn-expertise-into-an-offer/ References: 11 Use this board as design direction for my project. Review the references below, identify useful layout, typography, color, and interaction patterns, then adapt them to my brief. Cite the original references you use. 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. ## 1. Dan Mall Source website: https://danmall.com/ Swipefile reference: https://swipefile.design/ref/personal-dan-mall/ Screenshot: https://swipefile.design/_astro/preview.CGsF2Ptd.webp Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Expert A cinematic portrait, oversized name, and flowers make a design educator feel immediately recognizable. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Dan Mall Source: https://danmall.com/ Swipefile reference: https://swipefile.design/ref/personal-dan-mall/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## 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: 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. Useful 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. ## 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. ~~~ ## 2. Josh Comeau Source website: https://www.joshwcomeau.com/ Swipefile reference: https://swipefile.design/ref/personal-josh-comeau/ Screenshot: https://swipefile.design/_astro/preview.fDAfXqvS.webp Captured: 2026-09-05 | Scope: page | Type: inspiration | Style: Personal Educator A playful illustrated header leads into an exceptionally readable programming publication. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Josh Comeau Source: https://www.joshwcomeau.com/ Swipefile reference: https://swipefile.design/ref/personal-josh-comeau/ Captured: 2026-09-05. 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: 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. Useful 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. ## 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. ~~~ ## 3. Femke Source website: https://femke.design/ Swipefile reference: https://swipefile.design/ref/personal-femke/ Screenshot: https://swipefile.design/_astro/preview.BrjqIwXQ.webp Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Educator A warm personal brand turns a specific career obstacle into clear learning and coaching paths. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Femke Source: https://femke.design/ Swipefile reference: https://swipefile.design/ref/personal-femke/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## 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: 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. Useful 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. ## 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. ~~~ ## 4. Tiago Forte Source website: https://fortelabs.com/ Swipefile reference: https://swipefile.design/ref/personal-tiago-forte/ Screenshot: https://swipefile.design/_astro/preview.ft8EBbmx.webp Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Educator A personal teaching brand introduces a productivity quiz before presenting books, courses, and free learning resources. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Tiago Forte Source: https://fortelabs.com/ Swipefile reference: https://swipefile.design/ref/personal-tiago-forte/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## 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: 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. Useful 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. ## 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. ~~~ ## 5. Jonathan Stark Source website: https://jonathanstark.com/ Swipefile reference: https://swipefile.design/ref/personal-jonathan-stark/ Screenshot: https://swipefile.design/_astro/preview.B4t4AbBK.webp Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Expert A focused personal sales letter names the audience’s pricing problem before introducing ways to get help. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Jonathan Stark Source: https://jonathanstark.com/ Swipefile reference: https://swipefile.design/ref/personal-jonathan-stark/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## 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: 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. Useful 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. ## 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. ~~~ ## 6. Marie Forleo Source website: https://www.marieforleo.com/ Swipefile reference: https://swipefile.design/ref/personal-marie-forleo/ Screenshot: https://swipefile.design/_astro/preview.RVT0jpTC.webp Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Expert A cinematic introduction transitions quickly into a free resource and a personable guide to the site. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Marie Forleo Source: https://www.marieforleo.com/ Swipefile reference: https://swipefile.design/ref/personal-marie-forleo/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## 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: 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. Useful 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. ## 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. ~~~ ## 7. Amy Porterfield Source website: https://www.amyporterfield.com/ Swipefile reference: https://swipefile.design/ref/personal-amy-porterfield/ Screenshot: https://swipefile.design/_astro/preview.CLMeMcPF.webp Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Expert A bold personal portrait and editorial typography connect business education to a visible free-training offer. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Amy Porterfield Source: https://www.amyporterfield.com/ Swipefile reference: https://swipefile.design/ref/personal-amy-porterfield/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## 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: 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. Useful 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. ## 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. ~~~ ## 8. Wes Bos Source website: https://wesbos.com/ Swipefile reference: https://swipefile.design/ref/personal-wes-bos/ Screenshot: https://swipefile.design/_astro/preview.ClDX-h-3.webp Captured: 2026-09-05 | Scope: page | Type: inspiration | Style: Personal Educator A punchy black-and-yellow personal site makes a developer’s teaching offer immediately recognizable. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Wes Bos Source: https://wesbos.com/ Swipefile reference: https://swipefile.design/ref/personal-wes-bos/ Captured: 2026-09-05. 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: 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. Useful 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. ## 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. ~~~ ## 9. Kent C. Dodds Source website: https://kentcdodds.com/ Swipefile reference: https://swipefile.design/ref/personal-kent-c-dodds/ Screenshot: https://swipefile.design/_astro/preview.CAhSXmb3.webp Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Educator A playful illustrated personal homepage separates free reading from deeper technical training. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Kent C. Dodds Source: https://kentcdodds.com/ Swipefile reference: https://swipefile.design/ref/personal-kent-c-dodds/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## 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: 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. Useful 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. ## 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. ~~~ ## 10. Mel Robbins Source website: https://www.melrobbins.com/ Swipefile reference: https://swipefile.design/ref/personal-mel-robbins/ Screenshot: https://swipefile.design/_astro/preview.DJOYd83y.webp Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Expert A confident portrait-led homepage connects a recognizable expert to podcasts, books, and a newsletter. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Mel Robbins Source: https://www.melrobbins.com/ Swipefile reference: https://swipefile.design/ref/personal-mel-robbins/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## 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 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. Useful 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. ## 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. ~~~ ## 11. Liz Mosley Source website: https://www.lizmosley.net/ Swipefile reference: https://swipefile.design/ref/personal-liz-mosley/ Screenshot: https://swipefile.design/_astro/preview.Bjo_m_zM.webp Captured: 2026-09-05 | Scope: viewport | Type: inspiration | Style: Personal Expert A friendly design brand names its small-business audience and makes service choices easy to compare. Useful 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. - 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. ### Design adaptation prompt ~~~text # Design reference: Liz Mosley Source: https://www.lizmosley.net/ Swipefile reference: https://swipefile.design/ref/personal-liz-mosley/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: one viewport. Do not infer unseen page sections or a complete user flow. ## 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: 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. Useful 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. ## 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. ~~~ 1 references are no longer public and are omitted. View board: https://swipefile.design/board/turn-expertise-into-an-offer/ Swipefile: https://swipefile.design/