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