90 lines
6.3 KiB
Markdown
90 lines
6.3 KiB
Markdown
# 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." |