Mirass Roastery
2025
Web Design · UI Design · Branding · Frontend Development
Next.js · UI Design · Branding
View Website2025
Web Design · UI Design · Branding · Frontend Development
Next.js · UI Design · Branding
View Website

Overview
میراث یک رستری تخصصی قهوه با خط محصول متنوع است: دانههای تکخاستگاه و ترکیبی، پودرهای لاکچری شامل شکلات داغ و شکلات سفید، و ماچای ممتاز. پروژه نیازمند یک هویت برند و فروشگاهی بود که این تنوع را با اعتماد بصری در کنار هم نگه دارد. سیستم کامل UI در Figma طراحی و با Next.js پیادهسازی شد؛ با تمرکز بر نمایش غنی محصولات، زیباییشناسی تاریک ادیتوریال و تجربه مرور روان.
Color System
A monochromatic foundation, seven steps from absolute black to white, anchored by three accent colors used only with full intent.
Deep Roast
#1A1410
Dark Roast
#3D2B1A
Warm Oak
#8B7355
Caramel
#C4A882
Cream
#E8D9C4
Parchment
#FAF8F4
Accent: Use with intent
Typography
Five type steps, each carrying a specific weight of meaning. From 96px display headlines down to 11px product labels.
Display
48px / Regular
H2
32px / Regular
H3
20px / Medium
Body
15px / Light
Label
11px / Medium
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.
- Elegant
- Refined
- Heritage
- Single-Origin
- Artisanal
- Precise
Spacing System
A fixed rhythm of eight values. Every element sits at a deliberate distance, nothing arbitrary, nothing accidental.
Feature: Admin Panel
Product catalog, fully in their hands
The Mirass team manages their entire product catalog through a custom admin panel, adding new lots, updating tasting notes, prices, and photos without touching code. Each product carries origin details, process type, altitude, and roast level so the storefront always reflects the current offering.

Product catalog management — 1332 × 867px

Edit product detail — 899 × 662px
پروژه بعدی