Traverse style kit

For a maker of things that get carried every day, whose store has to feel as considered as the gear and let a shopper find the right bag in three clicks.

Colour

Snow#FFFFFF
The page, the bar, the drop-down and the search panel.
Carbon#141414
Type, the announcement strip, every filled button, the film band.
Kelp#2F4A3B
The New badge, the active tab, the arrow and the button under the pointer.
Fog#F2F2EF
The ground a product sits on: cards, the spec panel, the footer.
Ash#D9D9D4
Hairlines, chips at rest, the swatch ring.

Type

Display: Sora; Semibold · -2% tracking · 1.02 leading. Headlines, tile labels, the hero, the film band.
Reading: Inter; Regular · 15 to 16px · 1.6 leading. Paragraphs, prices, product copy. Medium at 13px for the bar, chips and buttons.

Made of

Buttons are pills: carbon with snow text, kelp under the pointer; snow on a photograph; outlined when second.
The bar opens a row of collection tiles under the item the pointer rests on; the tiles arrive one after another.
Product cards sit on fog, swap to the second photograph on hover, and slide an add-to-bag up over the picture.
Category tiles darken at the foot for the label and zoom a little under the pointer; the arrow slides in.
The catalogue appends the next page as the last row comes into view; each card fades up as it lands.
The film band waits behind a round play button and swaps itself for the player in place.

Voice

Direct, warm, a little wry. Short sentences. Name the problem the thing solves before the thing. Never say premium.

Hand-built by Akashi Labs for Stashed