Combined build brief for three storefront surfaces of the Nerdworks Singles vertical. These share card-presentation DNA and buy flow, so they are designed together. This brief is split into per-surface sections; Stitch mockup prompts will use per-surface extracts. Both Pokémon and MTG reference cards are used throughout — every layout must look equally at home with both games.
Surface 2: Individual product page — buy this specific consigned card
Surface 3: Canonical card profile page — the card itself, always exists regardless of stock
Reference card data (use in mockups)
Every mockup and prototype uses these two real cards side-by-side to validate the layout for both TCGs.
Field
Pokémon reference
MTG reference
Card name
Charizard
Black Lotus
Set
Base Set
Alpha
Number
4/102
232/295 (Alpha)
Rarity
Holo Rare
Rare (Power 9)
Condition (product)
NM
LP
Price
£480
£6,200
Artist
Mitsuhiro Arita
Christopher Rush
API source
pokemontcg.io
Scryfall (set:LEA)
Surface 1 — Singles archive
Page purpose
The browse-and-buy surface for all consigned singles. Because the model is 1 card : 1 SKU, the archive will eventually have thousands of products. A search-first UX is required — the default view is a prominent search bar + filters, not an open paginated grid. The grid renders after the user has applied at least one filter or entered a search term.
Filters
Game — Pokémon / MTG (shown prominently before other filters)
Set — populated by game selection (dropdown or type-ahead)
Condition — NM / LP
Price range — min/max slider + text inputs
Rarity — per-game options
Artist — type-ahead
Availability — In stock now / All (including catalogue cards with no current stock)
Sort options
Price: low to high / high to low
Recently added
Rarity (set-specific ordering)
Biggest price drop
Archive card component
Card artwork image (dominant — fills the top of the card)
Card name + set name
Condition chip (NM = green, LP = amber)
Rarity badge
Price (JetBrains Mono)
Quick Add to cart button
Link to canonical card profile page
Hero / header section
Page title “Browse singles”
Short editorial lede
Prominent search bar centred in hero
Quick-filter chips: Pokémon / MTG / Under £10 / Under £50 / Rare and above
Trust bar
Below hero — compact trust signal strip: staff-verified condition, secure checkout, free UK shipping over £X, returns policy.
Surface 2 — Individual product page
Page purpose
The buy surface for one specific consigned card (one WC product, stock 1). The card is presented as a collector object, not a commodity. Layout should feel like a gallery page — card art is the hero, data is supporting context. Prominently cross-links to the canonical card profile for lore, history, and market context.
Card data strip — name, set, number, rarity, artist, release date, format legality (MTG only). JetBrains Mono for values.
Cross-link to profile — “See full card history, price chart, and all available copies” links to canonical profile page
“Sell yours?” CTA — compact Sale-or-Return prompt linking to intake or consignment PPC landing
Related cards — other cards from the same set currently in stock (editorial green section)
Tone
Collector, not retail. “This is a rare piece” not “Buy now before it sells”. The editorial curation voice from the wider Showcase direction applies.
Surface 3 — Canonical card profile page
Page purpose
A catalogue-level page for a specific card — exists regardless of whether Nerdworks has stock. It is the SEO anchor for that card, ranking for “[Card name] [Set] price”, “[Artist] cards” etc. Serves as a collector reference page — closer to a museum entry than a shop listing.
Layout sections
Hero — card name, set, number, card artwork (full-res from API), rarity, artist credit
Price chart — 30-day / 90-day / 1-year Cardmarket price history graph. Current market value (averaged, NM and LP split). JetBrains Mono for values.
Available now — live pull of Nerdworks WC products linked to this card. Condition + price + Add to cart. If no stock: “We do not have this right now — get notified when we do” with email capture.
Lore and context — card flavour text, illustrator note, set context (release year, print run, historical significance). Editorial voice. 200–300 words max.
Card data — full card data from API. HP, attacks, weaknesses (Pokémon); mana cost, type, rules text, power/toughness, format legality (MTG). Collapsible panel or tab.
Recent sales — last 3–5 sales at Nerdworks plus market comparison. Feeds trust and price validation.
Format legality (MTG only) — Standard / Pioneer / Modern / Legacy / Commander / Vintage / Banned. Auto-driven from Scryfall data. Badge strip.
Artist spotlight link — “More cards by [Artist]” links to artist spotlight archive page
Set link — “More cards from [Set name]” links to set page
“Sell yours?” CTA — Same consignment prompt as on the product page
Existence behaviour
This page always exists for every card in the catalogue, even with no live stock. Out-of-stock state: the Available now section shows the email-capture state. The page remains indexable and SEO-optimised.
Shared design rules
Styleguide — SNW1 Showcase Dark (post 11409). All tokens from that styleguide.
Three-colour section rhythm — dark (#1A1E1A) to light (#F8F9F8) to green (#266038), repeat. Apply even on data-dense pages.
Card art is primary — never crop, compress, or compete with card artwork. Generous whitespace around it.
JetBrains Mono for data — prices, condition grades, card numbers, stats, dates. Not for body copy or headings.
Condition chips — NM uses $nw-green (#266038). LP uses $accent-yellow (#CCAA00). No other conditions.