whatsapp-inbox-platform/screen_design/aero_logic/DESIGN.md

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