Check out Page- Express

# Check out Page- Express

{
  "summary": "A sophisticated grayscale wireframe checkout interface featuring a 12-column responsive grid, sticky order summary, and standardized input systems focused on user efficiency.",
  "style": {
    "description": "The style is minimalist and brutalist-lite, using the 'Switzer' font family for a modern, geometric look. The color palette is strictly grayscale, ranging from deep charcoal (#111827) to soft whites (#FFFFFF). UI elements use subtle borders (#D1D5DB), soft shadows, and clean hover states. Animations are restricted to smooth color transitions (150ms) to maintain a functional feel.",
    "prompt": "Apply a minimalist wireframe style using the Switzer sans-serif font family. Color Palette: Primary Black (#111827), White (#FFFFFF), Background Gray (#F9FAFB), Border Gray (#D1D5DB), Text Gray (#6B7280). Typography: Headers 18px-24px semi-bold, body 14px-16px medium, labels 14px medium. Inputs: 44px height, 1px solid border #D1D5DB, 4px border-radius, focus state using 2px ring-gray-400. Buttons: 56px height for primary actions in #111827 with white text, 48px height for secondary buttons. Shadows: subtle border-level depth, no heavy drop shadows. Spacing: 16px to 32px padding/gap system."
  },
  "layout_and_structure": {
    "description": "A responsive 12-column grid layout where the left column (7 cols) handles user input and the right column (5 cols) provides a sticky order summary. Mobile layout stacks the columns vertically.",
    "prompts": [
      {
        "part": "Header",
        "prompt": "Wide 100% header, max-width 1280px, containing a 128x32px black rectangular placeholder for the logo. 32px bottom margin."
      },
      {
        "part": "Express Payment Section",
        "prompt": "Horizontal row of three 48px height buttons for Apple Pay (black), Google Pay (white with border), and PayPal (grayscale/muted). 24px bottom margin followed by a centered divider line with 'Or pay with card' text in 12px uppercase tracking-wider font."
      },
      {
        "part": "Form Sections",
        "prompt": "Stacked vertical sections for Contact, Shipping, and Payment. Each section starts with an 18px semi-bold heading. Use 16px spacing between form fields. Contact section includes a 'Log in' link (14px) aligned right."
      },
      {
        "part": "Payment Method Card",
        "prompt": "Grouped container with 1px border #D1D5DB and 4px radius. Top 'Credit Card' section has a light gray header (#F9FAFB) with a radio button selected state. Input fields inside the card are nested with 16px padding. Alternative methods (PayPal, Amazon Pay) are collapsed list items below the main card with low opacity (60%) until hover."
      },
      {
        "part": "Sticky Order Summary",
        "prompt": "Right-side column (5/12 width), sticky to the top of the viewport (top: 32px). Contains line items with 80x80px image placeholders, product titles, variant details, and prices. Includes a 40px height discount code input field. Total section features 24px bold price with a 'USD' currency label."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Primary Pay Button",
      "description": "High-contrast payment button with integrated pricing information.",
      "prompt": "Button height: 56px; Background: #111827; Text: #FFFFFF; Font-size: 18px; Font-weight: 600; Border-radius: 4px. Layout: Flex-row centered, with price separated by an 80% opacity bullet point (e.g., 'Pay Now • $362.00'). Hover state: background-color #000000 with a subtle elevation shadow."
    },
    {
      "component": "Product Badge Counter",
      "description": "Notification-style counter for order items.",
      "prompt": "Positioned absolute -8px top, -8px right of product image placeholder. Size: 20x20px circle. Background: #4B5563; Text: #FFFFFF; Font-size: 12px; Font-weight: bold; Display: flex; justify-content: center; align-items: center."
    },
    {
      "component": "Trust Footer",
      "description": "Security indicators for the checkout process.",
      "prompt": "Grid of three columns at bottom of summary. 10px font-size, uppercase, tracking-wide. Gray #9CA3AF. Icons (Shield, Lock, Headset) centered above text labels."
    }
  ]
}