Reve Cafe Digital Menu


Overview
Reve is a specialty cafe in Tehran with a strong visual identity and a carefully curated menu spanning coffees, cold drinks, and pastries. The brief was to build a digital menu that felt as considered as the brand itself — fast to navigate, beautiful on any device, and effortless to update. We designed and developed the full experience in Next.js with Tailwind CSS, building a category-driven layout with smooth transitions, product-focused photography presentation, and a refined typographic system that matches the Reve brand tone. Branding guidelines were extended into the UI, ensuring every screen feels like a natural extension of the physical cafe experience.
Color System
A monochromatic foundation — seven steps from absolute black to white — anchored by three accent colors used only with full intent.
Reve Charcoal
#2C2C2C
Reve Slate
#4D6370
Reve Stone
#8C8C8C
Reve Mist
#E8ECEE
Reve Cream
#F7F6F6
Reve White
#FFFFFF
Accent — Use with intent
Reve Rose
#E8A0B8
Typography
Five type steps — each carrying a specific weight of meaning. From 96px display headlines down to 11px product labels.
Display
32px / Bold
Heading
20px / Medium
Body
15px / Regular
Price
15px / Bold
Caption
12px / Light
Brand Voice
Six words that form the editorial backbone of every piece of writing. The brand speaks in short, certain sentences. No warmth for warmth's sake.
- Minimal
- Warm
- Dreamy
- Contemporary
- Photography-First
- RTL-Ready
Spacing System
A fixed rhythm of eight values. Every element sits at a deliberate distance — nothing arbitrary, nothing accidental.
Feature — Admin Panel
Full editorial control, built in
Behind the menu is a custom admin panel that lets the Reve team manage every item themselves — no developer needed. Staff can add new products, edit names, descriptions, prices, and photos, and toggle items on or off. A drag-and-drop interface controls the display order of products within each category, so the most important items always surface first without any code changes.

Product management with drag-and-drop ordering — 411 × 836px

Edit product detail form — 1218 × 586px
Feature — Secure Access
Staff login
The admin panel is protected behind a simple authentication screen — keeping the menu live and public while giving only the Reve team access to edit it.

Staff login — 508 × 531px
Next project