Pieces

Product row with a photo, name, price, and a pill Save button that fills with a rose heart and shows the total wishlist count when active.

Coupon entry with a tag-prefixed code field, an Apply button, and an emerald confirmation row showing the discount and amount saved.

Mini cart panel with a count badge header, two item rows showing photo, name, quantity, and price, and a tone Checkout CTA next to the subtotal.

Customer review with an initial avatar, a verified-purchase badge, five-star rating on the right, review title, and body snippet.

Shipping option picker with tone-bordered selection, a radio bullet, method icon, ETA line, and emerald price for free shipping.

Wallet-pay button row with Apple Pay, Google Pay, and PayPal in their brand colors above an or-pay-with-card divider, with the order total in the header.

Two-by-two reassurance tiles covering secure checkout, free returns, authenticity, and support, each with an icon and a short hint.

Member status card with a tone-filled crown tile, current tier and point balance, and a tone progress bar counting down to the next tier.

Amount selector for a gift card with a gift icon header, four preset value chips where the selected one fills with tone, and a custom amount row.

History strip card showing four recently viewed products as square thumbnails with their prices on a compact grid.

Recurring purchase card with a tone discount badge, a frequency dropdown, next delivery date, emerald per-order savings, and a tone Subscribe CTA.

Vertical attribute list with emerald check icons, label and value columns covering material, care, origin, and certification details.

Vertical shipment status with check, spinning, and pending dots connected by a tone-colored line, each row showing label and timestamp.

Order math card with subtotal, shipping, tax, and an emerald discount line, separated from a bold final total below.

Buy-now-pay-later card with provider header, four-dot installment timeline where paid steps fill in tone and the line progresses, plus a fineprint footer.

Dashed-border receipt with the store name and order id, three monospaced quantity-name-price rows, a subtotal, and a bold final total with payment method.

Social-proof popup with a gradient initials avatar and an emerald shopping-bag dot, a who-bought-what sentence, and a relative time stamp.

Coming-soon product card with a tone Pre-order pill, notify-count, calendar release date, price, and a tone-filled Reserve button.

Nearby stores list where each row carries a semantic stock dot, store name, distance, and a chevron to drill into the location.

Two-column comparison with product photos, names, prices, an emerald Pick badge on the recommended one, and attribute rows with text or check/X cells.

Region selector with a globe header showing flag, country, and currency, and a list of regions with flags and currency codes plus a check on the active one.

Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.

Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.

Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.