Tactics rebuild · internal preview

Build Index

Mock pages staged for the Tactics Shopify rebuild. Hosted on Vercel as tactics-preview · tactics.path7labs.com. Designs are exploratory — not locked.

/styleguide

Styleguide

Typography, color, spacing, and button explorations. Decision-driver page for the brand kit.

In progress

/home

Homepage

Mega menu, hero, sticky pill nav, shop-by-activity, featured products, brand marquee, editorial, footer.

In progress

/collection

Collection — Decks

Skateboard decks collection page. Sticky filter+sort bar, mobile filter drawer (bottom sheet), 12-card grid with color swatches, pagination.

In progress

/pdp/missing-link

PDP — Missing Link

Alien Workshop Missing Link product page. Bidirectional color↔size variant filter, width engine, sticky ATC. Concept reference.

Live

Component exploration

Product cards

Four candidate layouts for the product card across collection grids and the homepage Featured rail. Same product, different anatomy. Pick the ones that work — they get standardized into the brand kit and the Liquid port.

A · Color swatchesColor dots under price · best for multi-colorway hardgoods (decks, hats)

Just in

Alien Workshop

Missing Link Skateboard Deck

$62.95

B · Containment cardWhole card has chrome · clearer separation in dense grids

New

Powell Peralta

OG Burst 8.25 Skateboard Deck

$56.95

Ships in 24h

C · Compact w/ ellipsisSingle-line title with … overflow · best for tight grids on collection pages

Alien Workshop

Photosynthesis Skateboard Deck — Limited 8.25 Edition

$54.95

In stock

D · Tags + swatchesCategory tags · color swatches · richest info, best for filterable collections

Powell Peralta

Vallely Elephant 8.63 Flight Deck

/ Deck / Street / Pro

$119.95

VARIANT F · canonical · ship-to-Skeleton

Final card

Combination of A's color swatches + B's full card containment. Single class set (.t-pc, .t-pc__media, .t-pc__body, .t-pc__swatches) — ports to Skeleton as one snippet. Liquid mapping is documented in the CSS comment block immediately above this card in the source.

Just in

Alien Workshop

Variant E · Vigor-style contained

Image-over-details box

Two-zone card: product image on a card surface, details (brand/title/price/swatches) in a contained details box of a distinct elevation. The details box is never white in dark mode — it's `--surface-2` (one elevation darker than the card). Hover the card to reveal the quick-view eye. Spacing in this grid is tightened to 10–12px per your spec.

Just in

Alien Workshop