# 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."