Complete Design System & UI Kit for enodastore
enodastore empowers independent merchants across India (fashion, grocery, jewellery, bakeries) to launch digital storefronts seamlessly with zero checkout friction via direct WhatsApp ordering.
1. Brand Identity & Color Palette
Strict 5-hue palette; all secondary surfaces derived from Navy opacity. No gradients.
Derived Opacity Neutrals (Ink Navy Scale)
Tamil: எங்களோட ஸ்டோர் • Shopping bag + Chat bubble mark
High-contrast inverted mark for Merchant Portal
2. Typography Scale (Inter & Noto Sans Tamil)
Tight tracking for English, generous line heights (+20%) for Tamil diacritics. Never smaller than 14px in live UI.
| Level | Specs | Inter (English) | Noto Sans Tamil (தமிழ்) |
|---|---|---|---|
| Display | 36px / Bold / -0.02em | ₹48,250.00 | ₹48,250.00 |
| H1 Heading | 28px / Bold / -0.015em | Manage Your Products | உங்கள் தயாரிப்புகள் |
| H2 Subheading | 22px / SemiBold | Active WhatsApp Orders | செயலில் உள்ள ஆர்டர்கள் |
| H3 Section | 18px / SemiBold | Store Profile & Location | கடை விவரம் & இருப்பிடம் |
| H4 Card Title | 16px / SemiBold | Kanchipuram Silk Saree | காஞ்சிபுரம் பட்டுப் புடவை |
| Body Regular | 15px / Regular / 1.5 lh | Customer will send the order directly to your WhatsApp number. | வாடிக்கையாளர் நேரடியாக உங்கள் வாட்ஸ்அப்பிற்கு ஆர்டர் அனுப்புவார். |
| Caption / Meta | 14px (Min threshold) / Med | Free Delivery • 20 mins ago | இலவச டெலிவரி • 20 நிமிடங்களுக்கு முன் |
4. Form Inputs & Controls
High clarity, +91 phone numbers for WhatsApp integration, OTP verification, Tamil dual-labels.
Your store will be visible at enodastore.com/lakshmisilks
Verified for instant WhatsApp catalog ordering
Drop images here or browse
PNG, JPG up to 5MB (Square 1:1 recommended)
5. Badges & Status Chips
Visual indicators for orders, offers, and product statuses with strict color tokens.
6. Specialized Cards
White cards on cream canvas; 12px corners, 1px hairline borders, soft elevation.
Pure Madurai Cotton Saree
மதுரை சுங்குடி காட்டன் புடவை
Kirana QuickStore
Activeமளிகை கடை தீம்
வரம்பற்ற வாட்ஸ்அப் ஆர்டர்கள்
- Unlimited WhatsApp Orders
- Custom Domain Link
- Zero Commission on sales
8. Responsive Data Presentation: Table (Desktop) vs Stacked Cards (Mobile)
Side-by-side demonstration of identical order data adapted for 1440px Desktop vs 375px Mobile.
| Order ID | Customer & Phone | Items & Details | Amount | Status | Action |
|---|---|---|---|---|---|
| #WA-4011 |
Meenakshi Sundaram
+91 98410 44521
|
Silk Pavadai Set (Size 26)
பட்டு பாவாடை சட்டை
|
₹1,850 | Confirmed | |
| #WA-4012 |
Ramesh Kumar
+91 97890 11234
|
Chettinad Masala Pack (500g)
செட்டிநாடு மசாலா பொடி
|
₹320 | Packed | |
| #WA-4013 |
Kavitha Rajan
+91 94441 55678
|
Kovil Patti Peanut Chikki (1kg)
கோவில்பட்டி கடலை மிட்டாய்
|
₹460 | New |
9. Overlays, Feedback & System States
Modals, side drawer, real-time toasts, product limit counters, and skeletons.
Pause Store Orders?
ஆர்டர்களை இடைநிறுத்தவா?
Customers will see a "Temporarily Closed" message on your WhatsApp storefront.
No orders in this category yet
இன்னும் ஆர்டர்கள் எதுவும் வரவில்லை
Share your store link with customers on your WhatsApp status and groups.
10. Minimal Line Icon Set
1.75px uniform stroke width, 24x24 viewBox, pixel-aligned minimal vector icons.
11. Responsive Architecture & Breakpoints
Specifications strictly adherence to 375px Mobile, 768px Tablet, and 1440px Desktop environments.
Mobile (375px)
375px- Single column layout with 16px side gutters
- Fixed 60px bottom app navigation bar
- Full-width 48px/52px touch-friendly CTAs
- Stacked card view replacing data tables
Tablet (768px)
768px- 2-column product & order grid flows
- Collapsible mini icon sidebar navigation
- Side drawer modals for instant cart review
- 24px container padding
Desktop (1440px)
1440px- Fixed 240px Ink Navy backoffice sidebar
- 1200px max content width on 12-column grid
- Comprehensive tabular data with bulk actions
- Multi-panel split preview for themes & orders