Luka Rakic

01Selected work

Velar Coffee

A Webflow Ecommerce store for a specialty coffee roaster, designed and built from scratch to read like a print catalogue.

In progress · not yet published

Role
Design + Build
Client
Self-directed concept
Stack
Webflow Ecommerce Webflow CMS Custom design system
Year
In progress
A Velar Coffee Kenya Nyeri bag beside a cup of coffee in warm morning light

02Approach

A shop that reads like a 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 carry the weight, running on Webflow Ecommerce so products, prices and collections stay CMS-editable.

The Velar Coffee homepage printed as an open magazine spread: pastry photography beside an origin and craft story
Homepage · editorial layout, set as a magazine spread

03Ecommerce CMS

Every bean, one template

Products, prices, tasting notes and brew ratios are all CMS fields, with cart and checkout wired through Webflow Ecommerce. One product template renders every coffee.

  • AProduct template · Kenya Nyeri
  • BProduct template · Colombia Huila
Kenya Nyeri product page: bag photo, size and quantity pickers, origin fields and a Flavor Profile accordion
A
Colombia Huila on the same product template, with its own price, notes, roast and process
B

04Product page

Built for how people buy beans

Coffees are grouped by flavour and brew style, not just origin. The product page pairs real bag photography with size variants and CMS fields for tasting notes, origin, process and brew guidance.

Ethiopia Yirgacheffe product page: bag photo, size and quantity pickers, origin and roast fields, and an open Flavor Profile accordion
Product page · variants + CMS fields
  1. 01

    Size variants

    Webflow Ecommerce options on every product.

  2. 02

    Flavour collections

    Browse by taste and brew style, the way people actually shop.

  3. 03

    Brew guidance

    Ratios and notes live as CMS fields per coffee.

05Design system

An 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.

Aa

Display serif

Headlines

Aa

Quiet sans

Body

  • #55301f
  • #caa47d
  • #e8e0d3
  • #121212
Split section: an open bag of roasted beans beside a clay panel with serif copy on sourcing and roasting in-house
The Velar homepage on a laptop: pastry photography beside the origin and craft story
The Velar homepage on a phone: pastry photography over the origin and craft story
  • A · Story section
  • B · Desktop
  • C · On mobile

06Impact

  • CMS-first catalogue

    Every product detail is a field, not hardcoded copy.

  • Real ecommerce

    Cart and checkout through Webflow Ecommerce.

  • Editorial feel

    A store that reads like a print catalogue, not a product grid.

Status

  • In active development.
  • Homepage, product pages, product CMS and cart / checkout are in place. Collection pages and the About / brew-guide content are still being built out.

07What I actually built

  • Webflow Ecommerce

    Products, cart and checkout

  • Product CMS

    Tasting notes, origin, brew ratios

  • Design system

    Serif display, warm neutrals

  • Flavour collections

    Browse by taste and brew style

  • Responsive implementation

    Tuned for every breakpoint

  • Editorial layouts

    Photography-led pages

08Next project

Have a complex Webflow project?

I build agencies' designs in Webflow under their brand, from complex CMS builds to custom interactions and integrations.

Let’s talk

Up next

Hot Springs Pools & Spas

Webflow CMS · Client build

View project