Play Away Cards homepage concepts: final report

Five fully built homepage concepts for playawaycards.com, same content and section order, radically different art direction. Open the gallery at https://pac-homepage-concepts.pages.dev/ and scroll each one on a phone. The same files live in concepts/ in the project and can be served locally with node tools/serve.mjs 4173.

Built September 3, 2026 against pac-redesign-brief.md, pac-homepage-concepts.md, pac-analytics-baseline.md, Strategy v2.md and the asset inventory in assets/INVENTORY.md. The shared build brief every concept received is concepts/shared/BRIEF.md; the independent critic's report is concepts/CRITIQUE.md.

The five concepts

All five carry the same logo: the brand kit's Unbounded 800 "PLAY AWAY" wordmark in navy, as SVG outlines (see assumption 10). Everything else about the type differs per concept.

#	Concept	Thesis in one line	Display + sans	Accent (CTAs only)	Motion moment
01	Postcards	The homepage is a travelogue: every section is a postcard from a place the cards have already been, the sweater is the first thing you pack, the editions are destinations.	Fredoka + Nunito Sans	Sky blue `#6BABFF` with navy text	Hero postcard stamps itself on load
02	The line sheet	A rational, ruled spec sheet in the spirit of the brand's own wholesale line card: index numerals, hairlines, real tables, large unadorned photography.	Syne + Inter	Hot pink `#C4187A`	Colorway crossfade in the wall
03	One thread	Near-monochrome editorial page where the only chroma is the photography, the CTA and a 4px thread of yarn that runs the page in whatever colorway you last tapped.	Fraunces + Instrument Sans	Navy `#17264A`	Thread recolours and sweater crossfades on tap
04	The deal	Cards are the interface: every product, tier, review and colorway is a card in the real proportion with the real dotted-star border; the hero is a dealt hand of seven sweaters.	Unbounded + Bricolage Grotesque	Green `#187A5E`	Hero hand deals in on load
05	Game night, 7 pm	The page is the evening's run of show: oversized timestamps mark each section, photography is only what a game night looks like, the sweater is what you put on first.	Big Shoulders Display + Work Sans	Purple `#6B4FBB`	Hero sweater slides in from the closet on load

What makes each unmistakable

01 Postcards. Paper margins, address-side rules, postmarks drawn from the review text, stamps built from the real roundel, the travel fan series as the photography spine. Product details live on the "back" of each card.
02 The line sheet. Numbered rows 01 to 09 with the index in the left margin, hairline rules top and bottom, prices and the cards-vs-tiles comparison as real <table> markup, the widest type in the set.
03 One thread. One continuous coloured line from the sweater's collar to the email field, changing colour with the colorway you pick; everything else is ink on warm white with a soft serif.
04 The deal. Every element is a card in the brand's own proportion with a coloured dotted-star ring and rotated corner indices; the bundle ladder is three hands of increasing size; suit art from the Modern tile set sits in the review corners.
05 Game night, 7 pm. A vertical timeline rail with "6:30 pm Dress for the table", "7:00 pm Set the table", "7:15 pm Pick a deck", "9:45 pm Table talk", "Next Tuesday Join the table"; the only concept whose imagery is people actually playing.

Critic's scores (pre-revision)

Scored by an independent critic subagent with no attachment to any concept, 1 to 5 per axis. Full evidence, weakest section and the one change per concept are in CRITIQUE.md.

Concept	Brand elevation	Originality	Adherence	Mobile at 375	Conversion	Total
01 Postcards	3	4	5	4	4	20
02 The line sheet	4	3	4	3	3	17
03 One thread	5	4	4	3	3	19
04 The deal	3	5	4	4	4	20
05 Game night, 7 pm	4	4	5	3	3	19

No concept had a hard-constraint violation. The critic's "one change" for each was fed back to its original builder for a revision pass:

01: straighten the page (no tilt or tape outside the hero), move the stamp off the sweater's collar.
02: rebuild the colorway wall at 375 as a 2-up grid of the seven flats with one-tap deep links; CTA under the H1; one accent hex.
03: replace the disc chips with 4:5 tiles of the flats; CTA above the hero image; fix two empty review frames; restore the real logo colours.
04: fix the clipped hero labels; make Complete Set the only filled ladder button; bring Summit and Modern rings into the palette.
05: at 375 shrink the timestamp and put the buttons under the H1 so the primary CTA is in the first viewport; remove bare-deck add-to-cart from the edition row.

