{
  "version": 1,
  "name": "Fresh perspectives · App interfaces",
  "url": "https://swipefile.design/board/fresh-perspectives-app-interfaces/",
  "markdown_url": "https://swipefile.design/board/fresh-perspectives-app-interfaces/notes.md",
  "json_url": "https://swipefile.design/board/fresh-perspectives-app-interfaces/data.json",
  "pdf_url": "https://swipefile.design/board/fresh-perspectives-app-interfaces/export.pdf",
  "reference_count": 9,
  "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": "tailadmin-commerce-demo",
      "name": "TailAdmin — Commerce dashboard demo",
      "kind": "app",
      "archetype": "Dashboards",
      "summary": "A populated commerce dashboard template showing customers, orders, sales and a monthly target.",
      "use_for": "Combine headline metrics with a target visualization and a longer-range trend.",
      "source_url": "https://demo.tailadmin.com/",
      "reference_url": "https://swipefile.design/ref/tailadmin-commerce-demo/",
      "screenshot_url": "https://swipefile.design/_astro/preview.DOfno_R9.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DNx1mkTh.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "dashboard",
        "commerce",
        "demo",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "A populated commerce dashboard template showing customers, orders, sales and a monthly target.",
        "nav": "Persistent left sidebar and a compact top search/account bar.",
        "layout": "Small metric cards sit above a bar chart, a target gauge and a wide time-series chart.",
        "density": "Moderate density, grouped into rounded white panels.",
        "color": "White and light grey with violet chart accents and green/red change indicators.",
        "typography": "Small sans-serif labels and prominent metric values.",
        "pattern": "Combine headline metrics with a target visualization and a longer-range trend.",
        "states": "Public template demo with sample metrics; not a connected business account.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: TailAdmin — Commerce dashboard demo\nSource: https://demo.tailadmin.com/\nSwipefile reference: https://swipefile.design/ref/tailadmin-commerce-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: A populated commerce dashboard template showing customers, orders, sales and a monthly target.\n- nav: Persistent left sidebar and a compact top search/account bar.\n- layout: Small metric cards sit above a bar chart, a target gauge and a wide time-series chart.\n- density: Moderate density, grouped into rounded white panels.\n- color: White and light grey with violet chart accents and green/red change indicators.\n- typography: Small sans-serif labels and prominent metric values.\n- pattern: Combine headline metrics with a target visualization and a longer-range trend.\n- states: Public template demo with sample metrics; not a connected business account.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Combine headline metrics with a target visualization and a longer-range trend.\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": "tailadmin-sales-demo",
      "name": "TailAdmin — Sales dashboard demo",
      "kind": "app",
      "archetype": "Dashboards",
      "summary": "A populated sales dashboard template with summary metrics, a revenue chart and lower-level breakdowns.",
      "use_for": "Keep filters near the page title and let a wide trend chart anchor the analysis.",
      "source_url": "https://demo.tailadmin.com/sales",
      "reference_url": "https://swipefile.design/ref/tailadmin-sales-demo/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BBUeLfC0.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CHny3Mwy.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "dashboard",
        "sales",
        "demo",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "A populated sales dashboard template with summary metrics, a revenue chart and lower-level breakdowns.",
        "nav": "Shared sidebar navigation with top search and account tools.",
        "layout": "Page title and date actions precede a row of metrics and a wide trend chart.",
        "density": "Moderate density with a clear summary-to-detail order.",
        "color": "White surfaces, violet data lines and muted grey labels.",
        "typography": "Compact sans-serif labels with larger numerical values.",
        "pattern": "Keep filters near the page title and let a wide trend chart anchor the analysis.",
        "states": "Public template demo using sample sales data.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: TailAdmin — Sales dashboard demo\nSource: https://demo.tailadmin.com/sales\nSwipefile reference: https://swipefile.design/ref/tailadmin-sales-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: A populated sales dashboard template with summary metrics, a revenue chart and lower-level breakdowns.\n- nav: Shared sidebar navigation with top search and account tools.\n- layout: Page title and date actions precede a row of metrics and a wide trend chart.\n- density: Moderate density with a clear summary-to-detail order.\n- color: White surfaces, violet data lines and muted grey labels.\n- typography: Compact sans-serif labels with larger numerical values.\n- pattern: Keep filters near the page title and let a wide trend chart anchor the analysis.\n- states: Public template demo using sample sales data.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Keep filters near the page title and let a wide trend chart anchor the analysis.\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": "flowbite-users-demo",
      "name": "Flowbite — User management demo",
      "kind": "app",
      "archetype": "Tables & Lists",
      "summary": "A user-management table demo with roles, account types, ratings and status indicators.",
      "use_for": "Expose useful filters directly above the table and keep row metadata aligned.",
      "source_url": "https://flowbite.com/application-ui/demo/users/list/",
      "reference_url": "https://swipefile.design/ref/flowbite-users-demo/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BcHzwIUZ.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.BBL6Z0I_.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "users",
        "admin",
        "filters",
        "demo",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "A user-management table demo with roles, account types, ratings and status indicators.",
        "nav": "Icon rail plus a top search bar and breadcrumb.",
        "layout": "Title and create action sit above several filters and a full-width data table.",
        "density": "Dense, aligned rows with compact metadata.",
        "color": "White canvas, subtle grey separators, blue actions and colored status dots.",
        "typography": "Small sans-serif labels and stronger user names.",
        "pattern": "Expose useful filters directly above the table and keep row metadata aligned.",
        "states": "Populated public template demo with sample people and account data.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: Flowbite — User management demo\nSource: https://flowbite.com/application-ui/demo/users/list/\nSwipefile reference: https://swipefile.design/ref/flowbite-users-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: A user-management table demo with roles, account types, ratings and status indicators.\n- nav: Icon rail plus a top search bar and breadcrumb.\n- layout: Title and create action sit above several filters and a full-width data table.\n- density: Dense, aligned rows with compact metadata.\n- color: White canvas, subtle grey separators, blue actions and colored status dots.\n- typography: Small sans-serif labels and stronger user names.\n- pattern: Expose useful filters directly above the table and keep row metadata aligned.\n- states: Populated public template demo with sample people and account data.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Expose useful filters directly above the table and keep row metadata aligned.\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": "kleki-paint",
      "name": "Kleki — Painting workspace",
      "kind": "app",
      "archetype": "Editors & Tools",
      "summary": "A browser painting workspace in its blank-canvas starting state.",
      "use_for": "Keep the creation surface dominant and group drawing controls by task in one dock.",
      "source_url": "https://kleki.com/",
      "reference_url": "https://swipefile.design/ref/kleki-paint/",
      "screenshot_url": "https://swipefile.design/_astro/preview.DNqdiytQ.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DbW01S4p.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "canvas",
        "painting",
        "empty-state",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "A browser painting workspace in its blank-canvas starting state.",
        "nav": "A narrow tool dock is attached to the right edge of the canvas.",
        "layout": "The white canvas fills nearly the entire viewport beside a color picker, brush controls and layers.",
        "density": "Sparse canvas with a dense, compact tools column.",
        "color": "White drawing area, light grey controls and a saturated color picker.",
        "typography": "Tiny functional labels keep most space available for artwork.",
        "pattern": "Keep the creation surface dominant and group drawing controls by task in one dock.",
        "states": "Blank initial canvas; no user artwork or uploaded files.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: Kleki — Painting workspace\nSource: https://kleki.com/\nSwipefile reference: https://swipefile.design/ref/kleki-paint/\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: A browser painting workspace in its blank-canvas starting state.\n- nav: A narrow tool dock is attached to the right edge of the canvas.\n- layout: The white canvas fills nearly the entire viewport beside a color picker, brush controls and layers.\n- density: Sparse canvas with a dense, compact tools column.\n- color: White drawing area, light grey controls and a saturated color picker.\n- typography: Tiny functional labels keep most space available for artwork.\n- pattern: Keep the creation surface dominant and group drawing controls by task in one dock.\n- states: Blank initial canvas; no user artwork or uploaded files.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Keep the creation surface dominant and group drawing controls by task in one dock.\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": "svgomg-optimizer",
      "name": "SVGOMG — SVG optimizer",
      "kind": "app",
      "archetype": "Editors & Tools",
      "summary": "An SVG optimization tool displaying its built-in sample and configurable optimization settings.",
      "use_for": "Keep the visual result next to optimization controls so tradeoffs are easy to inspect.",
      "source_url": "https://jakearchibald.github.io/svgomg/",
      "reference_url": "https://swipefile.design/ref/svgomg-optimizer/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BBFZfp3H.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.BFPVIgba.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "svg",
        "optimization",
        "demo",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "An SVG optimization tool displaying its built-in sample and configurable optimization settings.",
        "nav": "Minimal top navigation switches between the image and markup.",
        "layout": "A large checkerboard preview is paired with a narrow settings panel.",
        "density": "Low-density preview with a dense list of switches and precision controls.",
        "color": "Neutral checkerboard, white settings panel, an indigo toolbar and teal export action.",
        "typography": "Compact sans-serif labels and clear section names.",
        "pattern": "Keep the visual result next to optimization controls so tradeoffs are easy to inspect.",
        "states": "Built-in sample loaded through the tool’s Demo action; no uploaded user file.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: SVGOMG — SVG optimizer\nSource: https://jakearchibald.github.io/svgomg/\nSwipefile reference: https://swipefile.design/ref/svgomg-optimizer/\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: An SVG optimization tool displaying its built-in sample and configurable optimization settings.\n- nav: Minimal top navigation switches between the image and markup.\n- layout: A large checkerboard preview is paired with a narrow settings panel.\n- density: Low-density preview with a dense list of switches and precision controls.\n- color: Neutral checkerboard, white settings panel, an indigo toolbar and teal export action.\n- typography: Compact sans-serif labels and clear section names.\n- pattern: Keep the visual result next to optimization controls so tradeoffs are easy to inspect.\n- states: Built-in sample loaded through the tool’s Demo action; no uploaded user file.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Keep the visual result next to optimization controls so tradeoffs are easy to inspect.\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": "fontdrop-inspector",
      "name": "FontDrop — Font inspector",
      "kind": "app",
      "archetype": "Editors & Tools",
      "summary": "A font inspector with a prominent drop zone and an included sample font specimen.",
      "use_for": "Pair a clear file drop target with a useful sample of the output before upload.",
      "source_url": "https://fontdrop.info/",
      "reference_url": "https://swipefile.design/ref/fontdrop-inspector/",
      "screenshot_url": "https://swipefile.design/_astro/preview.Zl8OVmFp.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CDegA6Xl.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "fonts",
        "inspection",
        "upload",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "A font inspector with a prominent drop zone and an included sample font specimen.",
        "nav": "Small utility controls sit in the top header.",
        "layout": "Upload area leads into specimen text, font metadata and feature switches.",
        "density": "Generous upload space followed by denser technical information.",
        "color": "White background, dark specimen type and purple highlights.",
        "typography": "Monospaced utility text contrasts with the large sample typeface.",
        "pattern": "Pair a clear file drop target with a useful sample of the output before upload.",
        "states": "Initial page with included sample font; no user file uploaded.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: FontDrop — Font inspector\nSource: https://fontdrop.info/\nSwipefile reference: https://swipefile.design/ref/fontdrop-inspector/\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: A font inspector with a prominent drop zone and an included sample font specimen.\n- nav: Small utility controls sit in the top header.\n- layout: Upload area leads into specimen text, font metadata and feature switches.\n- density: Generous upload space followed by denser technical information.\n- color: White background, dark specimen type and purple highlights.\n- typography: Monospaced utility text contrasts with the large sample typeface.\n- pattern: Pair a clear file drop target with a useful sample of the output before upload.\n- states: Initial page with included sample font; no user file uploaded.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Pair a clear file drop target with a useful sample of the output before upload.\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": "ui-colors-accessible-palette",
      "name": "Accessible Palette — Color tool",
      "kind": "app",
      "archetype": "Editors & Tools",
      "summary": "A color-system tool showing editable starting colors and a grid of related tones.",
      "use_for": "Align tonal levels across hues so a complete color system can be compared at once.",
      "source_url": "https://accessiblepalette.com/",
      "reference_url": "https://swipefile.design/ref/ui-colors-accessible-palette/",
      "screenshot_url": "https://swipefile.design/_astro/preview.DFSrwPbX.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DXscPm3_.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "colors",
        "contrast",
        "palette",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "A color-system tool showing editable starting colors and a grid of related tones.",
        "nav": "Controls sit directly above each palette column.",
        "layout": "A full-width matrix aligns tonal steps across different hues.",
        "density": "Dense swatch grid, with compact numerical controls.",
        "color": "Multiple hue families progress from pale tints to dark shades.",
        "typography": "Small numeric labels support comparison without competing with the swatches.",
        "pattern": "Align tonal levels across hues so a complete color system can be compared at once.",
        "states": "Default starting palette; the capture does not certify accessibility for every color pairing.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: Accessible Palette — Color tool\nSource: https://accessiblepalette.com/\nSwipefile reference: https://swipefile.design/ref/ui-colors-accessible-palette/\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: A color-system tool showing editable starting colors and a grid of related tones.\n- nav: Controls sit directly above each palette column.\n- layout: A full-width matrix aligns tonal steps across different hues.\n- density: Dense swatch grid, with compact numerical controls.\n- color: Multiple hue families progress from pale tints to dark shades.\n- typography: Small numeric labels support comparison without competing with the swatches.\n- pattern: Align tonal levels across hues so a complete color system can be compared at once.\n- states: Default starting palette; the capture does not certify accessibility for every color pairing.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Align tonal levels across hues so a complete color system can be compared at once.\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": "flowbite-kanban-demo",
      "name": "Flowbite — Kanban demo",
      "kind": "app",
      "archetype": "Project Management",
      "summary": "A project-board template with populated To Do, In Progress and Done columns.",
      "use_for": "Keep status in the column structure while surfacing deadlines and assignees on each card.",
      "source_url": "https://flowbite.com/application-ui/demo/pages/kanban/",
      "reference_url": "https://swipefile.design/ref/flowbite-kanban-demo/",
      "screenshot_url": "https://swipefile.design/_astro/preview.CrsggHPZ.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DkXbMcox.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "kanban",
        "tasks",
        "demo",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "A project-board template with populated To Do, In Progress and Done columns.",
        "nav": "A slim icon rail supports a breadcrumb, task search and board controls.",
        "layout": "Three parallel columns contain cards with titles, photos, descriptions, assignees and deadline badges.",
        "density": "Medium-to-high density, with images breaking up text-heavy task cards.",
        "color": "Light grey board, white cards, red deadline badges and green completed states.",
        "typography": "Bold task titles sit above smaller grey descriptions.",
        "pattern": "Keep status in the column structure while surfacing deadlines and assignees on each card.",
        "states": "Public template demo with sample tasks and people.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: Flowbite — Kanban demo\nSource: https://flowbite.com/application-ui/demo/pages/kanban/\nSwipefile reference: https://swipefile.design/ref/flowbite-kanban-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: A project-board template with populated To Do, In Progress and Done columns.\n- nav: A slim icon rail supports a breadcrumb, task search and board controls.\n- layout: Three parallel columns contain cards with titles, photos, descriptions, assignees and deadline badges.\n- density: Medium-to-high density, with images breaking up text-heavy task cards.\n- color: Light grey board, white cards, red deadline badges and green completed states.\n- typography: Bold task titles sit above smaller grey descriptions.\n- pattern: Keep status in the column structure while surfacing deadlines and assignees on each card.\n- states: Public template demo with sample tasks and people.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Keep status in the column structure while surfacing deadlines and assignees on each card.\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": "flowbite-inbox-demo",
      "name": "Flowbite — Inbox demo",
      "kind": "app",
      "archetype": "Communication",
      "summary": "A populated email-inbox template with a compact toolbar and aligned message rows.",
      "use_for": "Use text weight to distinguish unread messages while keeping common actions in one toolbar.",
      "source_url": "https://flowbite.com/application-ui/demo/mailing/inbox/",
      "reference_url": "https://swipefile.design/ref/flowbite-inbox-demo/",
      "screenshot_url": "https://swipefile.design/_astro/preview.D3Zc7YRl.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CI35wbI_.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "email",
        "inbox",
        "list",
        "demo",
        "fresh-library-batch",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "A populated email-inbox template with a compact toolbar and aligned message rows.",
        "nav": "A slim icon rail and top search bar surround the message list.",
        "layout": "Bulk actions and Compose sit above sender, preview and date columns.",
        "density": "High density with single-line truncation and thin row dividers.",
        "color": "White and pale grey with a blue Compose button.",
        "typography": "Bold unread rows and muted read rows create an immediate scanning hierarchy.",
        "pattern": "Use text weight to distinguish unread messages while keeping common actions in one toolbar.",
        "states": "Public template demo with placeholder messages; no real inbox access.",
        "dont": "Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls."
      },
      "recreation_prompt": "# Design reference: Flowbite — Inbox demo\nSource: https://flowbite.com/application-ui/demo/mailing/inbox/\nSwipefile reference: https://swipefile.design/ref/flowbite-inbox-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: A populated email-inbox template with a compact toolbar and aligned message rows.\n- nav: A slim icon rail and top search bar surround the message list.\n- layout: Bulk actions and Compose sit above sender, preview and date columns.\n- density: High density with single-line truncation and thin row dividers.\n- color: White and pale grey with a blue Compose button.\n- typography: Bold unread rows and muted read rows create an immediate scanning hierarchy.\n- pattern: Use text weight to distinguish unread messages while keeping common actions in one toolbar.\n- states: Public template demo with placeholder messages; no real inbox access.\n- dont: Adapt the workflow and sample content to your own product; preserve clear labels and accessible controls.\n\nUseful for: Use text weight to distinguish unread messages while keeping common actions in one toolbar.\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."
    }
  ]
}