|

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

Typography

Five type steps — each carrying a specific weight of meaning. From 96px display headlines down to 11px 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

A fixed rhythm of eight values. Every element sits at a deliberate distance — nothing arbitrary, nothing accidental.

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 ordering411 × 836px

Edit product form — name, price, photo, visibility

Edit product detail form1218 × 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 login508 × 531px

Next project

Mirass Roastery