← Back to work
In progressPreview the build ↗

Velar Coffee

A Webflow Ecommerce store for a specialty coffee roaster, designed and built from scratch.

Role
Design + Build
Timeline
In progress
Tags
WebflowEcommerceCMSDesign System
Velar Coffee homepage

A shop that reads like a print catalogue

Velar is a self-directed Ecommerce build for a specialty coffee roaster. The goal is a store that feels closer to an editorial magazine than a standard product grid: a serif display system, generous white space, and photography carrying most of the weight, running on top of Webflow Ecommerce so products, prices, and collections stay CMS-editable.

Process

Homepage: an editorial split hero pairing lifestyle photography with a large serif headline, over a rotating photo carousel.
Homepage: an editorial split hero pairing lifestyle photography with a large serif headline, over a rotating photo carousel.
Product page: real bag photography with size variants and CMS fields for tasting notes, origin, process, and brew guidance.
Product page: real bag photography with size variants and CMS fields for tasting notes, origin, process, and brew guidance.

Interaction highlights

Editorial serif system

A display serif paired with a quiet sans, on a warm neutral palette, tuned so long headlines set as cleanly on a product page as on the homepage.

Webflow Ecommerce, CMS-first

Products, prices, tasting notes, and brew ratios are all CMS fields, with cart and checkout wired through Webflow Ecommerce.

Flavour-profile collections

Coffees are grouped by flavour and brew style, not just origin, so the catalogue can be browsed the way people actually shop for beans.

Status

  • In active development; preview the current build at velarcoffee.webflow.io.
  • Homepage, product pages, product CMS, and cart / checkout are in place. Collection pages and the About / brew-guide content are still being built out.