Concept 04 · The Deal

"Cards, not tiles, all the way down."

Thesis

Cards are the interface. Every product, price tier, edition and colorway on the page is a card in the brand's real proportions, with a version of the real dotted-star border and real corner indices. The seven sweater colorways are a dealt hand you pick from; the bundle ladder is three hands of increasing size (one card; a card with racks and a bag; a spread of five); reviews sit on plain card faces with the Modern Edition suit art in the corner. The page never uses a rectangle it could have made a card. The comparison table and the footer are plainly not products and stay plain.

The card component

• Proportion: aspect-ratio: 1029/1600, taken from the real card renders in shared/img/cards/ (1029 x 1600). The physical card is about 2.75 x 4 in (11:16 = 0.6875); the render is 0.643. I used the render so real card faces drop into the same frame without cropping.
• Face: pure white #FFFFFF, 1px edge #E4DCD0, radius 8 to 14px depending on size. No shadows, no blur, no gradients.
• Dotted-star ring: one CSS pseudo-element, a tiled five-point star SVG data URI used as a mask, intersected with a padding ring (mask-composite: intersect, exclude). Colour comes from --c per card. Ring plus gap is about 8 percent of card width, matching the real border. Fallback for browsers without mask-composite: a 2px dotted border in the same colour. .card.plain drops the ring (used for the whole review section).
• Indices: Unbounded at top-left and the same text rotated 180 degrees at bottom-right, like a real card. Index ink --i is always a 4.5:1-or-better colour on white.

Fonts

• Display: Unbounded 600 (headings, indices, drawer nav, brand word) and 700 (the large number or word of an index). Sentence case, letter-spacing: -0.02em. The h1 is 600, not 700.
• Workhorse: Bricolage Grotesque 400/500/600 for body, UI, product details, buttons.
• Google Fonts, loaded non-blocking: <link rel="preload" as="style" onload="this.rel='stylesheet'"> with a <noscript> stylesheet fallback, display=swap, preconnects to both font hosts.
• Two local fallback faces (Unbounded Fallback, Bricolage Fallback) map to Arial with size-adjust 128 and 103 percent so the swap moves as little as possible. Those percentages are estimates, not measured; the h1 line count is made deterministic with an explicit <br> instead.

Colour

• Page background #FBF8F3. Body text navy #17264A. Muted text #4A5670 (6.9:1 on the background).
• Accent #187A5E (classic-band green) with white text (5.3:1). Used only on .btn, .lnk, the in-card learn links, the skip link and focus rings.
• Card ring colours (--c) and index inks (--i), all inks at 4.5:1+ on white:
  • Green/Blush #387D5A / #2F6B4F
  • Pink/White #E8A0BF / #A63B6E
  • Navy/White #17264A / #17264A
  • White/Blue #6BABFF / #2C5DB0
  • Hot Pink/Blush #E13086 / #C2186F
  • Light Blue/White #9CC3F0 / #2C5DB0
  • Lavender/Purple #C9B7F2 / #6B4FBB
  • Beach #E8A0BF; Classic #387D5A; Modern #6BABFF; Texas #E13086; Summit #17264A (inks as above)
  • Neutral tiers: sand #CFC7BA; highlighted tier and email card: navy.
• Every ring colour is now inside the brief's sweater palette.
• The colorway wall sits on a navy band (the "table"). Text on it is white or #C9D3EA (9.7:1). It is the one full-bleed colour block.

The single motion moment

On load the hero hand deals in: all seven cards start stacked upright at the centre, faded out, and rotate into their fan positions. CSS keyframes only, 550ms per card with a 70ms stagger by distance from the centre, so the deal finishes in about 760ms. prefers-reduced-motion: reduce disables it and shows the static fan. When the last card lands, JS removes the deal class so the static transform rule owns the layout.

Nothing else animates on scroll. Button hover is a 120ms background change; the toast is a 150ms fade. Tapping a card reorders it instantly (no transition), by design.

Hero composition

