Checkout — Atelier Sand (warm sand, AA-contrast-fixed)
A warm sand-and-terracotta e-commerce checkout: two-column billing + payment form on cream cards beside a sticky dark order-summary card, with a segmented Card/PayPal toggle and an AA-contrast Pay button.
Summary
A warm, premium e-commerce checkout page in a 'sand + terracotta' palette (sand #efe7d8 page, terracotta #c4633f accent, near-black ink #2b251d text) built around a two-column checkout layout: a left billing + payment form and a right sticky dark order-summary card. The form uses soft 12px-radius cream fields on cream cards with a terracotta focus ring, a Card/PayPal segmented toggle, numbered section headers (1 Billing details, 2 Payment method), and a same-as-shipping checkbox. The summary card is a single dark ink surface with product line items, a promo-code row, totals, and a full-width terracotta Pay button. A sticky blurred sand nav, a grain-textured hero strip with breadcrumb + SSL trust pill, and a slim footer frame the page; it reflows cleanly to single column on mobile.
Style
Warm, tactile, premium-artisanal e-commerce. A low-contrast sand/cream paper system with a single terracotta accent and a near-black ink used both for text and as the one dark surface (the order-summary card). Soft rounded fields and cards (12-16px radius), gentle layered shadows, a faint dot-grain texture on the hero, and hairline sand borders instead of heavy boxes. Inter throughout (400-800) with slightly negative letter-spacing; small uppercase eyebrows on wide tracking. AA-contrast-fixed: the Pay button uses the darker terracotta terradk #a64f30 (not the lighter terra) on white text for accessible contrast.
Layout & Structure
A standard desktop checkout page at max-width 1180px, vertically stacked: sticky nav, a grain-textured hero strip (breadcrumb + headline + SSL pill), then the checkout body as a two-column grid (left flexible form column, right fixed 380px sticky order-summary), then a slim footer. The right column is sticky on lg and drops below the form on mobile; the two-up name/expiry field rows and the segmented toggle collapse gracefully on small screens.
Sticky nav
Hero strip
Checkout body grid
Billing details card (section 1)
Payment method card (section 2)
Order summary card (the hero component)
Footer
Components
Warm soft input field (.field)
Segmented payment toggle (.seg)
Numbered section header
Dark order-summary line item
Filled-terra checkbox
Trust pill / trust row
Special Notes
Icons are Iconify Phosphor (ph:*) plus brand logos (logos:visa, logos:mastercard, logos:amex, logos:paypal) loaded from the iconify CDN. Tailwind is configured via CDN with custom named colors sand #efe7d8, sandlt #f6f1e7, sanddk #e6dcc9, terra #c4633f, terradk #a64f30, terraxd #8a4127, ink #2b251d, inkmut #6b6253, plus named shadows card/soft/btn, and Inter as the sans family. AA-contrast-fixed: the Pay button intentionally uses the darker terradk #a64f30 (escalating to terraxd #8a4127 on hover) so white button text clears WCAG AA, rather than the lighter terra #c4633f used for icons and accents. The page is one static frame; field focus rings, the segment-active styling and the Pay-button hover only animate live (the Card segment is shown in its active state). The 'AtelierSand' brand and product line are illustrative placeholders for a generic checkout.