Cross-concept convergence the critic found and the revision fixed: three heroes shared the H1 "Dress for the table." and two shared "Mahjong, made portable." (now 01 keeps "made portable", 05 keeps "Dress for the table", 02, 03 and 04 wrote their own); three heroes used the same Green/Blush flat (03 now leads navy).

Post-revision QA

All numbers after the revision pass, measured against the local static server with Lighthouse simulated mobile throttling and axe-core (WCAG 2.1 A and AA plus best practices) at 375 and 1440.

Concept	Lighthouse mobile (perf / a11y / best practices / SEO)	LCP	CLS	Weight at 375	H1 count	Page height at 375	Lint
01 Postcards	100 / 100 / 100 / 100	1.4 s	0	601 KiB	1	10,486 px	1 above-fold stamp intentionally eager
02 The line sheet	100 / 100 / 100 / 100	1.2 s	0.035	633 KiB	1	9,910 px	clean
03 One thread	99 / 100 / 100 / 100	2.3 s	0	531 KiB	1	12,020 px	2 review photos intentionally eager (fixes the empty frames the critic found)
04 The deal	100 / 100 / 100 / 100	1.5 s	0.002	373 KiB	1	10,473 px	6 SVG tile marks have no srcset (vector)
05 Game night, 7 pm	100 / 100 / 100 / 100	1.8 s	0.036	534 KiB	1	10,720 px	clean

Before revision, mobile performance was 84 / 100 / 73 / 77 / 94. The common fix was the render-blocking Google Fonts stylesheet (now loaded with media="print" and swapped on load, with a <noscript> fallback) plus 400px image twins for tiles and swatches. Each concept's NOTES.md has a "Revision" section listing what changed and which critic points were declined, with reasons. The "best practices" 96 on 01, 03 and 04 in the first post-revision run was a missing favicon (a console 404); an inline SVG favicon was added to those three files and the score is now 100 across the set.

What the revision changed in each concept, verified in the new screenshots: 01 straightened every postcard outside the hero and moved the stamp off the sweater's collar; 02 rebuilt the mobile wall as a 2-up grid of one-tap flats, moved the CTA under the H1 (about 320px) and wrote "Game night, itemized."; 03 replaced disc chips with flat tiles, moved the CTA above the hero image, leads with Navy/White under "Game night, anywhere."; 04 fixed the clipped hero labels, made Complete Set the only filled button and wrote "Pick your hand."; 05 shrank the mobile timestamp so the primary CTA now sits at about 372px, removed bare-deck add-to-cart from the edition row, and added the three-price strip.

My ranking and recommendation

05 Game night, 7 pm. Recommended direction for the Shopify build.
03 One thread. The most elevated page and the best single idea; the strongest source of borrowed parts.
04 The deal. The most original and the best colorway wall; too dense for the brand's positioning as built.
01 Postcards. The best raw conversion mechanics; the type and paper system pull the brand toward craft.
02 The line sheet. The safest and the fastest; the least memorable.