• Order at 375: h1, one supporting line, the hand, then "Holding Green/Blush · From $95 · Sizes S to XXL", the primary CTA and the "Or pick your deck" text link. Everything through the CTA sits inside a 667px viewport with the header.
• At 1440: two columns, copy left, hand right, the CTA block under the copy.
• Fan geometry: seven cards rotated about a pivot 2.35 card-heights below the top; the selected card at 0 degrees, lifted 10px, highest z-index; z-index falls outward on both sides. Rotation step is 6 degrees at 375 (exposed strip about 46px at 116px cards) and 5.5 degrees at 1440 (about 70px at 200px cards). Total span 372px at 375 and about 610px at 1440, so nothing overflows.
• Labels: the front card carries the full two-line index (top-left and rotated bottom-right). Back cards carry only the first colour word, set vertically along their exposed edge the way the suit word runs down a real card: left-hand cards along the left edge, right-hand cards along the right edge. Verified at 375 and 1440 that every label is fully inside its strip; nothing is clipped.
• Front card: Green/Blush, first in the DOM, fetchpriority="high", plus a <link rel="preload" as="image"> with matching imagesrcset/imagesizes. The six back cards are loading="lazy".
• Tapping a back card swaps it with the centre card (instant), updates the CTA href to that colorway's real variant id, the CTA text, the "Holding" line and the label mode, logs a variant select line and shows a toast.

Section decisions

1. Announcement: two static messages on a blush band. Header: blue roundel plus "Play Away" in Unbounded; six nav items visible from 1100px; search, cart with a count, hamburger below 1100px. Announcement plus header is 99px at 375.
2. Drawer: a native <dialog> opened with showModal() (focus trap, inert background and Escape come from the platform). "Shop the sweater" card at the top, six items at 48px.
3. Category: four portrait cards (booth photo, Italy bar fan, kraft gift box, racks with bag).
4. Colorway wall: seven deep-linked cards plus an eighth info card ("$95 from", sizes, one line). 2-up at 375, 4-up from 720, one dealt row of eight at 1200 with 1 to 2 degree tilts. One CTA below.
5. Ladder: three tier cards. Cards only (one real render, text link "Start with the Beach deck"), Complete Set (real card, bag card and the racks-in-play photo front and centre; navy ring; "Most tables"; the only filled button, "Build my Complete Set"), Table Set (five-card spread with the gift box in front; $199.90 struck; "The gift"; text link). Hands are 112px cards at 375 and 124px at 900+. Prices are the big top-left indices. Stacked at 375, three columns at 900.
6. Editions: five cards, Beach first, 76vw with a peek and scroll snap at 375, five across at 900. Index is the position number over the edition name. Open-tray photo inside the frame, edition roundel as a seal; Summit has no roundel so its seal is a CSS circle.
7. Cards vs tiles: real card render next to a CSS-drawn grey tile silhouette, captioned as drawn. Five-row table. The three original benefits are h3 microcopy, no icons.
8. Learn to play: two ringed cards, read time as the index.
9. Table talk: plain cards, no ring. Aggregate card first (data-placeholder="aggregate"), six review cards (data-placeholder="review") with inline SVG stars and a tile SVG in the corner, three photo cards. 1-up at 375 with auto-height quote cards (full 300px measure) and 4:3 photo cards; 3-up portrait from 720, 5-up from 1100.
10. Join the table: one landscape card, navy ring, "Oct 1 / drop day" index, labelled email field, "Deal me in", trust strip.
11. Footer: Shop (six plus gift cards), Help, Company (Wholesale, Instagram), second newsletter form, payment methods as text, no raw URLs.

Interactions and Shopify stand-ins

• Hero card taps: console.log('[shopify] variant select → ...') plus toast.
• Both newsletter forms: prevented, validated with checkValidity, logged and toasted.
• Collection and product links stay real hrefs. /products/table-set carries data-placeholder="sku".
• Toast is role="status" aria-live="polite", two seconds.

Accessibility

Skip link, header/nav[aria-label]/main/footer, one h1, h2 per section, h3 children (tier names are visually hidden h3s). :focus-visible 3px accent outline. Labelled inputs. Icon buttons have aria-label. Hand cards are <button aria-pressed> with full-name labels; wall cards are links with full-name labels. Stars are role="img" with a text rating. Every image has alt (empty where the parent carries the name). No text sits over photography.

Assumptions

