A dark two-column e-commerce checkout: contact, shipping, and payment fields on the left, with a sticky order summary, line items, and Pay button on the right.
Design a desktop checkout page for a small coffee brand called Mottle, dark and premium.
Top is a slim bar with the brand mark on the left, a "Secure checkout" lock note in the middle, and a tiny step indicator (Cart, Information active, Payment) on the right.
Left column is the form, about 60% width. Three labeled sections stacked: Contact (one email field with a "Log in" link beside the heading), Shipping address (full name, then address, then a row with city, state dropdown, ZIP), and Payment (card number with a row of small card-brand marks, then expiry and CVC side by side). Make the email field look focused with a teal ring. Add a small "Express checkout" pill button row above contact. Below the form, a back-to-cart link on the left and the Pay button echoed faint, but the real Pay button lives in the summary.
Right column is a sticky order summary card. Three line items, each with a little CSS/SVG product thumbnail (a bag of beans, a steel kettle, a ceramic mug), name, a small variant line, a quantity pill, and price. Then a totals block: subtotal, shipping (Free), estimated tax, and a bold Total. A discount-code input with an Apply button. A big teal "Pay $74.00" button, and under it a line about money-back and a couple trust badges.
Near-black surfaces, hairline borders, one teal accent (#2dd4bf), tabular numbers for every figure, generous spacing. Stripe-grade restraint.