|

Reve Cafe Digital Menu

2026

Branding · UI/UX · Frontend Development

Next.js · React · Tailwind CSS

View Website
Reve Cafe Digital Menu — mobile cover

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

Typography

Five type steps, each carrying a specific weight of meaning. From display headlines down to product labels.

Rêve Cafe

Display

32px / Bold

Espresso Drinks

Heading

20px / Medium

Tiramisu Latte

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

Eight-step spacing scale, rooted in a 4px base unit.

44px
88px
1212px
1616px
2424px
3232px
4848px

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.

Admin panel — product list with edit and reorder controls

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

Edit product form — name, price, photo, visibility

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.

Admin login screen

Staff login — 508 × 531px

Next project

Alemohamad Law Office