07 / 2026 / Web App / Platform
Website Sajak Kopi
The brand needed an online presence that presents menu items and commerce structure while preserving the literary, warm, and intimate identity of the cafe.
Client
Context and business domain
00 / Design System
Palette Logic
Web App / Platform
07
2026
Typography
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789
Layout Grid
12-column responsive index structure.
Deep Slate
#0D1B1E
Graphite
#3D3D3D
Clear White
#F8F8F8
Soft Signal
#C9FBC6
Connected System
Brand Commerce Website connects the visual language, interaction rhythm, and evidence structure for this case study.
01 / Challenge
The Challenge
The brand needed an online presence that presents menu items and commerce structure while preserving the literary, warm, and intimate identity of the cafe.
02 / Methodology
Methodology / Experiment
- 01
Brand Narrative
Built the experience around coffee, literature, warmth, and the cafe library corner as the main identity signals.
Brand system85% - 02
Catalog Structure
Modeled products by category with API endpoints for all products, filtered products, and product detail views.
Product API80% - 03
Page Architecture
Separated homepage, products, about, and library pages so the site can function as both catalog and profile.
4 pages82%
03 / Solution
The Solution
Cafe Brand Website
The homepage uses a real cafe visual, warm copy, and focused navigation for menu, story, and library content.
MEAN Stack Catalog
The product catalog is backed by Express, MongoDB, and Angular components for filtering and product browsing.
04 / Impact
Impact & Metrics
04
Main Pages
The site covers homepage, products, about, and library content areas.
MEAN
Stack
The repo combines MongoDB, Express, Angular, and Node.js.
API
Product Endpoints
The backend exposes product list, category filter, and product detail endpoints.