BizOne-portal/stitch_bizone/admin_dashboard_system/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
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 #faf8fd #dbd9dd #faf8fd #ffffff #f5f3f7 #efedf1 #e9e7ec #e3e2e6 #1b1b1f #44474f #303033 #f2f0f4 #75777f #c5c6d0 #495e8a #00020a #ffffff #001b44 #7084b3 #b1c6f9 #00658d #ffffff #2dbcfe #004866 #080100 #ffffff #381000 #b67558 #ba1a1a #ffffff #ffdad6 #93000a #d8e2ff #b1c6f9 #001a42 #314671 #c6e7ff #82cfff #001e2d #004c6b #ffdbcd #ffb596 #360f00 #6d3920 #faf8fd #1b1b1f #e3e2e6	display-lg headline-md title-lg body-md body-sm label-md headline-md-mobile fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 36px 700 44px -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 Plus Jakarta Sans 16px 400 24px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 14px 400 20px fontFamily fontSize fontWeight lineHeight letterSpacing Plus Jakarta Sans 12px 600 16px 0.05em fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 20px 600 28px	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	unit xs sm md lg xl gutter margin-page 4px 4px 8px 16px 24px 40px 24px 32px

Brand & Style

This design system transitions the WhatsApp Business experience from a casual communication tool into a high-performance Enterprise SaaS platform. The aesthetic is Corporate Modern, prioritizing clarity, data density, and professional trust.

By replacing the traditional green with a deep navy and electric cyan palette, the UI evokes stability and technological precision. The style uses a "Quiet Interface" approach: neutral surfaces and subtle borders allow data visualizations and message content to take center stage, while the cyan accent provides high-visibility cues for primary actions and notifications.

Target Audience: Business administrators, customer success managers, and operations leads who require a focused, high-productivity environment for managing large-scale communications.

Colors

The palette is anchored by Deep Navy (#001B44), used for structural elements like sidebars and primary headings to establish authority. Cyan (#00AEEF) serves as the high-energy accent for interactivity, progress bars, and active states.

• Primary: Use Navy for the highest level of hierarchy and navigation backgrounds.
• Secondary: Use Cyan for primary buttons, selection states, and "new message" indicators.
• Surface: The background uses a cool-toned Slate gray to reduce eye strain compared to pure white.
• Functional: Standard semantic colors are adjusted for high legibility against the navy/white background, ensuring status indicators (online, pending, failed) are immediately recognizable.

Typography

This design system utilizes Plus Jakarta Sans across all levels to maintain a contemporary, approachable, yet geometric look.

• Headlines: Use Bold weights (700) with slight negative letter-spacing for a compact, "SaaS-ready" appearance in headers and dashboard widgets.
• Body Text: Standardized at 16px for readability, with 14px used for secondary metadata in message lists and audit logs.
• Labels: Uppercase labels with increased letter-spacing should be used for table headers and small category tags to differentiate them from actionable text.
• Contrast: Ensure all text on Navy backgrounds uses White or Cyan-tinted grays to maintain WCAG AA compliance.

Layout & Spacing

The design system employs a 12-column fluid grid for the main dashboard view, allowing widgets to reflow based on screen width.

• Sidebar: A fixed-width (280px) vertical navigation bar anchored to the left, utilizing the Deep Navy palette.
• Gutter System: A consistent 24px (lg) gutter is maintained between dashboard cards to create clear visual separation.
• Density: For data-heavy views (like the "All Chats" list), vertical padding is reduced to 8px (sm) to maximize information density without sacrificing touch targets.
• Mobile: On devices < 768px, the sidebar collapses into a bottom navigation bar or a hamburger menu, and page margins reduce to 16px.

Elevation & Depth

To maintain a clean SaaS aesthetic, this design system avoids heavy shadows, instead relying on Tonal Layers and Low-Contrast Outlines.

• Level 0 (Canvas): The base background layer (#F8FAFC).
• Level 1 (Cards): Dashboard widgets and chat containers use a white background with a subtle 1px border (#E2E8F0). No shadow.
• Level 2 (Dropdowns/Modals): Elements that float above the UI use a soft, ambient shadow (10% opacity Navy) and a slightly thicker border to indicate focus.
• Active State: Cyan is used as a 2px "glow" or border-left accent to denote selected items in a list or active input fields.

Shapes

The shape language is consistently Rounded, providing a friendlier contrast to the professional navy color palette.

• Standard Elements: Buttons, input fields, and dashboard cards use a 0.5rem (8px) radius.
• Large Elements: Modals and large containers use 1rem (16px) for a soft, modern feel.
• Interactive Indicators: Small badges and notification counters use a fully pill-shaped (rounded-full) geometry to stand out as distinct interactive units.

Components

• Buttons:
  • Primary: Navy background with White text for high-impact actions.
  • Accent: Cyan background with Navy text for secondary "Call to Action" items.
  • Ghost: No background, Navy border and text for utility actions.
• Chat Bubbles:
  • Incoming: Light gray (#F1F5F9) with Navy text.
  • Outgoing: Deep Navy (#001B44) with White text, using Cyan for "Read" receipts.
• Input Fields: 1px Slate border (#CBD5E1), turning Cyan on focus. Includes a 4px inner padding for a spacious feel.
• Chips & Tags: Small, low-saturation backgrounds (e.g., light cyan or light navy) with high-contrast text to categorize "New Leads," "Support," or "Billing" without cluttering the UI.
• Sidebar Nav: High-contrast Navy background with Cyan icons for the active state to ensure the navigation is the primary anchor of the layout.