KopiBendang

Kopi Bendang is a fictional neighbourhood kopi shop I created to explore hospitality web design for the Malaysian market. The brief I set myself was a single page that does three jobs quickly: make you feel the atmosphere, show you what’s on the menu, and get you talking to the shop.

Small F&B owners here rarely run booking systems or online stores. Their customers message them. So instead of a cart or a reservation form, every call to action on the page opens WhatsApp. The copy is written in Malay, the way the shop would actually talk to its regulars.

I started by collecting coffee-shop landing pages on Dribbble and similar design galleries. Most of them share a pattern that works: a full-bleed, moody photograph, a large serif headline, and a warm earthy palette. The page sells a feeling before it sells a product.

What most of them also share is the same Western café of exposed brick, Edison bulbs and flat whites. A Malaysian kopi shop is a different place: marble tables, kopi in thick-rimmed cups, roti bakar, and whole families at breakfast. I kept the layout pattern and rebuilt everything that carries meaning.

Every colour and font lives as a Tailwind v4 @theme token in one CSS file, so the markup never holds a raw hex value. Apart from the orange accent, the only saturated colour on the page is WhatsApp green, and it is reserved for the one action I want people to take.

The one hand-made detail is a loose, pen-drawn underline beneath each section title. It’s a PNG used as a CSS mask, so it takes its colour from the orange token and scales with the heading.

The first build came together in an evening. It worked, but next to the brief it looked like every other café template: a stock Western interior, an orange eyebrow label above every heading, and a name that didn’t mean much.

In the second pass I renamed the shop and replaced the hero with a scene that reads as a Malaysian kopitiam: a family sharing kopi and roti bakar. I removed the eyebrow labels and let the underline set the rhythm of the page.

Art direction for mobile

A centre-cropped landscape photo on a phone usually cuts off the people. So the hero ships two compositions through a <picture> element: a wide one for desktop and a portrait one for phones, each framed so the family stays in shot behind the headline.

The whole site is one index.html, one CSS file and about seventy lines of JavaScript, bundled with Vite. A static page this size doesn’t need a runtime, and skipping one keeps it fast on a mid-range phone on mobile data. I used Claude Code to speed up the markup and the small interactions, and made the design calls myself.

Most people will find a kopi shop on their phone, standing outside or scrolling in a Grab queue. On mobile the headline, the WhatsApp button and the menu are all within the first two swipes.

Because it is plain HTML with tokenised styles, re-skinning this for a real shop is mostly swapping photos, copy and a handful of colour tokens.

For a real client, the next steps are the shop’s own photography instead of stock images, WhatsApp links with the owner’s number and a pre-filled message, and a Maps embed pointing at the actual address.