ProcureGlobal · Design system · Round 2

Product detail, cart drawer, and full cart.

Three of the most commercially loaded screens in the storefront. PDP converts browse into intent; the cart drawer turns intent into commitment without leaving the page; the cart page is where the buyer reconciles the order before checkout. All three reuse v1.0 tokens — Midnight ink, Aqua action, Lavender atmospheres, Coral for urgency — and inherit the type system unchanged.

Version · 1.0 Status · Founder review Date · 16 May 2026 Owner · Claude Opus 4.7 Inherits · brand-system-v1.html
01 — Product detail

PDP, desktop

A two-column grid: gallery on the left, the commercial column on the right. Everything the buyer needs to commit lives above the fold on a 1280-wide viewport — price, stock, delivery estimate, variants, quantity, primary action. The B2B affordance is a small, persistent banner rather than a separate page, because most buyers don't know upfront which mode they want.

Storefront · Product detail procureglobal.gh / electronics / hisense-65a6n
GHS
Home / Electronics / TVs & home cinema / Hisense 65A6N 4K UHD Smart TV
Sold by Hisense Ghana · Fulfilled by ProcureGlobal

Hisense 65A6N 4K UHD Smart TV with Dolby Vision

SKU: HIS-65A6N-2026 · MPN: 65A6N
GHS 7,499 GHS 8,499 ≈ USD 510 · view in USD
In stock — 14 available · Delivered tomorrow in Greater Accra
Screen size 65 inches
55" GHS 5,999
65" GHS 7,499
75" GHS 10,999
85" Out of stock
Buying 5 or more?

Request a B2B quote for tiered pricing, NET terms, and invoice.

Request quote →
Secure payment MoMo, card, bank transfer via Paystack
Free delivery Greater Accra · 1–2 business days
7-day returns On unopened items · see policy
2-year warranty Manufacturer · Hisense Ghana

The Hisense 65A6N delivers immersive 4K UHD picture quality with Dolby Vision HDR and a built-in smart platform. Stream from Netflix, YouTube, and Showmax out of the box, and connect game consoles, soundbars, or set-top boxes through three HDMI 2.0 inputs.

Designed for the African home: low-glare display tuned for daylight viewing, integrated voice search, and a slim bezel that suits wall-mounting or stand placement. Includes Bluetooth remote, wall-mount bracket, and power cable.

Set up takes under five minutes. Connect to Wi-Fi, log in to your streaming accounts, and watch.

  • Screen size65"
  • Resolution4K UHD (3840 × 2160)
  • HDRDolby Vision, HDR10
  • Refresh rate60 Hz
  • Smart platformVIDAA U7
  • HDMI ports3 × HDMI 2.0
  • USB ports2 × USB 2.0
  • Power220V · 130W
  • Warranty2 years
02 — Product detail · mobile

PDP, mobile (375pt)

~70% of Ghana traffic comes from mobile. The mobile PDP swaps the side-by-side grid for a vertical stack with a swipeable image carousel and a sticky add-to-cart bar pinned to the bottom of the viewport — so the primary action is always one thumb-reach away, regardless of scroll position.

Hisense Ghana

Hisense 65A6N 4K UHD Smart TV with Dolby Vision

GHS 7,499 GHS 8,499
In stock — 14 available · Tomorrow in Accra
Screen size · 65"
55" 65" 75"

About this item

Immersive 4K UHD picture with Dolby Vision HDR, built-in smart streaming, three HDMI 2.0 inputs. Designed for daylight viewing in African homes. Wall-mount bracket and remote included…

GHS 7,499
03 — Cart drawer

Cart drawer (mini-cart)

Slides in from the right when the buyer clicks "Add to cart" or the header cart icon. The page behind dims but stays in context — the buyer hasn't committed to leaving. Four jobs: confirm what was just added, show the running total, surface free-delivery progress, and give a one-click path to either keep shopping or check out.

Storefront · Drawer open over PDP overlay state
04 — Cart page

Full cart page

