Moka

Item: Moka
Rating: 7.4

Framer template for neighbourhood cafes and coffee shops

A Framer Marketplace template by Ambie. Its words and photos are demo content.

Live preview Get this template Save page

7.4/10MABTU rating

Home

DESKTOP · 1440 × 24,000/ ↗

MOBILE · 390

Section outline · Home

01heroBubbly wordmark over flash close-up portrait with intro line
02introBrown and yellow copy tiles beside pinned eating photos
03offersPinned community cards next to best-seller and review tiles
04productsYellow product cards over oversized outlined heading
05menuDrinks and food price lists in brown and yellow panels
06merchProduct cards on curved rotating text
07menu tabsTabbed latte-art photo grid with prices
08galleryWide interior photo under huge heading
09storySplit sculpted bean with source, roast, serve captions

Rating · Home

Visual design7.8

UX & clarity6.8

Originality8.2

Craft & consistency6.8

Motion7.0

Performance & a11y7.0

This page scores 7.4; the site score weights the home page double.

Main colours

Light·coloured background·vivid

Typography

Agharti Bold Ultra Wideheading · font · self-hosted Agharti Test Extra Widebody · font · self-hosted

Stack & style

Framer React Three.js Lenis WebGL canvas

Bold typography Playful Retro Photography-led Marquee Pinned sections Text reveal Process steps Tabs Smooth scroll Review badges

Design DNA

Template: espresso brown (#3A2A1E), latte (#8B6A55) and butter yellow (#FFF3A8) only. A bubbly 70s display face sets the giant 'Moka' wordmark over a close-up flash portrait; everything else uses a condensed retro grotesque in lowercase at large sizes. Pinned 'new this week' cards stack beside flash-lit eating shots, 'most ordered' repeats as outlined oversize type behind yellow product cards, merch sits on curved rotating text, a tabbed full menu shows latte-art tiles, and a sculpted coffee bean splits the 'from farm to cup' story.

Worth borrowing

Use one bubbly display face only for the brand name and a condensed retro grotesque for all other copy.
Put product cards over an oversized, repeated section word so a simple menu grid reads as a poster.
Explain sourcing with a single sculpted coffee bean split into two halves, with short captions around it.