Initial BizOne portal setup
This commit is contained in:
163
stitch_bizone/whatsapp_business_admin_dashboard_system/DESIGN.md
Normal file
163
stitch_bizone/whatsapp_business_admin_dashboard_system/DESIGN.md
Normal file
@ -0,0 +1,163 @@
|
||||
---
|
||||
name: WhatsApp Business Admin Dashboard System
|
||||
colors:
|
||||
surface: '#f3fcef'
|
||||
surface-dim: '#d3ddd0'
|
||||
surface-bright: '#f3fcef'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#edf6e9'
|
||||
surface-container: '#e7f1e4'
|
||||
surface-container-high: '#e2ebde'
|
||||
surface-container-highest: '#dce5d8'
|
||||
on-surface: '#151e16'
|
||||
on-surface-variant: '#3c4a3d'
|
||||
inverse-surface: '#2a332a'
|
||||
inverse-on-surface: '#eaf3e6'
|
||||
outline: '#6c7b6b'
|
||||
outline-variant: '#bbcbb9'
|
||||
surface-tint: '#006d2f'
|
||||
primary: '#006d2f'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#25d366'
|
||||
on-primary-container: '#005523'
|
||||
inverse-primary: '#3de273'
|
||||
secondary: '#006b5f'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#8cf1e1'
|
||||
on-secondary-container: '#006f64'
|
||||
tertiary: '#93492e'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#ffa07e'
|
||||
on-tertiary-container: '#78351b'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#66ff8e'
|
||||
primary-fixed-dim: '#3de273'
|
||||
on-primary-fixed: '#002109'
|
||||
on-primary-fixed-variant: '#005322'
|
||||
secondary-fixed: '#8ff4e3'
|
||||
secondary-fixed-dim: '#72d8c8'
|
||||
on-secondary-fixed: '#00201c'
|
||||
on-secondary-fixed-variant: '#005047'
|
||||
tertiary-fixed: '#ffdbcf'
|
||||
tertiary-fixed-dim: '#ffb59b'
|
||||
on-tertiary-fixed: '#380d00'
|
||||
on-tertiary-fixed-variant: '#763319'
|
||||
background: '#f3fcef'
|
||||
on-background: '#151e16'
|
||||
surface-variant: '#dce5d8'
|
||||
background-main: '#F8F9FA'
|
||||
surface-card: '#FFFFFF'
|
||||
text-primary: '#1A1C1E'
|
||||
text-secondary: '#64748B'
|
||||
border-subtle: '#E2E8F0'
|
||||
status-success: '#25D366'
|
||||
status-warning: '#F59E0B'
|
||||
status-error: '#EF4444'
|
||||
status-info: '#3B82F6'
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 32px
|
||||
fontWeight: '700'
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.02em
|
||||
headline-md:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 24px
|
||||
fontWeight: '600'
|
||||
lineHeight: 32px
|
||||
letterSpacing: -0.01em
|
||||
title-sm:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 18px
|
||||
fontWeight: '600'
|
||||
lineHeight: 24px
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
label-caps:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '600'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.05em
|
||||
mono-code:
|
||||
fontFamily: jetbrainsMono
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
base: 8px
|
||||
container-margin: 32px
|
||||
gutter: 24px
|
||||
card-padding: 20px
|
||||
toolbar-height: 64px
|
||||
sidebar-width: 260px
|
||||
---
|
||||
|
||||
# Figma Design Brief
|
||||
|
||||
Design a modern enterprise SaaS admin dashboard for a WhatsApp Business management platform.
|
||||
|
||||
## Style Direction
|
||||
- Clean, premium, modern
|
||||
- WhatsApp-inspired green accent
|
||||
- White cards
|
||||
- Light gray background
|
||||
- Rounded corners
|
||||
- Soft shadows
|
||||
- Typography: Inter or Plus Jakarta Sans
|
||||
|
||||
## Required Pages
|
||||
1. Login
|
||||
2. Dashboard Overview
|
||||
3. Contacts List
|
||||
4. Contact Detail
|
||||
5. Conversations Inbox
|
||||
6. Messages List
|
||||
7. Draft Messages
|
||||
8. Draft Editor
|
||||
9. Campaign List
|
||||
10. Campaign Detail
|
||||
11. Template List
|
||||
12. Template Builder
|
||||
13. Settings Overview
|
||||
14. WhatsApp API Settings
|
||||
15. Webhook Settings
|
||||
16. Webhook Logs
|
||||
17. Users Management
|
||||
18. Roles and Permissions
|
||||
19. Activity Logs
|
||||
20. Queue Monitor
|
||||
|
||||
## Required Components
|
||||
- Left sidebar navigation
|
||||
- Top header
|
||||
- KPI cards
|
||||
- Charts
|
||||
- Data tables
|
||||
- Status badges
|
||||
- Filters
|
||||
- Mobile message preview
|
||||
- Webhook payload viewer drawer
|
||||
- Queue monitor widgets
|
||||
|
||||
## Tone
|
||||
Professional, scalable, operational, suitable for internal business teams.
|
||||
Reference in New Issue
Block a user