{
  "version": 1,
  "name": "From product to checkout",
  "url": "https://swipefile.design/board/from-product-to-checkout/",
  "markdown_url": "https://swipefile.design/board/from-product-to-checkout/notes.md",
  "json_url": "https://swipefile.design/board/from-product-to-checkout/data.json",
  "pdf_url": "https://swipefile.design/board/from-product-to-checkout/export.pdf",
  "reference_count": 4,
  "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": "medusa-product",
      "name": "Medusa — Product details",
      "kind": "app",
      "archetype": "Commerce",
      "summary": "A product detail screen separates descriptive content, large photography, and the purchase action.",
      "use_for": "Study a product layout that keeps photography prominent while separating explanation from purchase controls.",
      "source_url": "https://next.medusajs.com/us/products/hoodie",
      "reference_url": "https://swipefile.design/ref/medusa-product/",
      "screenshot_url": "https://swipefile.design/_astro/full.BEkVoyRU.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CorRfbCK.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "commerce",
        "medusa"
      ],
      "patterns": [
        "Commerce"
      ],
      "design_notes": {
        "surface": "Product details",
        "nav": "The store header retains account and cart; expandable information rows sit under the description.",
        "layout": "Three columns place product information at left, the main image in the middle, and price with purchase controls at right.",
        "density": "Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.",
        "color": "White space, dark text, black purchase action, and neutral product photography.",
        "typography": "A bold product heading and price anchor opposite sides of a quieter description.",
        "pattern": "Study a product layout that keeps photography prominent while separating explanation from purchase controls.",
        "states": "A single product with its price and add-to-cart action; no order is placed.",
        "dont": "Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation."
      },
      "recreation_prompt": "# Design reference: Medusa — Product details\nSource: https://next.medusajs.com/us/products/hoodie\nSwipefile reference: https://swipefile.design/ref/medusa-product/\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: Product details\n- nav: The store header retains account and cart; expandable information rows sit under the description.\n- layout: Three columns place product information at left, the main image in the middle, and price with purchase controls at right.\n- density: Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.\n- color: White space, dark text, black purchase action, and neutral product photography.\n- typography: A bold product heading and price anchor opposite sides of a quieter description.\n- pattern: Study a product layout that keeps photography prominent while separating explanation from purchase controls.\n- states: A single product with its price and add-to-cart action; no order is placed.\n- dont: Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation.\n\nUseful for: Study a product layout that keeps photography prominent while separating explanation from purchase controls.\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": "medusa-cart",
      "name": "Medusa — Empty cart",
      "kind": "app",
      "archetype": "Commerce",
      "summary": "An empty shopping cart explains the state and links directly back to product discovery.",
      "use_for": "Make an empty cart useful with a clear route back to shopping.",
      "source_url": "https://next.medusajs.com/us/cart",
      "reference_url": "https://swipefile.design/ref/medusa-cart/",
      "screenshot_url": "https://swipefile.design/_astro/full.B8wpGJ19.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.D1FVJu4f.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "commerce",
        "search & discovery",
        "medusa"
      ],
      "patterns": [
        "Commerce",
        "Search & discovery"
      ],
      "design_notes": {
        "surface": "Empty cart",
        "nav": "The store header retains account and a zero-count cart.",
        "layout": "A brief message and browse link sit in a generous open content area above the store footer.",
        "density": "Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.",
        "color": "White page, dark heading, gray helper text, and a blue browse link.",
        "typography": "A strong cart heading and short explanatory sentence avoid overloading the empty state.",
        "pattern": "Make an empty cart useful with a clear route back to shopping.",
        "states": "Empty cart with no products or checkout action.",
        "dont": "Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation."
      },
      "recreation_prompt": "# Design reference: Medusa — Empty cart\nSource: https://next.medusajs.com/us/cart\nSwipefile reference: https://swipefile.design/ref/medusa-cart/\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: Empty cart\n- nav: The store header retains account and a zero-count cart.\n- layout: A brief message and browse link sit in a generous open content area above the store footer.\n- density: Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.\n- color: White page, dark heading, gray helper text, and a blue browse link.\n- typography: A strong cart heading and short explanatory sentence avoid overloading the empty state.\n- pattern: Make an empty cart useful with a clear route back to shopping.\n- states: Empty cart with no products or checkout action.\n- dont: Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation.\n\nUseful for: Make an empty cart useful with a clear route back to shopping.\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": "medusa-filled-cart",
      "name": "Medusa — Cart review",
      "kind": "app",
      "archetype": "Commerce",
      "summary": "A populated cart aligns item details and quantity controls beside a concise order summary.",
      "use_for": "Keep line-item editing and order totals visible together before checkout.",
      "source_url": "https://next.medusajs.com/us/cart",
      "reference_url": "https://swipefile.design/ref/medusa-filled-cart/",
      "screenshot_url": "https://swipefile.design/_astro/full.gTdD1ZlU.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DutNURAx.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "commerce",
        "medusa"
      ],
      "patterns": [
        "Commerce"
      ],
      "design_notes": {
        "surface": "Cart review",
        "nav": "The store header and a returning-customer sign-in option remain visible.",
        "layout": "A wide item table occupies the left; promotions, totals, and checkout form a narrower right column.",
        "density": "Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.",
        "color": "White surfaces, thin gray rules, blue promotion links, and a black checkout action.",
        "typography": "Strong cart and summary headings frame aligned numeric values and compact item metadata.",
        "pattern": "Keep line-item editing and order totals visible together before checkout.",
        "states": "One demo product in a temporary cart with quantity, remove, and checkout controls.",
        "dont": "Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation."
      },
      "recreation_prompt": "# Design reference: Medusa — Cart review\nSource: https://next.medusajs.com/us/cart\nSwipefile reference: https://swipefile.design/ref/medusa-filled-cart/\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: Cart review\n- nav: The store header and a returning-customer sign-in option remain visible.\n- layout: A wide item table occupies the left; promotions, totals, and checkout form a narrower right column.\n- density: Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.\n- color: White surfaces, thin gray rules, blue promotion links, and a black checkout action.\n- typography: Strong cart and summary headings frame aligned numeric values and compact item metadata.\n- pattern: Keep line-item editing and order totals visible together before checkout.\n- states: One demo product in a temporary cart with quantity, remove, and checkout controls.\n- dont: Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation.\n\nUseful for: Keep line-item editing and order totals visible together before checkout.\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": "medusa-checkout",
      "name": "Medusa — Shipping address",
      "kind": "app",
      "archetype": "Commerce",
      "summary": "An address-first checkout preserves the order summary while showing later steps in a collapsed sequence.",
      "use_for": "Use progressive checkout steps with persistent cart context and explicit required fields.",
      "source_url": "https://next.medusajs.com/us/checkout?step=address",
      "reference_url": "https://swipefile.design/ref/medusa-checkout/",
      "screenshot_url": "https://swipefile.design/_astro/full.RbpsU2WB.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.B81QY9Oh.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "commerce",
        "forms & onboarding",
        "medusa"
      ],
      "patterns": [
        "Commerce",
        "Forms & onboarding"
      ],
      "design_notes": {
        "surface": "Shipping address",
        "nav": "A back-to-cart link replaces browsing navigation; delivery, payment, and review appear below the active step.",
        "layout": "A two-column address form fills the left area; totals and a product summary remain at right.",
        "density": "Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.",
        "color": "White background, pale inputs, black continuation action, and muted inactive step headings.",
        "typography": "Large step headings and aligned labels distinguish current work from upcoming stages.",
        "pattern": "Use progressive checkout steps with persistent cart context and explicit required fields.",
        "states": "Empty shipping-address step with billing-match selected; no personal information or order was submitted.",
        "dont": "Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation."
      },
      "recreation_prompt": "# Design reference: Medusa — Shipping address\nSource: https://next.medusajs.com/us/checkout?step=address\nSwipefile reference: https://swipefile.design/ref/medusa-checkout/\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: Shipping address\n- nav: A back-to-cart link replaces browsing navigation; delivery, payment, and review appear below the active step.\n- layout: A two-column address form fills the left area; totals and a product summary remain at right.\n- density: Primary content has the most space; repeated rows and secondary navigation use a compact, consistent rhythm.\n- color: White background, pale inputs, black continuation action, and muted inactive step headings.\n- typography: Large step headings and aligned labels distinguish current work from upcoming stages.\n- pattern: Use progressive checkout steps with persistent cart context and explicit required fields.\n- states: Empty shipping-address step with billing-match selected; no personal information or order was submitted.\n- dont: Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation.\n\nUseful for: Use progressive checkout steps with persistent cart context and explicit required fields.\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."
    }
  ]
}