{
  "version": 1,
  "name": "Inside SaaS · Public interfaces and demos",
  "url": "https://swipefile.design/board/inside-saas-public-interfaces-and-demos/",
  "markdown_url": "https://swipefile.design/board/inside-saas-public-interfaces-and-demos/notes.md",
  "json_url": "https://swipefile.design/board/inside-saas-public-interfaces-and-demos/data.json",
  "pdf_url": "https://swipefile.design/board/inside-saas-public-interfaces-and-demos/export.pdf",
  "reference_count": 17,
  "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-ui-affine-workspace",
      "name": "AFFiNE — Local document workspace",
      "kind": "app",
      "archetype": "Documents & Knowledge",
      "summary": "An unsigned workspace opens a getting-started document beside a compact navigation rail, with a visible notice that the content is stored locally.",
      "use_for": "Document editors that introduce features inside an editable workspace.",
      "source_url": "https://app.affine.pro/",
      "reference_url": "https://swipefile.design/ref/saas-ui-affine-workspace/",
      "screenshot_url": "https://swipefile.design/_astro/preview.Cu1pAou7.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CrETtbT5.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "editor",
        "documents",
        "local-workspace",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "AFFiNE unsigned local workspace and Getting Started document.",
        "nav": "Left rail includes search, all documents, journals, settings, and organization tools.",
        "layout": "Persistent sidebar beside a spacious document canvas and narrow document toolbar.",
        "density": "Low in the document, compact in the navigation.",
        "color": "White and soft gray with a pale red local-storage notice.",
        "typography": "Bold document title, readable body copy, small sidebar labels.",
        "pattern": "Teach the editor through a starter document while keeping the same navigation as the working product.",
        "states": "Local browser storage is explicitly disclosed; this is not a signed-in cloud workspace.",
        "dont": "Do not hide the distinction between local storage and synchronized data."
      },
      "recreation_prompt": "# Design reference: AFFiNE — Local document workspace\nSource: https://app.affine.pro/\nSwipefile reference: https://swipefile.design/ref/saas-ui-affine-workspace/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: AFFiNE unsigned local workspace and Getting Started document.\n- nav: Left rail includes search, all documents, journals, settings, and organization tools.\n- layout: Persistent sidebar beside a spacious document canvas and narrow document toolbar.\n- density: Low in the document, compact in the navigation.\n- color: White and soft gray with a pale red local-storage notice.\n- typography: Bold document title, readable body copy, small sidebar labels.\n- pattern: Teach the editor through a starter document while keeping the same navigation as the working product.\n- states: Local browser storage is explicitly disclosed; this is not a signed-in cloud workspace.\n- dont: Do not hide the distinction between local storage and synchronized data.\n\nUseful for: Document editors that introduce features inside an editable workspace.\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-ui-asana-create-account",
      "name": "Asana — Account entry",
      "kind": "app",
      "archetype": "Forms & Onboarding",
      "summary": "A centered account-entry panel offers Google and Microsoft before a clearly separated email path.",
      "use_for": "Work software that supports both company identity providers and email entry.",
      "source_url": "https://app.asana.com/-/login",
      "reference_url": "https://swipefile.design/ref/saas-ui-asana-create-account/",
      "screenshot_url": "https://swipefile.design/_astro/preview.DedUDC-N.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.Bf3nlEsH.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "authentication",
        "sign-in",
        "sso",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Asana public sign-in screen reached from its signup route.",
        "nav": "Minimal entry screen with corporate and support links in the footer.",
        "layout": "Narrow centered form with provider buttons, divider, email field, and Continue.",
        "density": "Low and task-focused.",
        "color": "White, dark text, pale gray boundaries, small brand accents.",
        "typography": "Simple sans heading with clear provider and field labels.",
        "pattern": "Present provider-based access and email as distinct, understandable routes.",
        "states": "Initial sign-in state, not an authenticated dashboard or completed signup.",
        "dont": "Do not imply that clicking Continue immediately creates an account when the next step may identify an existing one."
      },
      "recreation_prompt": "# Design reference: Asana — Account entry\nSource: https://app.asana.com/-/login\nSwipefile reference: https://swipefile.design/ref/saas-ui-asana-create-account/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Asana public sign-in screen reached from its signup route.\n- nav: Minimal entry screen with corporate and support links in the footer.\n- layout: Narrow centered form with provider buttons, divider, email field, and Continue.\n- density: Low and task-focused.\n- color: White, dark text, pale gray boundaries, small brand accents.\n- typography: Simple sans heading with clear provider and field labels.\n- pattern: Present provider-based access and email as distinct, understandable routes.\n- states: Initial sign-in state, not an authenticated dashboard or completed signup.\n- dont: Do not imply that clicking Continue immediately creates an account when the next step may identify an existing one.\n\nUseful for: Work software that supports both company identity providers and email entry.\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-ui-attio-sign-in",
      "name": "Attio — Sign in",
      "kind": "app",
      "archetype": "Forms & Onboarding",
      "summary": "A very restrained sign-in screen puts Google access and an email field in a narrow centered column beneath the wordmark.",
      "use_for": "Business software that needs an uncluttered entry point.",
      "source_url": "https://app.attio.com/auth/sign-in",
      "reference_url": "https://swipefile.design/ref/saas-ui-attio-sign-in/",
      "screenshot_url": "https://swipefile.design/_astro/preview.D46f67C1.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.BIS9-Iph.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "crm",
        "authentication",
        "sign-in",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Attio public sign-in page.",
        "nav": "Only essential legal and support links accompany the form.",
        "layout": "Wordmark above a small central authentication cluster with substantial white space.",
        "density": "Very low.",
        "color": "White, dark text, blue Continue button, light field border.",
        "typography": "Compact sans interface labels and a small sign-in heading.",
        "pattern": "Reduce account entry to the available identity paths and a clear next action.",
        "states": "Unsigned account entry; no CRM workspace was accessed.",
        "dont": "Preserve clear labels and recovery behavior even when the visual presentation is minimal."
      },
      "recreation_prompt": "# Design reference: Attio — Sign in\nSource: https://app.attio.com/auth/sign-in\nSwipefile reference: https://swipefile.design/ref/saas-ui-attio-sign-in/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Attio public sign-in page.\n- nav: Only essential legal and support links accompany the form.\n- layout: Wordmark above a small central authentication cluster with substantial white space.\n- density: Very low.\n- color: White, dark text, blue Continue button, light field border.\n- typography: Compact sans interface labels and a small sign-in heading.\n- pattern: Reduce account entry to the available identity paths and a clear next action.\n- states: Unsigned account entry; no CRM workspace was accessed.\n- dont: Preserve clear labels and recovery behavior even when the visual presentation is minimal.\n\nUseful for: Business software that needs an uncluttered entry point.\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-ui-posthog-create-account",
      "name": "PostHog — Create account",
      "kind": "app",
      "archetype": "Forms & Onboarding",
      "summary": "A cream signup panel on a green backdrop places a data-region choice before email entry and three identity-provider options.",
      "use_for": "Infrastructure and analytics signup flows where data location is an early decision.",
      "source_url": "https://us.posthog.com/signup",
      "reference_url": "https://swipefile.design/ref/saas-ui-posthog-create-account/",
      "screenshot_url": "https://swipefile.design/_astro/preview.CFM2897F.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.BPxn3uFx.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "analytics",
        "signup",
        "data-region",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "PostHog public account-creation screen.",
        "nav": "Single account card with an existing-account link below.",
        "layout": "Centered stacked region selector, email field, Continue action, and provider icons.",
        "density": "Low with short, clearly grouped form sections.",
        "color": "Soft green background, warm cream panel, orange primary action.",
        "typography": "Plain sans labels with small monospaced introductory text.",
        "pattern": "Expose a consequential setup choice before account creation and explain it beside the field.",
        "states": "Initial signup, with region selection visible; no account was created.",
        "dont": "Do not use unlabeled provider icons or bury the meaning of the region choice."
      },
      "recreation_prompt": "# Design reference: PostHog — Create account\nSource: https://us.posthog.com/signup\nSwipefile reference: https://swipefile.design/ref/saas-ui-posthog-create-account/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: PostHog public account-creation screen.\n- nav: Single account card with an existing-account link below.\n- layout: Centered stacked region selector, email field, Continue action, and provider icons.\n- density: Low with short, clearly grouped form sections.\n- color: Soft green background, warm cream panel, orange primary action.\n- typography: Plain sans labels with small monospaced introductory text.\n- pattern: Expose a consequential setup choice before account creation and explain it beside the field.\n- states: Initial signup, with region selection visible; no account was created.\n- dont: Do not use unlabeled provider icons or bury the meaning of the region choice.\n\nUseful for: Infrastructure and analytics signup flows where data location is an early decision.\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-ui-canny-feature-requests",
      "name": "Canny — Feature requests",
      "kind": "app",
      "archetype": "Feedback & Roadmaps",
      "summary": "Board navigation and a compact suggestion form sit beside a ranked feature list with vote counts, search, and sorting.",
      "use_for": "Public feedback portals that combine discovery of existing ideas with an obvious submission route.",
      "source_url": "https://feedback.canny.io/feature-requests",
      "reference_url": "https://swipefile.design/ref/saas-ui-canny-feature-requests/",
      "screenshot_url": "https://swipefile.design/_astro/preview.fvMZd9yL.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.Dfr_fmSW.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "feedback",
        "voting",
        "requests",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Canny public Feature Requests board.",
        "nav": "Top tabs for roadmap, feedback, and changelog; a left list switches feedback boards.",
        "layout": "Left context and submission area beside a broader list of request rows.",
        "density": "Moderate, using compact vote counters and concise request summaries.",
        "color": "White, pale gray boundaries, muted text, restrained accent controls.",
        "typography": "Bold request titles with smaller metadata and board labels.",
        "pattern": "Put existing requests beside the new-request path so visitors can check for duplicates first.",
        "states": "Populated public board, signed out; no suggestion or vote was submitted.",
        "dont": "Do not present votes as delivery commitments or hide the distinction between requested and planned work."
      },
      "recreation_prompt": "# Design reference: Canny — Feature requests\nSource: https://feedback.canny.io/feature-requests\nSwipefile reference: https://swipefile.design/ref/saas-ui-canny-feature-requests/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Canny public Feature Requests board.\n- nav: Top tabs for roadmap, feedback, and changelog; a left list switches feedback boards.\n- layout: Left context and submission area beside a broader list of request rows.\n- density: Moderate, using compact vote counters and concise request summaries.\n- color: White, pale gray boundaries, muted text, restrained accent controls.\n- typography: Bold request titles with smaller metadata and board labels.\n- pattern: Put existing requests beside the new-request path so visitors can check for duplicates first.\n- states: Populated public board, signed out; no suggestion or vote was submitted.\n- dont: Do not present votes as delivery commitments or hide the distinction between requested and planned work.\n\nUseful for: Public feedback portals that combine discovery of existing ideas with an obvious submission route.\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-ui-canny-roadmap",
      "name": "Canny — Roadmap",
      "kind": "app",
      "archetype": "Feedback & Roadmaps",
      "summary": "A public roadmap groups requests into status columns, with vote counts and a board summary supporting scanning.",
      "use_for": "Product roadmaps communicating work status without exposing a full internal project tool.",
      "source_url": "https://feedback.canny.io/",
      "reference_url": "https://swipefile.design/ref/saas-ui-canny-roadmap/",
      "screenshot_url": "https://swipefile.design/_astro/preview.FDkDbfpn.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.Dp8iVddS.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "roadmap",
        "kanban",
        "planning",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Canny public roadmap.",
        "nav": "Top-level roadmap, feedback, and changelog tabs with board links alongside.",
        "layout": "Status columns contain compact request cards beneath a shared roadmap header.",
        "density": "Moderate to high where columns contain many requests.",
        "color": "White background, gray borders, subtle status accents.",
        "typography": "Small status headings and clear request titles.",
        "pattern": "Use status columns to show progress while keeping each request connected to its supporting detail.",
        "states": "Published roadmap state; statuses and request counts can change.",
        "dont": "Do not imply dates or commitments that are not actually stated."
      },
      "recreation_prompt": "# Design reference: Canny — Roadmap\nSource: https://feedback.canny.io/\nSwipefile reference: https://swipefile.design/ref/saas-ui-canny-roadmap/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Canny public roadmap.\n- nav: Top-level roadmap, feedback, and changelog tabs with board links alongside.\n- layout: Status columns contain compact request cards beneath a shared roadmap header.\n- density: Moderate to high where columns contain many requests.\n- color: White background, gray borders, subtle status accents.\n- typography: Small status headings and clear request titles.\n- pattern: Use status columns to show progress while keeping each request connected to its supporting detail.\n- states: Published roadmap state; statuses and request counts can change.\n- dont: Do not imply dates or commitments that are not actually stated.\n\nUseful for: Product roadmaps communicating work status without exposing a full internal project tool.\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-ui-featurebase-roadmap",
      "name": "Featurebase — Roadmap",
      "kind": "app",
      "archetype": "Feedback & Roadmaps",
      "summary": "A wide public roadmap distributes requests across four status columns, with votes and comments visible on compact cards.",
      "use_for": "Multi-product public planning boards that need a quick status overview.",
      "source_url": "https://feedback.featurebase.app/roadmap",
      "reference_url": "https://swipefile.design/ref/saas-ui-featurebase-roadmap/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BZI6AqQh.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DHEjGlra.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "roadmap",
        "kanban",
        "feedback",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Featurebase public Universal Roadmap.",
        "nav": "Shared feedback, roadmap, updates, support, and help-center navigation.",
        "layout": "Wide column board beneath a title, short explanation, and scope controls.",
        "density": "Moderate, balancing card counts with readable titles.",
        "color": "White and light gray with restrained colored status markers.",
        "typography": "Strong page title, compact column labels, clear card text.",
        "pattern": "Keep progress status visible at the column level and supporting engagement on each card.",
        "states": "Public populated roadmap; no account or editing access used.",
        "dont": "Avoid relying on status color alone or treating vote totals as promised priority."
      },
      "recreation_prompt": "# Design reference: Featurebase — Roadmap\nSource: https://feedback.featurebase.app/roadmap\nSwipefile reference: https://swipefile.design/ref/saas-ui-featurebase-roadmap/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Featurebase public Universal Roadmap.\n- nav: Shared feedback, roadmap, updates, support, and help-center navigation.\n- layout: Wide column board beneath a title, short explanation, and scope controls.\n- density: Moderate, balancing card counts with readable titles.\n- color: White and light gray with restrained colored status markers.\n- typography: Strong page title, compact column labels, clear card text.\n- pattern: Keep progress status visible at the column level and supporting engagement on each card.\n- states: Public populated roadmap; no account or editing access used.\n- dont: Avoid relying on status color alone or treating vote totals as promised priority.\n\nUseful for: Multi-product public planning boards that need a quick status overview.\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-ui-featurebase-changelog",
      "name": "Featurebase — Changelog",
      "kind": "app",
      "archetype": "Content & Updates",
      "summary": "Product updates use a narrow date rail and large visual posts, with subscription and search options near the feed heading.",
      "use_for": "Release feeds that need to explain changes with more context than a compact notification list.",
      "source_url": "https://feedback.featurebase.app/changelog",
      "reference_url": "https://swipefile.design/ref/saas-ui-featurebase-changelog/",
      "screenshot_url": "https://swipefile.design/_astro/preview.DpC_lvMZ.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.Czkj_kjZ.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "changelog",
        "updates",
        "publishing",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Featurebase public product Updates feed.",
        "nav": "Shared portal navigation keeps feedback, roadmap, updates, and support adjacent.",
        "layout": "Chronological posts pair dates with large image-led update content.",
        "density": "Low to moderate; generous space separates releases.",
        "color": "White canvas, muted dates, varied product imagery.",
        "typography": "Large post titles, readable summaries, small date metadata.",
        "pattern": "Give release content room for explanation while preserving a predictable chronological structure.",
        "states": "Published public feed; subscription was not activated.",
        "dont": "Do not make visitors subscribe before they can understand what changed."
      },
      "recreation_prompt": "# Design reference: Featurebase — Changelog\nSource: https://feedback.featurebase.app/changelog\nSwipefile reference: https://swipefile.design/ref/saas-ui-featurebase-changelog/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Featurebase public product Updates feed.\n- nav: Shared portal navigation keeps feedback, roadmap, updates, and support adjacent.\n- layout: Chronological posts pair dates with large image-led update content.\n- density: Low to moderate; generous space separates releases.\n- color: White canvas, muted dates, varied product imagery.\n- typography: Large post titles, readable summaries, small date metadata.\n- pattern: Give release content room for explanation while preserving a predictable chronological structure.\n- states: Published public feed; subscription was not activated.\n- dont: Do not make visitors subscribe before they can understand what changed.\n\nUseful for: Release feeds that need to explain changes with more context than a compact notification 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-ui-fathom-analytics-dashboard",
      "name": "Fathom — Analytics dashboard",
      "kind": "app",
      "archetype": "Analytics Dashboard",
      "summary": "A dark metric strip anchors a light analytics dashboard with a broad purple trend chart and paired breakdown tables.",
      "use_for": "Web analytics dashboards that need an immediate summary and a clear path into supporting dimensions.",
      "source_url": "https://app.usefathom.com/demo",
      "reference_url": "https://swipefile.design/ref/saas-ui-fathom-analytics-dashboard/",
      "screenshot_url": "https://swipefile.design/_astro/preview.DG6B3g5w.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.C5d7-dQ1.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "analytics",
        "metrics",
        "demo",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Fathom public Hilarious Platypus analytics demo.",
        "nav": "Site name and options at the top; date range and comparison controls above the data.",
        "layout": "Summary strip, full-width time series, then side-by-side breakdown tables.",
        "density": "Moderate to high in tables, spacious around headline metrics.",
        "color": "Black metric band, white surface, purple chart and highlights.",
        "typography": "Large numeric summaries above compact descriptive labels.",
        "pattern": "Arrange summary, time trend, and breakdowns in the order a reader asks questions.",
        "states": "Populated public demo; displayed metrics are example data, not Swipe analytics.",
        "dont": "Do not present demo metrics as evidence of actual business performance."
      },
      "recreation_prompt": "# Design reference: Fathom — Analytics dashboard\nSource: https://app.usefathom.com/demo\nSwipefile reference: https://swipefile.design/ref/saas-ui-fathom-analytics-dashboard/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Fathom public Hilarious Platypus analytics demo.\n- nav: Site name and options at the top; date range and comparison controls above the data.\n- layout: Summary strip, full-width time series, then side-by-side breakdown tables.\n- density: Moderate to high in tables, spacious around headline metrics.\n- color: Black metric band, white surface, purple chart and highlights.\n- typography: Large numeric summaries above compact descriptive labels.\n- pattern: Arrange summary, time trend, and breakdowns in the order a reader asks questions.\n- states: Populated public demo; displayed metrics are example data, not Swipe analytics.\n- dont: Do not present demo metrics as evidence of actual business performance.\n\nUseful for: Web analytics dashboards that need an immediate summary and a clear path into supporting dimensions.\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-ui-seline-shared-analytics",
      "name": "Seline — Shared analytics",
      "kind": "app",
      "archetype": "Analytics Dashboard",
      "summary": "A shared analytics page combines headline metrics, blue traffic charts, and compact source and page breakdowns with lightweight filtering.",
      "use_for": "Shareable analytics views that should remain readable without the full product navigation.",
      "source_url": "https://app.seline.com/share/edain.io",
      "reference_url": "https://swipefile.design/ref/saas-ui-seline-shared-analytics/",
      "screenshot_url": "https://swipefile.design/_astro/preview.CbvUqOPh.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DFD259Xn.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "analytics",
        "public-share",
        "metrics",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Seline public analytics share for edain.io.",
        "nav": "Small site identity and date/filter controls; no full account sidebar.",
        "layout": "Headline summaries above paired chart panels and tabular breakdowns.",
        "density": "Moderate, with aligned values and restrained boundaries.",
        "color": "White, pale gray, blue charts and small change indicators.",
        "typography": "Prominent metric values and compact sans labels.",
        "pattern": "Keep shared reports focused on data context, date selection, and the main comparisons.",
        "states": "Public populated share; values can change and belong to the source website.",
        "dont": "Keep the site identity and date range visible when sharing or exporting the view."
      },
      "recreation_prompt": "# Design reference: Seline — Shared analytics\nSource: https://app.seline.com/share/edain.io\nSwipefile reference: https://swipefile.design/ref/saas-ui-seline-shared-analytics/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Seline public analytics share for edain.io.\n- nav: Small site identity and date/filter controls; no full account sidebar.\n- layout: Headline summaries above paired chart panels and tabular breakdowns.\n- density: Moderate, with aligned values and restrained boundaries.\n- color: White, pale gray, blue charts and small change indicators.\n- typography: Prominent metric values and compact sans labels.\n- pattern: Keep shared reports focused on data context, date selection, and the main comparisons.\n- states: Public populated share; values can change and belong to the source website.\n- dont: Keep the site identity and date range visible when sharing or exporting the view.\n\nUseful for: Shareable analytics views that should remain readable without the full product navigation.\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-ui-gitbook-documentation",
      "name": "GitBook — Documentation",
      "kind": "app",
      "archetype": "Documents & Knowledge",
      "summary": "Documentation combines a persistent content tree, top search and assistant access, and a spacious introduction with clear next-step choices.",
      "use_for": "Product documentation that needs to serve both first-time readers and people locating a specific answer.",
      "source_url": "https://gitbook.com/docs/",
      "reference_url": "https://swipefile.design/ref/saas-ui-gitbook-documentation/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BxgihuyF.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.QxOH-itA.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "documentation",
        "navigation",
        "knowledge-base",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "GitBook public product documentation homepage.",
        "nav": "Hierarchical left contents plus top-level documentation and developer sections.",
        "layout": "Fixed content navigation beside a broad readable document area with introductory cards.",
        "density": "Compact in navigation, low in the main reading area.",
        "color": "White and soft gray with a warm orange introductory illustration.",
        "typography": "Strong page title, readable body text, compact tree labels.",
        "pattern": "Let readers browse the structure or search directly without switching to a different interface.",
        "states": "Public documentation entry page; no private knowledge base was accessed.",
        "dont": "Do not let assistant entry replace a visible navigation tree and readable source material."
      },
      "recreation_prompt": "# Design reference: GitBook — Documentation\nSource: https://gitbook.com/docs/\nSwipefile reference: https://swipefile.design/ref/saas-ui-gitbook-documentation/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: GitBook public product documentation homepage.\n- nav: Hierarchical left contents plus top-level documentation and developer sections.\n- layout: Fixed content navigation beside a broad readable document area with introductory cards.\n- density: Compact in navigation, low in the main reading area.\n- color: White and soft gray with a warm orange introductory illustration.\n- typography: Strong page title, readable body text, compact tree labels.\n- pattern: Let readers browse the structure or search directly without switching to a different interface.\n- states: Public documentation entry page; no private knowledge base was accessed.\n- dont: Do not let assistant entry replace a visible navigation tree and readable source material.\n\nUseful for: Product documentation that needs to serve both first-time readers and people locating a specific answer.\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-ui-intercom-help-center",
      "name": "Intercom — Help center",
      "kind": "app",
      "archetype": "Support & Help",
      "summary": "A landscape hero carries a prominent help search, followed by a grid of knowledge categories with article and author counts.",
      "use_for": "Help centers that offer both direct search and a browsable knowledge structure.",
      "source_url": "https://www.intercom.com/help/en/",
      "reference_url": "https://swipefile.design/ref/saas-ui-intercom-help-center/",
      "screenshot_url": "https://swipefile.design/_astro/preview.CziXMd2w.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.Bf9J9lXT.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "help-center",
        "knowledge-base",
        "search",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Intercom public English help center.",
        "nav": "Small product and language utilities above a large knowledge search.",
        "layout": "Illustrated search hero followed by a consistent grid of topic cards.",
        "density": "Low in the hero, moderate across the category grid.",
        "color": "Muted landscape colors, white cards, dark text and fine gray borders.",
        "typography": "Clear search and topic labels with small metadata.",
        "pattern": "Pair prominent search with category cards that communicate the breadth of each topic.",
        "states": "Public help-center index; search results and support conversations are not shown.",
        "dont": "Avoid making visitors open every category just to understand what it contains."
      },
      "recreation_prompt": "# Design reference: Intercom — Help center\nSource: https://www.intercom.com/help/en/\nSwipefile reference: https://swipefile.design/ref/saas-ui-intercom-help-center/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Intercom public English help center.\n- nav: Small product and language utilities above a large knowledge search.\n- layout: Illustrated search hero followed by a consistent grid of topic cards.\n- density: Low in the hero, moderate across the category grid.\n- color: Muted landscape colors, white cards, dark text and fine gray borders.\n- typography: Clear search and topic labels with small metadata.\n- pattern: Pair prominent search with category cards that communicate the breadth of each topic.\n- states: Public help-center index; search results and support conversations are not shown.\n- dont: Avoid making visitors open every category just to understand what it contains.\n\nUseful for: Help centers that offer both direct search and a browsable knowledge structure.\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-ui-odoo-public-demo",
      "name": "Odoo — Public demo",
      "kind": "app",
      "archetype": "Navigation",
      "summary": "A public demo launcher presents business modules as a spacious icon grid, with a clear banner identifying the demo database.",
      "use_for": "Multi-module business suites that need a simple starting point across many tools.",
      "source_url": "https://demo6.odoo.com/odoo",
      "reference_url": "https://swipefile.design/ref/saas-ui-odoo-public-demo/",
      "screenshot_url": "https://swipefile.design/_astro/preview.2eYoEZB2.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.BLpfEwSg.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "erp",
        "app-launcher",
        "demo",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Odoo public Demo Company application launcher.",
        "nav": "Compact global toolbar above the module grid.",
        "layout": "Centered rows of labeled application icons on a soft gradient canvas.",
        "density": "Moderate, with generous spacing between equal-sized targets.",
        "color": "Pastel background, white icon tiles, varied module symbols.",
        "typography": "Small uniform application labels.",
        "pattern": "Use a consistent icon-and-label grid to make a broad suite navigable without a crowded menu.",
        "states": "Public demo database, explicitly labeled as a demo; no records were changed.",
        "dont": "Do not rely on unfamiliar icons without text labels or hide the demo state."
      },
      "recreation_prompt": "# Design reference: Odoo — Public demo\nSource: https://demo6.odoo.com/odoo\nSwipefile reference: https://swipefile.design/ref/saas-ui-odoo-public-demo/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Odoo public Demo Company application launcher.\n- nav: Compact global toolbar above the module grid.\n- layout: Centered rows of labeled application icons on a soft gradient canvas.\n- density: Moderate, with generous spacing between equal-sized targets.\n- color: Pastel background, white icon tiles, varied module symbols.\n- typography: Small uniform application labels.\n- pattern: Use a consistent icon-and-label grid to make a broad suite navigable without a crowded menu.\n- states: Public demo database, explicitly labeled as a demo; no records were changed.\n- dont: Do not rely on unfamiliar icons without text labels or hide the demo state.\n\nUseful for: Multi-module business suites that need a simple starting point across many tools.\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-ui-odoo-crm",
      "name": "Odoo — CRM demo",
      "kind": "app",
      "archetype": "CRM & Sales",
      "summary": "A CRM pipeline groups opportunities by stage, with stage totals and compact cards showing value, customer, tags, and ownership.",
      "use_for": "Sales pipelines that need to connect deal status with value and the next operational context.",
      "source_url": "https://demo5.odoo.com/odoo/crm",
      "reference_url": "https://swipefile.design/ref/saas-ui-odoo-crm/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BTrzjXcI.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CEHlWZ08.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "crm",
        "pipeline",
        "kanban",
        "demo",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Odoo public Demo Company CRM Pipeline.",
        "nav": "CRM module links above a shared search, filters, and view switcher.",
        "layout": "Four status columns with summarized value above opportunity cards.",
        "density": "High on cards, balanced by clear columns and whitespace between stages.",
        "color": "Light gray canvas, white cards, restrained status colors and tags.",
        "typography": "Compact sans deal titles and metadata with stronger currency values.",
        "pattern": "Show stage totals and card-level context together so the board supports both overview and action.",
        "states": "Populated sample pipeline in a public demo; no deals were edited or moved.",
        "dont": "Do not overload cards with every CRM field or communicate stage exclusively through color."
      },
      "recreation_prompt": "# Design reference: Odoo — CRM demo\nSource: https://demo5.odoo.com/odoo/crm\nSwipefile reference: https://swipefile.design/ref/saas-ui-odoo-crm/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Odoo public Demo Company CRM Pipeline.\n- nav: CRM module links above a shared search, filters, and view switcher.\n- layout: Four status columns with summarized value above opportunity cards.\n- density: High on cards, balanced by clear columns and whitespace between stages.\n- color: Light gray canvas, white cards, restrained status colors and tags.\n- typography: Compact sans deal titles and metadata with stronger currency values.\n- pattern: Show stage totals and card-level context together so the board supports both overview and action.\n- states: Populated sample pipeline in a public demo; no deals were edited or moved.\n- dont: Do not overload cards with every CRM field or communicate stage exclusively through color.\n\nUseful for: Sales pipelines that need to connect deal status with value and the next operational context.\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-ui-odoo-sales",
      "name": "Odoo — Sales demo",
      "kind": "app",
      "archetype": "CRM & Sales",
      "summary": "A dense quotations table aligns customer, owner, activities, amount, and status under a compact search and view toolbar.",
      "use_for": "Business tables where users compare many records and scan financial values quickly.",
      "source_url": "https://demo5.odoo.com/odoo/sales",
      "reference_url": "https://swipefile.design/ref/saas-ui-odoo-sales/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BDdMmt38.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.BsjoMyI5.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "sales",
        "data-table",
        "quotations",
        "demo",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Odoo public Demo Company Sales quotations list.",
        "nav": "Sales module navigation above filter chips, search, pagination, and view controls.",
        "layout": "Full-width table with checkboxes, aligned columns, and narrow row spacing.",
        "density": "High, designed for record scanning.",
        "color": "White and pale gray rows, green status pills, restrained purple action.",
        "typography": "Small sans data labels with aligned numeric amounts.",
        "pattern": "Combine a broad table with persistent filtering and visible record counts.",
        "states": "Populated sample records in the public demo; no quotation was created or changed.",
        "dont": "Do not reduce row spacing so far that selection and status become difficult to distinguish."
      },
      "recreation_prompt": "# Design reference: Odoo — Sales demo\nSource: https://demo5.odoo.com/odoo/sales\nSwipefile reference: https://swipefile.design/ref/saas-ui-odoo-sales/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Odoo public Demo Company Sales quotations list.\n- nav: Sales module navigation above filter chips, search, pagination, and view controls.\n- layout: Full-width table with checkboxes, aligned columns, and narrow row spacing.\n- density: High, designed for record scanning.\n- color: White and pale gray rows, green status pills, restrained purple action.\n- typography: Small sans data labels with aligned numeric amounts.\n- pattern: Combine a broad table with persistent filtering and visible record counts.\n- states: Populated sample records in the public demo; no quotation was created or changed.\n- dont: Do not reduce row spacing so far that selection and status become difficult to distinguish.\n\nUseful for: Business tables where users compare many records and scan financial values 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-ui-odoo-calendar",
      "name": "Odoo — Calendar demo",
      "kind": "app",
      "archetype": "Calendar & Scheduling",
      "summary": "A weekly time grid places all-day items above hourly appointments, with a mini calendar and calendar-owner filters in a right rail.",
      "use_for": "Team calendars that need both precise scheduling and quick navigation between dates.",
      "source_url": "https://demo5.odoo.com/odoo/calendar",
      "reference_url": "https://swipefile.design/ref/saas-ui-odoo-calendar/",
      "screenshot_url": "https://swipefile.design/_astro/preview.tMoaRMRm.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.rkNsFpTk.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "calendar",
        "week-view",
        "demo",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Odoo public Demo Company Calendar, week view.",
        "nav": "Calendar module links above Today, date navigation, view selection, and search.",
        "layout": "Seven-day time grid with an all-day row and a narrow right sidebar.",
        "density": "Moderate, keeping time slots readable and sidebar controls compact.",
        "color": "White and gray grid, pale colored event blocks, small calendar-color markers.",
        "typography": "Compact day/date labels and small event text.",
        "pattern": "Separate all-day and timed events while keeping date navigation and calendar visibility close by.",
        "states": "Public demo with sample meetings; no event was opened, added, or edited.",
        "dont": "Use more than color to distinguish calendars and preserve readable event text in narrow cells."
      },
      "recreation_prompt": "# Design reference: Odoo — Calendar demo\nSource: https://demo5.odoo.com/odoo/calendar\nSwipefile reference: https://swipefile.design/ref/saas-ui-odoo-calendar/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Odoo public Demo Company Calendar, week view.\n- nav: Calendar module links above Today, date navigation, view selection, and search.\n- layout: Seven-day time grid with an all-day row and a narrow right sidebar.\n- density: Moderate, keeping time slots readable and sidebar controls compact.\n- color: White and gray grid, pale colored event blocks, small calendar-color markers.\n- typography: Compact day/date labels and small event text.\n- pattern: Separate all-day and timed events while keeping date navigation and calendar visibility close by.\n- states: Public demo with sample meetings; no event was opened, added, or edited.\n- dont: Use more than color to distinguish calendars and preserve readable event text in narrow cells.\n\nUseful for: Team calendars that need both precise scheduling and quick navigation between dates.\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-ui-grafana-business-metrics",
      "name": "Grafana — Business metrics",
      "kind": "app",
      "archetype": "Analytics Dashboard",
      "summary": "A dark public demo dashboard combines an explanatory panel, oversized activity metrics, and supporting time-series and review charts.",
      "use_for": "Operational dashboards that need context alongside several distinct metric types.",
      "source_url": "https://play.grafana.org/d/000000110/business-metrics",
      "reference_url": "https://swipefile.design/ref/saas-ui-grafana-business-metrics/",
      "screenshot_url": "https://swipefile.design/_astro/preview.CouhJLDc.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.09w3Va9V.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "dashboard",
        "metrics",
        "dark-ui",
        "demo",
        "saas-library",
        "popular-saas-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Grafana Play public Business Metrics demo dashboard.",
        "nav": "Persistent product sidebar with breadcrumbs and a shared time-range and refresh toolbar.",
        "layout": "Introductory panel above a row of large statistics and smaller chart panels.",
        "density": "High, organized into clearly bounded panels.",
        "color": "Charcoal surfaces, subtle gray borders, green metrics, red exception value, multicolor chart accents.",
        "typography": "Compact interface labels and oversized numerical indicators.",
        "pattern": "Apply one date context to a grid of metrics while using text panels to explain how to interpret them.",
        "states": "Populated public demo; sample values and time windows can change.",
        "dont": "Do not rely only on red and green or display large numbers without context and units."
      },
      "recreation_prompt": "# Design reference: Grafana — Business metrics\nSource: https://play.grafana.org/d/000000110/business-metrics\nSwipefile reference: https://swipefile.design/ref/saas-ui-grafana-business-metrics/\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 interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Grafana Play public Business Metrics demo dashboard.\n- nav: Persistent product sidebar with breadcrumbs and a shared time-range and refresh toolbar.\n- layout: Introductory panel above a row of large statistics and smaller chart panels.\n- density: High, organized into clearly bounded panels.\n- color: Charcoal surfaces, subtle gray borders, green metrics, red exception value, multicolor chart accents.\n- typography: Compact interface labels and oversized numerical indicators.\n- pattern: Apply one date context to a grid of metrics while using text panels to explain how to interpret them.\n- states: Populated public demo; sample values and time windows can change.\n- dont: Do not rely only on red and green or display large numbers without context and units.\n\nUseful for: Operational dashboards that need context alongside several distinct metric types.\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."
    }
  ]
}