5.7 KiB
5.7 KiB
# Design System Strategy: The Interconnected Thread
## 1. Overview & Creative North Star: "Kinetic Connection"
This design system moves away from the static, boxy nature of traditional messengers. Our North Star is **Kinetic Connection**—a philosophy where the UI is not a collection of separate screens, but a single, fluid thread that loops and weaves as the user navigates.
Inspired by the concept of a "Knot," the interface favors **organic flow over rigid containment**. We break the "template" look by using intentional asymmetry in message grouping, generous breathing room (white space) that suggests a premium editorial layout, and high-contrast typography scales that make the Cyrillic alphabet look authoritative and modern.
---
## 2. Colors & The "No-Line" Rule
The palette is rooted in deep obsidian tones and technical blues, designed to recede and let the conversation take center stage.
### The "No-Line" Rule
**Explicit Instruction:** You are prohibited from using 1px solid borders (`#outline`) to define sections. Traditional dividers are a sign of lazy design. Boundaries must be defined through:
1. **Background Shifts:** Place a `surface-container-low` list item against a `surface` background.
2. **Tonal Transitions:** Use `surface-container-lowest` for the main chat thread and `surface-container` for the side navigation to create natural separation.
### Surface Hierarchy & Nesting
Treat the UI as a series of stacked sheets of fine, semi-translucent paper.
* **Base Layer:** `surface` (#131313) - The absolute floor.
* **Active Interaction Layer:** `surface-container` (#201F1F) - The main workspace.
* **Floating Elements:** Use `surface-bright` with a 60% opacity and a 20px backdrop-blur to create a "Glassmorphism" effect for headers and context menus.
### Signature Textures
Main Action Buttons (CTAs) should never be a flat hex code. Apply a subtle linear gradient from `primary` (#9ACBFF) to `primary_container` (#3096E5) at a 135-degree angle. This adds "soul" and a tactile, liquid quality to the "Knot" identity.
---
## 3. Typography: The Editorial Voice
We use **Inter** as our foundational typeface. For the Russian language interface, Inter’s tall x-height and neutral terminals provide the clarity needed for long-form messaging.
* **Display (The Brand Moment):** `display-lg` (3.5rem). Use this for empty states or welcome screens. It should feel like a magazine cover.
* **Headlines (Navigation):** `headline-sm` (1.5rem). Used for "Чаты" (Chats) or "Настройки" (Settings). Bold, confident, and high-contrast.
* **Body (The Conversation):** `body-lg` (1.0rem). The primary reading size. We use a generous line-height (1.6) to prevent Cyrillic characters from feeling cluttered.
* **Labels (The Metadata):** `label-sm` (0.68rem). Used for timestamps and "Seen" indicators. These should be rendered in `on-surface-variant` to recede visually.
---
## 4. Elevation & Depth: Tonal Layering
We abandon traditional drop shadows in favor of **Ambient Depth**.
* **The Layering Principle:** To lift a chat bubble, do not add a shadow. Instead, place a `primary_container` bubble on a `surface_container_low` background. The color contrast provides the elevation.
* **Ghost Borders:** If an element (like a search bar) disappears into the background, use a "Ghost Border": the `outline-variant` token at **15% opacity**. Never 100%.
* **Ambient Shadows:** For floating modals (e.g., User Profile), use a massive blur (40px) with the color `on_primary_fixed` at 5% opacity. It should feel like a soft glow rather than a shadow.
---
## 5. Components
### Chat Bubbles (The Core Component)
* **Style:** No sharp corners. Use `xl` (1.5rem) for the outer corners and `sm` (0.25rem) for the "tail" corner to create a "blob" or "knot" feel.
* **Outgoing:** `primary_container` text with `on_primary_container`.
* **Incoming:** `secondary_container` text with `on_secondary_container`.
* **Spacing:** Use `spacing-2` between messages in a cluster; `spacing-4` between different users.
### Input Fields
* **Structure:** A "borderless" pill shape using `surface_container_highest`.
* **Interaction:** Upon focus, the background shifts to `surface_bright` and the `primary` accent color glows subtly at the cursor point.
### Lists & Navigation
* **No Dividers:** Separate chat threads using `spacing-3.5` vertical padding. The user's eye will follow the alignment of the Avatars (the "Knot" anchors) rather than a line.
* **Avatars:** Always circular (`full` roundedness) with a 2px `outline-variant` at 10% opacity to ensure they pop against dark backgrounds.
### Action Chips
* **Style:** For reactions or filters, use `tertiary_container` for a vibrant, interactive "pop" that breaks the monochromatic gray scale.
---
## 6. Do's and Don'ts
### Do:
* **Embrace Asymmetry:** Align timestamps to the far right and message text to the left to create a dynamic, zig-zag visual path.
* **Use Micro-interactions:** When a user scrolls, the "Knot" logo should subtly rotate or tighten, reinforcing the brand identity.
* **Prioritize Russian Typography:** Ensure "ё" and "й" have enough leading (vertical space) so diacritics don't touch the line above.
### Don't:
* **Don't use pure black (#000):** It kills the depth. Always use the `surface` tokens.
* **Don't use 1px dividers:** If you feel the need for a line, use a background color change instead.
* **Don't use standard easing:** Use "Cubic Bezier (0.4, 0, 0.2, 1)" for all transitions. It should feel like the UI is "sliding on ice," not snapping into place.
### Accessibility Note:
While we favor minimalism, ensure that text in `on-surface-variant` still meets a 4.5:1 contrast ratio against `surface-container` for readability. Minimalist does not mean invisible.```