The page the buyer lands on from the drawer's "View cart" or from the header cart link with intent to review. Two-column on desktop: line items on the left, a sticky summary card on the right. This is also the page where B2B buyers turn a cart into a quote request — without losing the items they've assembled.

Storefront · Cart procureglobal.gh / cart
GHS

Your cart · 3 items

Continue shopping
Product Quantity Line total
Hisense
65A6N 4K UHD Smart TV with Dolby Vision
65 inches · Black
In stock · Ships tomorrow
1
GHS 7,499 GHS 7,499 each
TP-Link
Archer AX55 AX3000 Wi-Fi 6 Router
AX3000 · Black
In stock · Ships tomorrow
1
GHS 1,299 GHS 1,299 each
Anker
Soundcore Q30 Wireless Noise-Cancelling Headphones
Black
In stock · Ships tomorrow
2
GHS 1,498 GHS 749 each
05 — Cross-cutting

System decisions that hold across the three screens

Patterns established here become defaults for Rounds 3 (checkout, dashboard) and 4 (admin, B2B). Calling them out so engineering can extract them into shared components from day one.

Action hierarchy

  • Aqua — primary commerce action (Add to cart, Checkout, Proceed). One per screen.
  • Midnight solid — secondary commit (Buy now, Apply, Login).
  • White + Midnight border — safe / non-commit actions (View cart, Save).
  • Lavender mist card — soft prompt (B2B quote, recommendations). Doesn't compete with primary action.
  • Coral — urgency only (discount %, free-delivery cutoff). Never for default CTAs.

Pricing presentation

  • GHS is canonical. All prices stored and displayed in GHS first. USD presentment is a secondary "view in USD" affordance.
  • Bricolage Grotesque for prices. The display face carries pricing weight; DM Sans handles everything else. Differential reinforces value-anchored hierarchy.
  • Strike-through original price only when the discount is genuine and currently active. Never as a marketing decoration.
  • Tax is never hidden. If we can't compute it yet, we say "calculated at checkout" — never "$0" or omission.

Empty & failure states (specified)

  • Empty cart drawer: Centred illustration, "Your cart is empty," primary CTA "Continue shopping."
  • Empty cart page: Larger illustration, sub-message ("Browse our top categories"), three category tiles below.
  • Item out of stock on cart page: Row dimmed with "Currently unavailable" tag, "Save for later" and "Remove" affordances; subtotal excludes the row.
  • Variant unavailable: Strike-through pill with "Notify me" inline action.
  • Checkout reserved item expired: Banner above cart explaining the 15-minute reservation lapsed; auto-re-reserves on the next action.

Mobile patterns

  • Sticky CTA bar. Used on PDP and any commit-bearing screen. Footer-pinned, contains price + primary action.
  • Cart drawer is full-screen on mobile. A 440px drawer on a 375pt viewport feels broken; on mobile the drawer expands to fill the screen with a back button.
  • Quantity steppers are tappable, not typed. 36pt tap targets minimum; input remains for accessibility and keyboard users.
  • Bottom sheet for variant selection. Tapping a variant opens a sheet rather than scrolling the page. Reduces vertical re-orientation.
For engineering — components to extract
<Button variant="accent | primary | secondary | ghost" size="md | lg" /> <Price value={number} currency="GHS" originalValue?={number} showUsd?={boolean} /> <StockIndicator level="in_stock | low | out" units?={number} delivery="tomorrow | 2-3 days" /> <VariantPill option={Variant} selected={boolean} disabled?={boolean} priceDelta?={number} /> <QuantityStepper value={number} min={1} max={availableStock} onChange={fn} /> <CartItem item={CartItem} compact?={boolean} editable?={boolean} /> <FreeDeliveryProgress current={number} threshold={number} region="GA | other" /> <TrustStrip items={TrustItem[]} layout="grid-2 | row-4" /> <B2BQuotePrompt cart={Cart} placement="banner | card" /> <ProductCard product={Product} variant="default | related | grid" />

These components show up in Round 3 (checkout) and Round 4 (admin) too — building them well now pays back across every remaining design round.