BizOne-portal/stitch_bizone/whatsapp_business_admin_dashboard_system/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
WhatsApp Business Admin Dashboard System	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant background-main surface-card text-primary text-secondary border-subtle status-success status-warning status-error status-info #f3fcef #d3ddd0 #f3fcef #ffffff #edf6e9 #e7f1e4 #e2ebde #dce5d8 #151e16 #3c4a3d #2a332a #eaf3e6 #6c7b6b #bbcbb9 #006d2f #006d2f #ffffff #25d366 #005523 #3de273 #006b5f #ffffff #8cf1e1 #006f64 #93492e #ffffff #ffa07e #78351b #ba1a1a #ffffff #ffdad6 #93000a #66ff8e #3de273 #002109 #005322 #8ff4e3 #72d8c8 #00201c #005047 #ffdbcf #ffb59b #380d00 #763319 #f3fcef #151e16 #dce5d8 #F8F9FA #FFFFFF #1A1C1E #64748B #E2E8F0 #25D366 #F59E0B #EF4444 #3B82F6	display-lg headline-md title-sm body-md body-sm label-caps mono-code fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 32px 700 40px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 24px 600 32px -0.01em fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 18px 600 24px fontFamily fontSize fontWeight lineHeight Inter 16px 400 24px fontFamily fontSize fontWeight lineHeight Inter 14px 400 20px fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 600 16px 0.05em fontFamily fontSize fontWeight lineHeight jetbrainsMono 13px 400 20px	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	base container-margin gutter card-padding toolbar-height sidebar-width 8px 32px 24px 20px 64px 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.