Five art-direction theses

Written before any concept code. Each concept builds the same content and section order from concepts/shared/BRIEF.md and is judged on being unmistakable with the logo removed.

01 · Postcards — "Mahjong, made portable"

Thesis: The homepage is a travelogue pinned to a warm-white wall: every section is a postcard from a place the cards have already been (the brand's own hand-fan photo series: beach, boat, boardwalk, Philadelphia, Italy, Texas sky, ski lodge), the sweater is the first thing you pack, and the editions are destinations. Type: Fredoka (display, rounded, echoes the roundel lettering) + Nunito Sans. Accent: sky blue #6BABFF with navy text on CTAs. Motion moment: the hero postcard stamps itself on load (one transform, once). Layout: pinned, slightly rotated flat paper (no drop shadows), postmark and stamp devices built from the real roundel, address-side typography for product details.

02 · The Line Sheet — "Everything in its row"

Thesis: The homepage is a rational, ruled spec sheet in the spirit of the brand's own wholesale line card: hairline rules, big index numerals, tabular prices, sentence-case headlines set wide, photography large and unadorned; warmth comes only from the pictures and the voice, restraint from everything else. Type: Syne 800 (display, wide grotesque with personality) + Inter. Accent: hot pink #E13086 with white text, on CTAs only. Motion moment: the sweater colorway swap in the wall (crossfade of one large image). Layout: a strict 12-column grid at 1440 collapsing to a single ruled column at 375; each section is a numbered row (01 to 09) with its heading in the left margin.

03 · One Thread — "The only color is the one you chose"

Thesis: A near-monochrome editorial page, ink on warm white, drawn with hairlines and huge serif headlines, where the sole chroma is the photography, the CTA accent, and a single 4px thread of yarn that runs the full length of the page in whatever sweater colorway the visitor last tapped, stitching every section to the sweater. Type: Fraunces (display, soft high-contrast serif with optical sizes) + Instrument Sans. Accent: navy #17264A on CTAs only (body text is warm charcoal #2A2724, so navy stays exclusive to buttons). Motion moment: the thread recolours and the sweater image crossfades when a colorway is tapped. Layout: asymmetric editorial columns, generous whitespace, product details in small caps-free tabular sans.

04 · The Deal — "Cards, not tiles, all the way down"

Thesis: Cards are the interface: every product, review, price tier and colorway is a card in the brand's real proportions with its real dotted-star border, so the seven sweater colorways are a dealt hand you pick from, the bundle ladder is three hands of increasing size, and the reviews sit on card faces with the real suit art; the page never uses a rectangle it could have made a card. Type: Unbounded 700 (display, the in-progress brand-kit face) + Bricolage Grotesque. Accent: classic-band green #187A5E with white text. Motion moment: the hero hand deals in on load (seven cards fan once). Layout: cards on a warm-white felt-free table, flat, no shadows, edition roundels as seals, Modern tile SVGs as suit marks only in the review corners.

05 · Game Night, 7 pm — "A run of show you can shop"

Thesis: The page is the evening's schedule: oversized condensed timestamps mark each section ("6:30 Get dressed", "7:00 Set the table", "7:15 Pick a deck", "7:30 Cards, not tiles", "9:45 Table talk", "Next Tuesday: Join the table"), the photography is only what a game night actually looks like (hands at the floral table, cocktails, racks on the navy table, the kitchen-table host), and the sweater is what you put on first. Type: Big Shoulders Display 800 (display, condensed with personality) + Work Sans. Accent: purple #6B4FBB (from the lavender sweater's letters) with white text. Motion moment: the timestamps are static; the single motion is the hero clock-hand image reveal (the sweater slides in from the left once on load). Layout: a vertical timeline rail on the left at 375 that becomes a two-column schedule at 1440, section times as the largest type on the page.