# Design System Specification: ZappCare

## 1. Overview & Creative North Star
The Creative North Star for this design system is **"The Architectural Inbox."** 

To move beyond the generic "SaaS dashboard" aesthetic, we treat the ZappCare interface as a physical environment built from light and air. Instead of relying on rigid, high-contrast grids and borders that clutter the user's focus, we utilize **Tonal Architecture**. By using subtle shifts in background values and intentional white space, we create a layout that feels fluid and premium. The goal is to transform a high-volume communication tool into a calm, editorial experience where messages are the hero, and the interface is an elegant, supportive scaffolding.

---

## 2. Colors & Surface Logic
The palette is rooted in the "ZappCare Blue," expanded into a sophisticated range of Material Design tokens that prioritize depth over decoration.

### The "No-Line" Rule
**Explicit Instruction:** Designers are prohibited from using 1px solid borders to section off major UI areas. Boundaries must be defined strictly through:
1.  **Background Color Shifts:** Placing a `surface-container-low` component on a `surface` background.
2.  **Tonal Transitions:** Using whitespace and subtle shifts in luminosity to indicate where one functional area ends and another begins.

### Surface Hierarchy & Nesting
Treat the UI as a series of nested, architectural layers. 
*   **Base:** `surface` (#f7f9fc) — the foundation.
*   **Structural Sections:** `surface-container-low` (#f2f4f6) — used for navigation sidebars or inactive message lists.
*   **Active Elements:** `surface-container-lowest` (#ffffff) — used for the active chat bubble or primary focus area to provide maximum "lift."
*   **Overlays:** `surface-container-highest` (#e0e3e5) — used for temporary modals or popovers.

### The "Glass & Gradient" Rule
To inject "soul" into the digital product, floating elements (like message action bars or active tooltips) should employ **Glassmorphism**:
*   **Effect:** Semi-transparent `surface` colors (approx. 85% opacity) with a `20px` backdrop-blur.
*   **Signature Textures:** For primary CTAs and the main "New Chat" button, use a subtle linear gradient (Top-Left to Bottom-Right) transitioning from `primary` (#0c6780) to `primary_container` (#87ceeb). This prevents the "flat-box" feel and adds a custom, high-end finish.

---

## 3. Typography
The typography strategy pairs the authoritative, geometric presence of **Manrope** with the high-legibility utilitarianism of **Inter**.

*   **Display & Headlines (Manrope):** These are used for "Editorial Moments"—the welcome screen, empty states, and high-level dashboard metrics. The high x-height and rounded geometry of Manrope reflect the ZappCare logo's friendliness while maintaining an architectural structure.
*   **Title & Body (Inter):** Inter is the workhorse of the inbox. It is used for message content and metadata. Its neutral tone ensures that complex business conversations remain highly readable at any scale.
*   **Functional Hierarchy:** Large typographic scales (e.g., `display-lg` at 3.5rem) should be used with significant leading and generous negative space to create a "magazine" feel, even in a data-rich environment.

---

## 4. Elevation & Depth
In this design system, depth is a function of light, not lines.

### The Layering Principle
Achieve hierarchy by stacking surface-container tiers. For instance, a chat card using `surface-container-lowest` placed on a background of `surface-container-low` creates a soft, natural lift that communicates importance without visual noise.

### Ambient Shadows
When an element must "float" (e.g., a dropdown or a notification toast):
*   **Shadow:** Extra-diffused. `Blur: 24px`, `Spread: -4px`.
*   **Opacity:** 4% to 8%.
*   **Color Tint:** Instead of #000000, use a tinted shadow derived from `on_surface` (#191c1e) to ensure the shadow feels like a natural part of the ZappCare environment.

### The "Ghost Border" Fallback
If a border is required for accessibility (e.g., in high-glare environments):
*   Use `outline_variant` (#bfc8cd) at **15% opacity**.
*   **Never** use 100% opaque, high-contrast borders.

---

## 5. Components

### Buttons: The "Fluid Motion" Set
*   **Primary:** A gradient-fill button with `xl` (0.75rem) rounded corners. Padding should be generous (16px top/bottom, 32px left/right) to feel substantial.
*   **Secondary:** No fill. A "Ghost Border" (15% opacity `outline_variant`) that becomes a subtle `secondary_container` fill on hover.
*   **Interaction:** All buttons should have a 200ms ease-in-out transition on hover, subtly increasing the elevation or deepening the gradient.

### Input Fields: The "Architectural Frame"
*   **Styling:** Inputs use `surface_container_highest` with a bottom-only 2px "indicator" line using `primary` color only when focused.
*   **Labeling:** Floating labels using `label-md` (Inter) that transition to the header area on focus to maximize vertical space.

### Cards & Lists: The "Separator-Free" Inbox
*   **Forbid dividers.** To separate messages in the inbox list, use `md` (0.375rem) vertical white space and a 2% shift in background color for the hovered state.
*   **Active Chat:** The selected chat item should not have a border; it should transition to `primary_container` (#87ceeb) with a high-contrast `on_primary_container` (#005870) text to signal absolute focus.

### Additional Signature Component: The "Contextual Glass Rail"
For the WhatsApp context, use a vertical navigation rail on the far left. This rail should be semi-transparent with a backdrop-blur, allowing the underlying background colors of the inbox to subtly peak through, creating a sense of "layered transparency."

---

## 6. Do's and Don'ts

### Do
*   **DO** use whitespace as a functional tool. If elements feel crowded, increase the margin rather than adding a line.
*   **DO** use the `xl` (0.75rem) corner radius for main containers to echo the "bubble" nature of the logo.
*   **DO** prioritize "Tonal Layering"—use the different `surface_container` values to create a logical path for the eye.

### Don't
*   **DON'T** use pure black (#000000) for text. Use `on_surface` (#191c1e) to keep the contrast high but the "vibe" soft.
*   **DON'T** use standard 1px solid dividers. They interrupt the architectural flow.
*   **DON'T** use harsh, small-radius shadows. They make the UI look dated and "heavy."