• srcset widths are the real intrinsic widths of each file (400, 800, and 1024/1200/1029/1279/1335/1392/1600 where a full-size file is included).
• Anything rendered under about 300px (hero cards, wall cards, ladder hands, seals, review photos, logo, drawer promo) uses the -400 twin as its only source. Category, edition, learn and comparison images carry 400/800/full candidates with sizes so a phone still receives the 400.
• The six tile SVGs (review corners) are resolution-independent: width, height and alt, no srcset.
• Cards only links to the Beach Edition PDP, consistent with Beach leading everywhere.
• Cart count is a static 0; there is no add-to-cart on the homepage.
• Index labels use sentence case ("Light blue", "Hot pink"); CTA text and data-name keep Shopify's option values ("Light Blue/White").
• The wall's Lavender card carries "short sleeve" under its index; the hero card says it in its aria-label.

Photography gaps and how they were handled

• No sweater worn at a table: the hero is a hand of the seven flats. Human presence comes from the booth photo (category), the Italy bar fan, and the kitchen-table portrait (reviews).
• No exploded Table Set: a spread of five component cards; the gift-wrap card uses the Classic deck in a kraft gift box, the only honest gift photo. The Complete Set uses racks-in-play-green-tablecloth so racks are visibly in use.
• No Summit lifestyle shot and no Summit roundel: open tray plus a CSS seal.
• No tile photo and stock is banned: a labelled CSS silhouette.
• First Lines are the CDN product shot.

Performance

• HTML 65KB, inline CSS and JS, no dependencies beyond Google Fonts.
• Non-lazy images at 375: the 400px logo (10KB) and the 400px front card (14KB), about 24KB. Everything else is loading="lazy", including the six back cards.
• Sum of every image src on the page (the smallest candidate each): about 547KB across 38 files, under the 1.2MB budget. Larger candidates are only requested where sizes calls for them (desktop category, edition, learn and comparison images).
• CLS: the fan reserves its height in CSS from the card width; every image has width and height; the h1 wraps with an explicit <br> so the fallback-to-Unbounded swap cannot change its line count; metric-adjusted local fallbacks reduce other reflow.
• Lighthouse was not run here (no Lighthouse available in this environment); the coordinator re-runs it.

Self-check

<h1 1 · uppercase 0 · carousel|autoplay 0 · fetchpriority="high" 1 · 7 unique variant ids · 63 unique image paths, all present on disk · 6 data-placeholder="review" · whole-word "hat" 0 · 50 <img>, 0 without alt or width/height, 6 without srcset (the SVG tiles), 2 without lazy (logo and front card, DOM positions 1 and 2) · document scrollWidth 375 at 375 and 1440 at 1440.

Checked visually with headless Chrome at a true 375px and 1440px through an iframe harness (desktop Chrome clamps windows to about 500px), including a simulated tap that moved Lavender/Purple to the front and rewrote the CTA.

Revision (after the critique)

Changed:

1. Hero labels: back cards show the first colour word only, set vertically along the exposed edge; the front card carries the full name; rotation step reduced to 5.5 degrees at 1440 for a 70px strip. No label is clipped at 375 or 1440.
2. Ladder: "Build my Complete Set" is the only filled button; Cards only and Table Set are accent text links. Hands enlarged to 112/124px cards; the racks-in-play photo leads the Complete Set hand.
3. Palette: Summit ring to navy #17264A, Modern ring to baby blue #6BABFF.
4. Density: the whole review section (aggregate, quotes, photos) lost its star ring and is plain white cards.
5. Review measure: 1-up at 375 with auto-height quote cards; portrait grids resume at 720.
6. H1 changed to "Pick your hand."; lede rewritten so it does not repeat it; h1 weight 600.
7. Performance: non-blocking font stylesheet with noscript fallback; front card first in DOM with fetchpriority="high" and an image preload; six back cards lazy; -400 twins added everywhere (45 candidates) and used as the only source under 300px; fixed a desktop overflow (a 4:3 aspect ratio on photo cards inside the 5-column grid) found while re-verifying; h1 <br> and metric-adjusted fallbacks for CLS.
8. Linter: tile SVGs carry width, height and alt; only two images are non-lazy and both are in the first viewport.

Not taken, with reasons:

• A 70px exposed strip at 375: six strips of 70px plus one card cannot fit in 375px (6 x 70 + 116 = 536). The vertical label solves the clipping at 46px instead; the 70px strip is delivered at 1440.
• Removing the ring from the learn cards as well: the review section already provides the plain rectangles; learn cards keep the ring so the "Learn" pair still reads as part of the deck.
• Replacing the booth photo in the Sweaters tile: the critic assigned that swap to 05, not 04.