Recommendation. Take 05 into the Shopify build. It is the only concept whose photography answers the brief's positioning of "the table: real people, real play", it steers deck buyers to the Complete Set with a boxed default and a single filled button, its colorway wall is seven one-tap deep links with the garment visible on every tile, it passed Lighthouse mobile before revision, and its device (a time label plus heading per section, one rail) costs nothing in Liquid: each timed section is an OS 2.0 section with a "time label" text setting, so the schedule survives the theme editor. Borrow three parts into it during the build: 03's colorway-driven accent on the wall (a metafield hex per variant that tints the section's rule and swatch ring, not the CTA), 04's card-proportioned wall tile with the real dotted-star border for the seven colorways, and 01's three-price strip above the mobile ladder. Do not take 03's thread or 04's rings wholesale: the strategy document says tile and game motifs are shorthand, not wallpaper, and 05 already has one device. If the client prefers the most premium-looking page over the most conversion-ready one, 03 is the alternative, on the condition that its wall adopts the 04 tile and its logo keeps the brand's real colours.

Remaining risks

Photography (critical path). Every concept was built without the hero image the brief specifies. There is no photograph of the MAHJ Knit Sweater worn at a mahjong table, no on-model shot per colorway, no knit-texture macro, no exploded Complete Set or Table Set, no Summit lifestyle shot, no First Lines image in assets/ (five were taken from the live Shopify CDN), and no customer photos. Four of the seven colorway flats were also missing from assets/ and came from the CDN. All five heroes therefore use a flat on white; three chose the same file before revision. The shot list below is what the winning direction needs.

Shopify build dependencies.

Colorway wall deep links use real variant ids (size M) and work today. Rendering the wall from the product's variants grouped by the Color option needs the PDP variant-image assignment task to land first, or a metafield per variant with the tile image and hex.
The Table Set is a proposed SKU (/products/table-set, marked data-placeholder="sku"); its $165 price and $199.90 compare-at need the bundle product created via Shopify Bundles or a fixed bundle SKU. Complete Set links to /collections/bundles-gifts, which does not exist yet (live collections are mahjong-cards and accessories only; apparel, bundles-gifts and the six-item nav need smart collections built from tags).
Reviews are six placeholders marked data-placeholder="review"; the aggregate "4.9 from 212 reviews" is marked data-placeholder="aggregate". Real content needs Judge.me (or a metaobject) plus the Etsy permission and the review-request campaign.
The announcement bar's two messages and the seasonal hero swap need a date-scheduled section setting (two block groups with start and end dates read in Liquid).
Email capture posts to a console log; production uses Shopify Forms. The first-visit delayed modal from the brief is not built in these static concepts.
/pages/shipping and /pages/faq are linked in every footer and do not exist yet.
Google Fonts are used because no brand fonts ship in assets/. A re-brand kit outside assets/ (re-brand/PlayAway_Brand_Kit_v1_1.md) proposes Unbounded and Bricolage Grotesque and a sky/navy/blush palette with two accents; concept 04 previews those faces. If that kit is adopted, the type of the winning concept changes, and the kit's two-accent rule conflicts with this brief's one-accent rule.

Performance. The shared working set's smallest rendition was 800px in the first pass; a 400px twin was added before revision so tiles and swatches stop shipping 800px files. Lighthouse mobile before revision: 01 84, 02 100, 03 73, 04 77, 05 94; the render-blocking Google Fonts stylesheet was the common cause. Post-revision numbers are in the QA table above.

Shot list for the winning direction (05, with borrowed parts)

Same table, same light, one grade, warm-white linen or the navy table; every frame at least 3000px on the long edge; deliver both 4:5 and 1:1 crops.

#	Subject	Framing	Orientation	Lands on
1	MAHJ Knit Sweater worn at the table mid-deal, one frame per colorway (seven changes, same seat, same light), cards and a rack in frame, face or three-quarter	Waist-up, table edge in the bottom third, room to set the H1 on the left	4:5 portrait plus a 3:2 crop for desktop	Hero (Q4), Sweaters category tile, wall tiles
2	Each colorway flat on the warm-white linen (not pure white), or cut out with transparency	Straight-down, sweater centred, sleeves in	1:1	Colorway wall, hero fallback
3	Knit texture macro per colorway showing the intarsia edge of the M	Close, fills frame	1:1	Wall swatch, PDP
4	Complete Set overhead: one deck open, four racks, rack bag, both guides, on linen	Straight-down, every component visible, generous margin for callouts	1:1 and 4:5	Bundle ladder middle tier, cart upsell
5	Table Set overhead: deck, four racks, bag, First Lines set of four, gift wrap and ribbon	Straight-down, exploded so nothing overlaps	1:1	Bundle ladder gift tier, gift landing
6	Five editions open-tray, same angle and surface, one per edition including Summit	Three-quarter, tray front-left, box lid behind	1:1	Edition row
7	Summit Edition in a lodge or snow setting, hand fan, mirroring the Texas sky and Beach fans	Hand fan front and centre, place behind	4:5	Edition row, Summit tile
8	Hands holding a rack with cards, sweater sleeve visible, at the table	Tight on the rack, second player soft behind	4:5	Accessories tile, racks upsell
9	A First Lines card in a real hand at the table	Tight, legible text	4:5	Table Set callout, PDP add-on
10	Four women at the table, mid-game, at least two in MAHJ sweaters, laughing, cocktails	Wide, overhead or high three-quarter	3:2 and 4:5	9:45 pm Table talk header, About
11	Gift-wrapped Table Set in hand at a front door	Waist-down, box centred	4:5	Email trust strip, gift tier
12	Customer-style phone photos from the review-request campaign (permission secured)	Any	4:5	Review section photo cards

Assumptions made

assets/ is the canonical image source. The live Shopify CDN was used only for the same product where assets/ had nothing (four sweater colorways, First Lines, extra rack shots, one on-model shot). No stock, no AI imagery. The CDN files are listed in assets/INVENTORY.md with provenance.
Real variant ids (size M) were used for the seven colorway deep links instead of placeholders, pulled from the live store on September 3, 2026. If sizes or colorways change, the ids change.
Edition price is $62.95 per the content brief (the live store shows $60); Complete Set $85 to $100 matches the live "Deck + Racks + Rack Bag" and "+ First Lines" tiers; Table Set $165 with a $199.90 compare-at (component total: $62.95 + $35 + $8 + $20 + gift wrap valued at $73.95 rounds to the $199.90 anchor the concepts show) is the brief's recommendation, not a live product.
Nav destinations /collections/apparel and /collections/bundles-gifts are assumed smart collections to be built by the catalog workstream; /collections/mahjong-cards and /collections/accessories exist. Blog links are the real post URLs. Free shipping threshold $85 per the brief's recommendation.
The seventh colorway is the short-sleeve Lavender/Purple; it is treated as a colorway of the same product because that is how the live store lists it.
Announcement messages: "Free shipping on orders over $85" and "The fall sweater drop ships October 1" (October 1 is the redesign ship date in the brief; it stands in for the real drop date).
Six reviews are invented placeholders, clearly marked; the aggregate rating is a placeholder. Nothing fake is meant to ship.
Read times "12 min" and "4 min" for the two blog posts are estimates.
Cards-vs-tiles figures (12 oz vs 8 to 10 lb, $150 to $400 for tile sets) are the brief's C5 numbers and need a fact-check pass before publishing.
No brand fonts were supplied in assets/, so Google Fonts were used for page typography. At the client's request the header and footer logo on every concept and on the gallery is the re-brand kit's primary wordmark: "PLAY AWAY" in Unbounded 800, letter-spacing -0.04em, navy or white only, per re-brand/PlayAway_Brand_Kit_v1_1.md. It is rendered as SVG outlines (concepts/shared/img/wordmark-play-away.svg and -stacked.svg, generated from the Unbounded ExtraBold font with fontTools), so no third web font loads and the mark cannot flash or reflow. The roundel stays in its kit-assigned roles: favicon, stamps and seals. Concept 04 additionally uses the kit's proposed faces (Unbounded plus Bricolage Grotesque) for its page typography as a preview. The wordmark is a logo, not a label, so it is the one place uppercase appears on these pages.
Instagram-framed exports were used only where no unframed twin existed, cropped 7% per side in the working copy; originals in assets/ were never modified. assets/INVENTORY.md was written into the assets/ folder as instructed.
The Needlepoint Hat, the raw Faire URL, and the hat's 22-image gallery are absent from every concept by design.
Playwright screenshots were taken with prefers-reduced-motion: reduce so the one motion moment does not blur the capture; open the pages in a browser to see it.
Lighthouse was run with simulated throttling against the local static server; production numbers on Shopify's CDN with theme JS will differ.

Files

concepts/index.html gallery; concepts/0N-<slug>/index.html the five concepts; concepts/0N-<slug>/NOTES.md each builder's decisions and revision log; concepts/0N-<slug>/screens/ full-page and first-viewport screenshots at 375x812 and 1440x900 plus axe.json and lighthouse.json.
concepts/shared/img/ the optimized working set (WebP at 1600, 800 and 400px; Modern tile SVGs in tiles/); concepts/shared/BRIEF.md the shared build brief; concepts/THESES.md; concepts/CRITIQUE.md.
assets/INVENTORY.md the asset inventory (originals untouched).
tools/ QA scripts: serve.mjs (port 4173), shoot.mjs, axe.mjs, lint.mjs, lh.mjs.