The coach.com header: store tabs in the charcoal bar, country and stores, the wordmark centred, search and account icons, the primary nav. On mobile the tabs share the bar with the icons and the nav scrolls.
Library
Blocks
12 blocks: whole sections of a page, composed from the components and shown on the prototype's real content. Each opens in a frame you can switch between desktop and mobile.
Storefront
The primary nav with its menus. Hover or focus on World of Coach opens the hub's categories, set large in Garamond, beside one campaign picture. Escape closes it.
Five link columns and the newsletter on paper. Links are set in Garamond, the one place the interface uses the serif, so the footer reads as fine print.
Coach Stories
The lead story full bleed to the page margins, its title set on the photograph, with a rail of two stories beside it. The rail wraps underneath on mobile.
A section's title in 73 Bold Extended and one line under it.
Four columns on desktop, each row a mix of portrait, landscape and ruled text cards, top aligned so the row reads as a ragged line of pictures. Two columns on mobile, packed densely.
The intro, the category rail and the grid, wired together. Picking a category narrows the grid to its stories, and the grid fades across.
A grid that grows. Each Load more appends the next page after a short wait, and the new rows rise in. The button goes when the pages run out.
Outline, centred under the grid on desktop and full width on mobile, with a spinner while it waits.
A paper band that breaks the grid for one partnership: its name and a link across the top, the story two columns wide, and two pictures beside it.
The partnership told as a campaign. The co-branded portrait holds still on the left while the right column runs pictures and two short notes past it.
The page's two columns: a 200px rail and the content. Anything that should line up with the grid sits in it, even with an empty rail. The rail sticks while the content scrolls.