Kaffe Origin - Framer Template

The problem

Most store templates give you a photo and a price. It works when the photo is the selling point. With speciality coffee it doesn't, because two identical bags are separated by altitude, variety, process, and who grew it. The interesting part of the product is precisely the one that these templates throw away.

The decision that conditions everything

Strict black and white. One typeface, one-pixel dividers, no accent colour anywhere.

This restraint is not an aesthetic preference, it is a mechanism. Since nothing else has colour, the photography can do something a flat template cannot: each image rests in grey and opens up to colour when you touch it. Discipline buys the reward.

Letting the effect survive on mobile

There is no hover on phones, and that is where most people look. An effect that only works on desktop is a demo, not a feature. On mobile, the reveal is triggered by scrolling: each photo lights up as it enters the screen, and going down the catalogue becomes a sequence of images illuminating one after the other.

Grow with content, not with design

Two collections that reference each other. You tag a coffee with a method and it appears on that method's page all by itself. You add a fifth method and the index row, the menu column, and a whole detail page build themselves. A previous version made with tabs I discarded for this very reason: tabs do not grow.

What I left out

There is no cart. Each product links to the checkout URL that the owner already has. A roastery that sells nine coffees does not need an e-commerce engine, and adding it would have made the template heavier, slower, and dependent on an external service.