Kaffe Origin: A Monochrome Framer Template for Coffee RoastersKaffe Origin: A Monochrome Framer Template for Coffee Roasters
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Noa's avatar
Noa Torner
• 6h
Kaffe Origin is a Framer template for specialty roasters, built on one idea: if what you're selling is the origin, the interface must publish it. Each coffee contains its batch, altitude, producer and process. The entire interface is monochrome so that photography is the only thing that gets to have colour.
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.
Completed work
Framer Website DesignAdobe IllustratorClaudeFramerFramer Website Development
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started