Mirass Roastery

Overview

Mirass is a specialty coffee roastery with a carefully curated product line — single-origin and blended coffee beans, indulgent powders including hot chocolate and white chocolate, and premium Matcha tea. The project called for a brand identity and storefront that could hold this range together with visual confidence. We designed the full UI system in Figma and built it in Next.js, focusing on rich product presentation, a dark editorial aesthetic, and a seamless browsing experience that lets the products speak for themselves.

Color System

A monochromatic foundation — seven steps from absolute black to white — anchored by three accent colors used only with full intent.

Accent — Use with intent

Typography

Five type steps — each carrying a specific weight of meaning. From 96px display headlines down to 11px product labels.

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.