{ "version": 1, "name": "SaaS websites that explain the product", "url": "https://swipefile.design/board/saas-websites-that-explain-the-product/", "markdown_url": "https://swipefile.design/board/saas-websites-that-explain-the-product/notes.md", "json_url": "https://swipefile.design/board/saas-websites-that-explain-the-product/data.json", "pdf_url": "https://swipefile.design/board/saas-websites-that-explain-the-product/export.pdf", "reference_count": 22, "unavailable_count": 0, "guidance": "Use these references for design principles. Follow the project brief and use original branding, content, and imagery. Captures document a particular date; they do not verify current product behavior.", "references": [ { "slug": "saas-airtable", "name": "Airtable", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A centered platform promise and two clear actions sit above a pink-tinted product workflow preview, connecting the broad offer to a concrete interface.", "use_for": "Flexible work platforms that need to turn a broad category into a visible workflow.", "source_url": "https://www.airtable.com/", "reference_url": "https://swipefile.design/ref/saas-airtable/", "screenshot_url": "https://swipefile.design/_astro/preview.ByaQSkRM.webp", "thumbnail_url": "https://swipefile.design/_astro/card.DEdXiMFP.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "database", "workflow", "collaboration", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Clear and flexible", "colors": "White, charcoal, pastel pink", "typography": "Medium-weight sans headline and compact navigation", "layout": "Centered headline and trial/demo pair above a wide product preview", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Soft color fields around interface imagery", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Airtable\nSource: https://www.airtable.com/\nSwipefile reference: https://swipefile.design/ref/saas-airtable/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Clear and flexible\n- colors: White, charcoal, pastel pink\n- typography: Medium-weight sans headline and compact navigation\n- layout: Centered headline and trial/demo pair above a wide product preview\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Soft color fields around interface imagery\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Flexible work platforms that need to turn a broad category into a visible workflow.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-amplitude", "name": "Amplitude", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A short product-team message leads into a tabbed interface preview, so visitors can connect the platform story to several capabilities.", "use_for": "Analytics platforms explaining several workflows through one organized product preview.", "source_url": "https://amplitude.com/", "reference_url": "https://swipefile.design/ref/saas-amplitude/", "screenshot_url": "https://swipefile.design/_astro/preview.Bm7L-uHK.webp", "thumbnail_url": "https://swipefile.design/_astro/card.BId1eNMG.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "analytics", "product", "tabs", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Practical and product-led", "colors": "White, black, muted blue", "typography": "Large sans headline with compact product labels", "layout": "Headline and actions above a broad preview with capability tabs", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Restrained interface screenshots and light panel borders", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Amplitude\nSource: https://amplitude.com/\nSwipefile reference: https://swipefile.design/ref/saas-amplitude/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Practical and product-led\n- colors: White, black, muted blue\n- typography: Large sans headline with compact product labels\n- layout: Headline and actions above a broad preview with capability tabs\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Restrained interface screenshots and light panel borders\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Analytics platforms explaining several workflows through one organized product preview.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-asana", "name": "Asana", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A large headline is surrounded by small connected work labels and avatars, while provider buttons and an email field make the first account step visible.", "use_for": "Collaboration software connecting an abstract teamwork promise to a concrete signup path.", "source_url": "https://asana.com/", "reference_url": "https://swipefile.design/ref/saas-asana/", "screenshot_url": "https://swipefile.design/_astro/preview.D4XG5ecf.webp", "thumbnail_url": "https://swipefile.design/_astro/card.CBErMceJ.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "project-management", "collaboration", "onboarding", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Collaborative and approachable", "colors": "White, black, pink, small multicolor accents", "typography": "Large clean sans display with a colored phrase", "layout": "Centered message and account choices, framed by a loose network of work labels", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Thin connector lines, small avatars, and rounded UI fragments", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Asana\nSource: https://asana.com/\nSwipefile reference: https://swipefile.design/ref/saas-asana/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Collaborative and approachable\n- colors: White, black, pink, small multicolor accents\n- typography: Large clean sans display with a colored phrase\n- layout: Centered message and account choices, framed by a loose network of work labels\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Thin connector lines, small avatars, and rounded UI fragments\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Collaboration software connecting an abstract teamwork promise to a concrete signup path.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-beehiiv", "name": "beehiiv", "kind": "inspiration", "archetype": "Dark SaaS", "summary": "Stacked typography on a dark field introduces a creator platform, with provider and email signup routes alongside a compact product preview.", "use_for": "Creator SaaS that needs to show the publishing offer and a low-friction first step.", "source_url": "https://www.beehiiv.com/", "reference_url": "https://swipefile.design/ref/saas-beehiiv/", "screenshot_url": "https://swipefile.design/_astro/preview.B5gf3YeM.webp", "thumbnail_url": "https://swipefile.design/_astro/card.DF7lhoyy.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "newsletter", "publishing", "creator", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Bold and creator-focused", "colors": "Deep navy, white, pink-purple accents", "typography": "Heavy uppercase stacked display", "layout": "Left-aligned pitch and signup choices, right-side product panels, customer names below", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Dark flat field with softly glowing interface previews", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: beehiiv\nSource: https://www.beehiiv.com/\nSwipefile reference: https://swipefile.design/ref/saas-beehiiv/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Bold and creator-focused\n- colors: Deep navy, white, pink-purple accents\n- typography: Heavy uppercase stacked display\n- layout: Left-aligned pitch and signup choices, right-side product panels, customer names below\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Dark flat field with softly glowing interface previews\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Creator SaaS that needs to show the publishing offer and a low-friction first step.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-brevo", "name": "Brevo", "kind": "inspiration", "archetype": "Soft Pastel Startup", "summary": "A lime panel pairs a short customer-growth message with layered marketing and reporting screens, then gives way to a row of customer logos.", "use_for": "Marketing platforms using recognizable screens and customer context to support a broad offer.", "source_url": "https://www.brevo.com/", "reference_url": "https://swipefile.design/ref/saas-brevo/", "screenshot_url": "https://swipefile.design/_astro/preview.BwSQk_iP.webp", "thumbnail_url": "https://swipefile.design/_astro/card.CDkcB7nM.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "email", "crm", "marketing", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Fresh and commercially focused", "colors": "Pale lime, white, black", "typography": "Clean sans headline and compact supporting copy", "layout": "Left-aligned introduction and actions, right-side UI collage, customer row underneath", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Flat pastel color with overlapping interface panels", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Brevo\nSource: https://www.brevo.com/\nSwipefile reference: https://swipefile.design/ref/saas-brevo/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Fresh and commercially focused\n- colors: Pale lime, white, black\n- typography: Clean sans headline and compact supporting copy\n- layout: Left-aligned introduction and actions, right-side UI collage, customer row underneath\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Flat pastel color with overlapping interface panels\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Marketing platforms using recognizable screens and customer context to support a broad offer.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-clay", "name": "Clay", "kind": "inspiration", "archetype": "Light Playful 3D", "summary": "A colorful miniature landscape sits above a dark green section with a large growth-systems message and trial/demo choices.", "use_for": "Complex workflow products using a memorable visual metaphor before explaining the system.", "source_url": "https://www.clay.com/", "reference_url": "https://swipefile.design/ref/saas-clay/", "screenshot_url": "https://swipefile.design/_astro/preview.Ik2V2xtv.webp", "thumbnail_url": "https://swipefile.design/_astro/card.BWa-Hvqj.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "crm", "enrichment", "workflow", "3d", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Playful and systematic", "colors": "Forest green, sky blue, yellow, pastel colors", "typography": "Large white sans statement with smaller supporting text", "layout": "Broad illustrated scene above a split introduction and action area", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Tactile 3D objects, grass-like surfaces, and soft clouds", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Clay\nSource: https://www.clay.com/\nSwipefile reference: https://swipefile.design/ref/saas-clay/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Playful and systematic\n- colors: Forest green, sky blue, yellow, pastel colors\n- typography: Large white sans statement with smaller supporting text\n- layout: Broad illustrated scene above a split introduction and action area\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Tactile 3D objects, grass-like surfaces, and soft clouds\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Complex workflow products using a memorable visual metaphor before explaining the system.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-clerk", "name": "Clerk", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A restrained authentication pitch sits above a compact code-oriented control and customer logos, keeping the developer product presentation focused.", "use_for": "Developer tools that need to explain one capability and make implementation feel close.", "source_url": "https://clerk.com/", "reference_url": "https://swipefile.design/ref/saas-clerk/", "screenshot_url": "https://swipefile.design/_astro/preview.4WQLqqeu.webp", "thumbnail_url": "https://swipefile.design/_astro/card.KOuO7NkE.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "authentication", "developer", "identity", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Focused and technical", "colors": "White, near-black, muted gray", "typography": "Heavy sans headline with compact code-like text", "layout": "Centered headline and short description, small implementation control, customer row", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Minimal decoration, light rules, and code-oriented UI", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Clerk\nSource: https://clerk.com/\nSwipefile reference: https://swipefile.design/ref/saas-clerk/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Focused and technical\n- colors: White, near-black, muted gray\n- typography: Heavy sans headline with compact code-like text\n- layout: Centered headline and short description, small implementation control, customer row\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Minimal decoration, light rules, and code-oriented UI\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Developer tools that need to explain one capability and make implementation feel close.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-customer-io", "name": "Customer.io", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A large dark-green message introduces in-app communication, with a brief explanation and adjacent trial/demo actions before the product imagery begins.", "use_for": "Lifecycle messaging tools connecting the communication channel to a clear business use.", "source_url": "https://customer.io/", "reference_url": "https://swipefile.design/ref/saas-customer-io/", "screenshot_url": "https://swipefile.design/_astro/preview.DZfvli2i.webp", "thumbnail_url": "https://swipefile.design/_astro/card.Vw_Rp5BZ.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "email", "messaging", "automation", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Calm and direct", "colors": "White, dark green, muted image colors", "typography": "Large lightweight sans headline", "layout": "Left-aligned statement and paired actions, wide media area below", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Generous white space and restrained product imagery", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Customer.io\nSource: https://customer.io/\nSwipefile reference: https://swipefile.design/ref/saas-customer-io/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Calm and direct\n- colors: White, dark green, muted image colors\n- typography: Large lightweight sans headline\n- layout: Left-aligned statement and paired actions, wide media area below\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Generous white space and restrained product imagery\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Lifecycle messaging tools connecting the communication channel to a clear business use.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-dovetail", "name": "Dovetail", "kind": "inspiration", "archetype": "Dark SaaS", "summary": "A bold customer-evidence message occupies a dark technical field, with a small blue object interrupting the type and sales/trial paths below.", "use_for": "Research and customer-intelligence products that need a strong point of view before showing details.", "source_url": "https://dovetail.com/", "reference_url": "https://swipefile.design/ref/saas-dovetail/", "screenshot_url": "https://swipefile.design/_astro/preview.C8Wiklgw.webp", "thumbnail_url": "https://swipefile.design/_astro/card.ChJ4Setd.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "research", "customer-intelligence", "analytics", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Analytical and assertive", "colors": "Black, white, electric blue", "typography": "Heavy centered sans display", "layout": "Centered headline and short explanation above paired actions and customer logos", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Subtle line grid and a bright product-related graphic", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Dovetail\nSource: https://dovetail.com/\nSwipefile reference: https://swipefile.design/ref/saas-dovetail/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Analytical and assertive\n- colors: Black, white, electric blue\n- typography: Heavy centered sans display\n- layout: Centered headline and short explanation above paired actions and customer logos\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Subtle line grid and a bright product-related graphic\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Research and customer-intelligence products that need a strong point of view before showing details.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-dropbox", "name": "Dropbox", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A short storage-and-collaboration message sits beside a large file workspace preview, with a trial action and an enterprise route close together.", "use_for": "File and knowledge platforms making the organization of content visible in the hero.", "source_url": "https://www.dropbox.com/", "reference_url": "https://swipefile.design/ref/saas-dropbox/", "screenshot_url": "https://swipefile.design/_astro/preview.NU-KTJ3B.webp", "thumbnail_url": "https://swipefile.design/_astro/card.TRPHfJbj.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "files", "storage", "collaboration", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Practical and familiar", "colors": "Warm white, black, saturated blue", "typography": "Compact bold sans headline and readable body text", "layout": "Two-column introduction: message and actions left, workspace preview right", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Neutral page surface with crisp interface imagery", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Dropbox\nSource: https://www.dropbox.com/\nSwipefile reference: https://swipefile.design/ref/saas-dropbox/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Practical and familiar\n- colors: Warm white, black, saturated blue\n- typography: Compact bold sans headline and readable body text\n- layout: Two-column introduction: message and actions left, workspace preview right\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Neutral page surface with crisp interface imagery\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: File and knowledge platforms making the organization of content visible in the hero.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-grammarly", "name": "Grammarly", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A centered writing promise leads into a row of focused feature examples, each pairing a colored preview with a short task label.", "use_for": "Assistive tools that can explain value through recognizable tasks rather than a long feature list.", "source_url": "https://www.grammarly.com/", "reference_url": "https://swipefile.design/ref/saas-grammarly/", "screenshot_url": "https://swipefile.design/_astro/preview.B7xWEIbP.webp", "thumbnail_url": "https://swipefile.design/_astro/card.DSixno7F.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "writing", "ai", "productivity", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Supportive and clear", "colors": "White, deep green, pastel blue and lilac", "typography": "Bold sans headline with smaller explanatory labels", "layout": "Centered introduction and signup choices above a row of task-oriented cards", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Soft colored preview backgrounds and text-editing examples", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Grammarly\nSource: https://www.grammarly.com/\nSwipefile reference: https://swipefile.design/ref/saas-grammarly/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Supportive and clear\n- colors: White, deep green, pastel blue and lilac\n- typography: Bold sans headline with smaller explanatory labels\n- layout: Centered introduction and signup choices above a row of task-oriented cards\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Soft colored preview backgrounds and text-editing examples\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Assistive tools that can explain value through recognizable tasks rather than a long feature list.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-hubspot", "name": "HubSpot", "kind": "inspiration", "archetype": "Cinematic Product Hero", "summary": "A full-width team photograph supports a centered customer-platform message, with adjacent demo and free-start actions.", "use_for": "Business platforms that connect an operational promise to the teams using the product.", "source_url": "https://www.hubspot.com/homepg-b?wfuid=ce45e84a0d.1788650983&wfsid=1788650983-d802-bdd7-3902ff2c79f1", "reference_url": "https://swipefile.design/ref/saas-hubspot/", "screenshot_url": "https://swipefile.design/_astro/preview.DHbRaqxt.webp", "thumbnail_url": "https://swipefile.design/_astro/card.DHnYaDSQ.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "crm", "marketing", "platform", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Human and business-focused", "colors": "Warm photography, white text, orange actions", "typography": "Large centered serif headline with compact sans supporting text", "layout": "Two utility and product-navigation rows above an image-led hero, centered message, and paired actions", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Natural team photography under a readability overlay", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: HubSpot\nSource: https://www.hubspot.com/homepg-b?wfuid=ce45e84a0d.1788650983&wfsid=1788650983-d802-bdd7-3902ff2c79f1\nSwipefile reference: https://swipefile.design/ref/saas-hubspot/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Human and business-focused\n- colors: Warm photography, white text, orange actions\n- typography: Large centered serif headline with compact sans supporting text\n- layout: Two utility and product-navigation rows above an image-led hero, centered message, and paired actions\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Natural team photography under a readability overlay\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Business platforms that connect an operational promise to the teams using the product.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-intercom", "name": "Intercom", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A large mixed-tone headline introduces customer service, flanked by narrow editorial image fragments and followed by trial/demo choices.", "use_for": "Support platforms balancing a human service story with a product-led first step.", "source_url": "https://www.intercom.com/", "reference_url": "https://swipefile.design/ref/saas-intercom/", "screenshot_url": "https://swipefile.design/_astro/preview.B-rzQgrF.webp", "thumbnail_url": "https://swipefile.design/_astro/card.BjQR6U7u.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "support", "customer-service", "ai", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Editorial and composed", "colors": "Warm white, black, soft gray, muted photography", "typography": "Large light sans display with selectively emphasized words", "layout": "Centered statement with image strips at the edges and compact actions below", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Sparse photo collage and generous open space", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Intercom\nSource: https://www.intercom.com/\nSwipefile reference: https://swipefile.design/ref/saas-intercom/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Editorial and composed\n- colors: Warm white, black, soft gray, muted photography\n- typography: Large light sans display with selectively emphasized words\n- layout: Centered statement with image strips at the edges and compact actions below\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Sparse photo collage and generous open space\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Support platforms balancing a human service story with a product-led first step.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-kit", "name": "Kit", "kind": "inspiration", "archetype": "Editorial Product", "summary": "A split layout pairs a heavy benefit headline with a large creator portrait, then introduces content and recommendation cards below.", "use_for": "Creator tools that can make their audience and use case tangible through real creator stories.", "source_url": "https://kit.com/", "reference_url": "https://swipefile.design/ref/saas-kit/", "screenshot_url": "https://swipefile.design/_astro/preview.DBy49T0O.webp", "thumbnail_url": "https://swipefile.design/_astro/card.C_dg_6Xy.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "email", "creator", "newsletter", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Personal and practical", "colors": "Warm white, black, sky-blue accents", "typography": "Heavy condensed-feeling sans headline and small labels", "layout": "Message and action on the left, portrait on the right, small content cards below", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Portrait photography with a simple editorial frame", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Kit\nSource: https://kit.com/\nSwipefile reference: https://swipefile.design/ref/saas-kit/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Personal and practical\n- colors: Warm white, black, sky-blue accents\n- typography: Heavy condensed-feeling sans headline and small labels\n- layout: Message and action on the left, portrait on the right, small content cards below\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Portrait photography with a simple editorial frame\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Creator tools that can make their audience and use case tangible through real creator stories.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-loops", "name": "Loops", "kind": "inspiration", "archetype": "Document Minimal", "summary": "A deliberately small headline and sparse navigation leave room for a quiet workflow illustration, giving the email product a lightweight feel.", "use_for": "Focused SaaS tools that benefit from a calm, low-density introduction.", "source_url": "https://loops.so/", "reference_url": "https://swipefile.design/ref/saas-loops/", "screenshot_url": "https://swipefile.design/_astro/preview.D2YE4-GL.webp", "thumbnail_url": "https://swipefile.design/_astro/card.BZF7HjnU.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "email", "automation", "minimal", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Quiet and lightweight", "colors": "White, pale gray, small orange accents", "typography": "Small restrained sans text throughout", "layout": "Small introduction near the upper center, broad workflow diagram below", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Thin outlined email panels and abundant white space", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Loops\nSource: https://loops.so/\nSwipefile reference: https://swipefile.design/ref/saas-loops/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Quiet and lightweight\n- colors: White, pale gray, small orange accents\n- typography: Small restrained sans text throughout\n- layout: Small introduction near the upper center, broad workflow diagram below\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Thin outlined email panels and abundant white space\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Focused SaaS tools that benefit from a calm, low-density introduction.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-miro", "name": "Miro", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A centered collaboration message floats above a colorful canvas preview, with one blue start action and customer marks supporting the introduction.", "use_for": "Canvas and collaboration tools whose visual workspace can explain the product quickly.", "source_url": "https://miro.com/", "reference_url": "https://swipefile.design/ref/saas-miro/", "screenshot_url": "https://swipefile.design/_astro/preview.C4Z7p79-.webp", "thumbnail_url": "https://swipefile.design/_astro/card.C9rvNYI-.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "whiteboard", "collaboration", "canvas", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Open and collaborative", "colors": "White, soft lilac, blue, pastel sticky-note colors", "typography": "Medium-weight sans headline", "layout": "Centered headline and action above a broad collaborative board preview", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Soft glow behind a crisp diagram-like workspace", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Miro\nSource: https://miro.com/\nSwipefile reference: https://swipefile.design/ref/saas-miro/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Open and collaborative\n- colors: White, soft lilac, blue, pastel sticky-note colors\n- typography: Medium-weight sans headline\n- layout: Centered headline and action above a broad collaborative board preview\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Soft glow behind a crisp diagram-like workspace\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Canvas and collaboration tools whose visual workspace can explain the product quickly.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-mixpanel", "name": "Mixpanel", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A left-aligned product-intelligence message and trial/demo actions lead into a wide analytics preview over a soft red-to-lilac gradient.", "use_for": "Analytics products that need to connect a high-level promise to visible reporting detail.", "source_url": "https://mixpanel.com/home/", "reference_url": "https://swipefile.design/ref/saas-mixpanel/", "screenshot_url": "https://swipefile.design/_astro/preview.6emm4hON.webp", "thumbnail_url": "https://swipefile.design/_astro/card.2ojEgtAv.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "analytics", "product-intelligence", "dashboard", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Modern and analytical", "colors": "White, charcoal, coral, pale purple", "typography": "Clear sans headline with compact supporting copy", "layout": "Introduction above a wide product screenshot; subtle gradient carries the section", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Soft color bands behind structured analytics UI", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Mixpanel\nSource: https://mixpanel.com/home/\nSwipefile reference: https://swipefile.design/ref/saas-mixpanel/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Modern and analytical\n- colors: White, charcoal, coral, pale purple\n- typography: Clear sans headline with compact supporting copy\n- layout: Introduction above a wide product screenshot; subtle gradient carries the section\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Soft color bands behind structured analytics UI\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Analytics products that need to connect a high-level promise to visible reporting detail.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-neon", "name": "Neon", "kind": "inspiration", "archetype": "Dark SaaS", "summary": "A luminous green data-like graphic sits above a large database-platform statement, with two clear actions and compact capability descriptions below.", "use_for": "Developer infrastructure products using a technical visual identity without burying the offer.", "source_url": "https://neon.com/", "reference_url": "https://swipefile.design/ref/saas-neon/", "screenshot_url": "https://swipefile.design/_astro/preview.Bup5Rc9R.webp", "thumbnail_url": "https://swipefile.design/_astro/card.DsXPGRPW.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "database", "developer", "infrastructure", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Technical and concentrated", "colors": "Near-black, green, white", "typography": "Large clean sans headline with small technical labels", "layout": "Wide graphic above a left-aligned introduction, then compact capability columns", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Glowing vertical bars and a flat dark background", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Neon\nSource: https://neon.com/\nSwipefile reference: https://swipefile.design/ref/saas-neon/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Technical and concentrated\n- colors: Near-black, green, white\n- typography: Large clean sans headline with small technical labels\n- layout: Wide graphic above a left-aligned introduction, then compact capability columns\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Glowing vertical bars and a flat dark background\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Developer infrastructure products using a technical visual identity without burying the offer.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-posthog", "name": "PostHog", "kind": "inspiration", "archetype": "Illustrated", "summary": "A desktop-like website shell wraps product navigation, a light content window, and a compact signup panel, turning the site itself into a product metaphor.", "use_for": "Developer platforms with enough breadth to justify an exploratory, desktop-inspired navigation model.", "source_url": "https://posthog.com/", "reference_url": "https://swipefile.design/ref/saas-posthog/", "screenshot_url": "https://swipefile.design/_astro/preview.IbicYtn9.webp", "thumbnail_url": "https://swipefile.design/_astro/card.CsEUhYFQ.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "analytics", "developer", "retro", "platform", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Playful and technical", "colors": "Sage green, warm white, orange", "typography": "Compact sans interface text with a larger central statement", "layout": "Persistent desktop-style side navigation around a central product window and signup choices", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Illustrated icons, window borders, and a retro software-shell treatment", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: PostHog\nSource: https://posthog.com/\nSwipefile reference: https://swipefile.design/ref/saas-posthog/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Playful and technical\n- colors: Sage green, warm white, orange\n- typography: Compact sans interface text with a larger central statement\n- layout: Persistent desktop-style side navigation around a central product window and signup choices\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Illustrated icons, window borders, and a retro software-shell treatment\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Developer platforms with enough breadth to justify an exploratory, desktop-inspired navigation model.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-supabase", "name": "Supabase", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A concise two-line promise uses green emphasis above clear project and demo actions, with product capability panels giving developers immediate context.", "use_for": "Infrastructure platforms that need a brief promise and recognizable technical building blocks.", "source_url": "https://supabase.com/", "reference_url": "https://swipefile.design/ref/saas-supabase/", "screenshot_url": "https://swipefile.design/_astro/preview.XQUuvnhb.webp", "thumbnail_url": "https://swipefile.design/_astro/card.QkcY2tdG.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "database", "developer", "backend", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Clear and developer-focused", "colors": "White, charcoal, mint green", "typography": "Clean sans headline and small capability labels", "layout": "Split opening message followed by a tidy grid of capability panels", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Fine borders, line illustrations, and restrained green accents", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Supabase\nSource: https://supabase.com/\nSwipefile reference: https://swipefile.design/ref/saas-supabase/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Clear and developer-focused\n- colors: White, charcoal, mint green\n- typography: Clean sans headline and small capability labels\n- layout: Split opening message followed by a tidy grid of capability panels\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Fine borders, line illustrations, and restrained green accents\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Infrastructure platforms that need a brief promise and recognizable technical building blocks.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-webflow", "name": "Webflow", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A large left-aligned headline and paired actions introduce a web platform, followed by a strip of varied website examples that makes the output visible.", "use_for": "Creation platforms that can demonstrate their range through finished work.", "source_url": "https://webflow.com/", "reference_url": "https://swipefile.design/ref/saas-webflow/", "screenshot_url": "https://swipefile.design/_astro/preview.vfWzxHp9.webp", "thumbnail_url": "https://swipefile.design/_astro/card.x-4ryFAB.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "website-builder", "design", "platform", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Confident and output-focused", "colors": "White, black, blue accents", "typography": "Large heavy sans headline", "layout": "Left-aligned introduction above a horizontal gallery of website examples", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Flat white page with crisp preview cards", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: Webflow\nSource: https://webflow.com/\nSwipefile reference: https://swipefile.design/ref/saas-webflow/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Confident and output-focused\n- colors: White, black, blue accents\n- typography: Large heavy sans headline\n- layout: Left-aligned introduction above a horizontal gallery of website examples\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Flat white page with crisp preview cards\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Creation platforms that can demonstrate their range through finished work.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." }, { "slug": "saas-workos", "name": "WorkOS", "kind": "inspiration", "archetype": "SaaS Marketing", "summary": "A split headline emphasizes enterprise readiness in purple, while compact interface fragments suggest authentication and user-management capabilities.", "use_for": "Developer platforms turning an enterprise capability into a clear product promise.", "source_url": "https://workos.com/", "reference_url": "https://swipefile.design/ref/saas-workos/", "screenshot_url": "https://swipefile.design/_astro/preview.CsACvN60.webp", "thumbnail_url": "https://swipefile.design/_astro/card.BuKcyLxa.webp", "captured": "2026-09-05", "capture_scope": "viewport", "provenance": "live", "tags": [ "authentication", "developer", "enterprise", "saas-library", "popular-saas-batch", "september-2026" ], "patterns": [], "design_notes": { "mood": "Composed and technical", "colors": "White, charcoal, lavender", "typography": "Large sans headline with a colored second line", "layout": "Left-aligned message and actions beside floating UI fragments, with customer logos below", "motion": "Static opening-screen capture. Visit the source to study transitions and interactive behavior.", "texture": "Soft shadows and pale interface panels", "dont": "Adapt the hierarchy to your own product and content; use your own identity and imagery." }, "recreation_prompt": "# Design reference: WorkOS\nSource: https://workos.com/\nSwipefile reference: https://swipefile.design/ref/saas-workos/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- mood: Composed and technical\n- colors: White, charcoal, lavender\n- typography: Large sans headline with a colored second line\n- layout: Left-aligned message and actions beside floating UI fragments, with customer logos below\n- motion: Static opening-screen capture. Visit the source to study transitions and interactive behavior.\n- texture: Soft shadows and pale interface panels\n- dont: Adapt the hierarchy to your own product and content; use your own identity and imagery.\n\nUseful for: Developer platforms turning an enterprise capability into a clear product promise.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence." } ] }