Checkout Page- Standard Two Column

# Checkout Page- Standard Two Column

{
  "summary": "Create a professional grayscale e-commerce checkout interface using a 58/42 split-screen layout. Focus on high-contrast legibility, structured form fields, and a clear information hierarchy. The design should prioritize flow with a secondary sticky order summary column and a clean, sans-serif typographic system.",
  "style": {
    "description": "The style is a 'clean wireframe' aesthetic using the 'Public Sans' typeface (weights 400, 500, 600). The color palette is strictly grayscale: White (#FFFFFF), Ghost White (#F9FAFB) for surfaces, Light Gray (#E5E7EB) for borders, and Jet Black (#111827) for primary actions. Transitions are subtle (150ms ease), and focus states use a soft ring effect (#9CA3AF).",
    "prompt": "Apply a minimalist grayscale design system. Typography: 'Public Sans', sans-serif; Headings: 18px (medium/600); Body: 14px (regular/400); Labels/Small text: 12px. Color Palette: Background Primary: #FFFFFF; Background Secondary (Sidebar): #F9FAFB; Borders: #D1D5DB; Primary Text: #111827; Secondary Text: #6B7280; Placeholder Text: #9CA3AF. Inputs: 48px height, 4px border-radius, #D1D5DB border; focus state: 1px solid #9CA3AF with a soft shadow. Buttons: Primary: #111827 background, white text, 56px height for main CTA, 48px for secondary. Spacing: 8px grid system with 32px or 40px section spacing. Icons: Minimalist line icons (16px/20px) in #9CA3AF."
  },
  "layout_and_structure": {
    "description": "A two-column responsive layout. On desktop, the left column (58% width) handles form entries (Contact, Shipping, Payment) and the right column (42% width) provides a sticky order summary with a light gray background. On mobile, the order summary moves to the top and is collapsible.",
    "prompts": [
      {
        "part": "Header and Navigation",
        "prompt": "Include a logo placeholder (128x32px) followed by a breadcrumb navigation: 'Cart > Information > Shipping > Payment'. Use 12px text, with the current step in #111827 and others in #6B7280, separated by chevron-right icons."
      },
      {
        "part": "Contact and Shipping Sections",
        "prompt": "Stacked vertical sections. 'Contact' section features a 48px height email input and a checkbox for marketing. 'Shipping address' section uses a grid: Country (full), First/Last name (50/50), Address (full), Apt/Suite (full), and City/State/Zip (33/33/33). All inputs must have 16px horizontal padding."
      },
      {
        "part": "Payment Method Selector",
        "prompt": "A contained box with #D1D5DB border. The header contains a radio-style selector labeled 'Credit card' with card brand placeholders. Beneath it, a gray-tinted (#F9FAFB) expanded area with inputs for Card Number (with lock icon), Expiry, CVV, and Name on Card."
      },
      {
        "part": "Order Summary Sidebar",
        "prompt": "Sticky sidebar with #F9FAFB background. Features line items with 64px square image placeholders (rounded corners, #E5E7EB border). Each item has title, size/variant subtext, and price. Includes a discount code field (input + 'Apply' button). Below, a detailed breakdown of Subtotal, Shipping (marked as 'Calculated at next step'), and Estimated Taxes. Final Total section features a 24px bold price in #111827."
      },
      {
        "part": "Footer Actions",
        "prompt": "A flex-row (reverse on mobile) containing a 'Return to cart' text link with a left-chevron and a high-prominence 'Pay now' button (minimum 200px width on desktop, full width on mobile)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Product Image Placeholder",
      "description": "The thumbnail representation of cart items.",
      "prompt": "A 64x64px container with a #FFFFFF background, 8px border-radius, and a 1px border of #E5E7EB. Inside, a centered inner rectangle of #F3F4F6 with 4px padding. Include a floating notification badge at the top-right corner (#6B7280 circle, 20x20px) containing the quantity in 10px white text."
    },
    {
      "component": "Progressive Disclosure Radio",
      "description": "Selection block for payment or shipping options.",
      "prompt": "A container with 1px #D1D5DB border. Active row features #F9FAFB background and a custom radio button (16x16px outer ring, 8x8px inner solid circle for 'checked'). Inactive rows have a simple 16x16px gray ring."
    }
  ],
  "special_notes": "MUST use a consistent 8px spacing unit. MUST NOT use any colors outside the #000000 to #FFFFFF range. MUST ensure all interactive elements (inputs, buttons) have a 150ms color transition. Form inputs MUST have a vertical height of exactly 48px. Section headings MUST be 18px Medium."
}