Переделаны истории

his/knot_kinetic/DESIGN.md

@@ -0,0 +1,99 @@
+# Design System Specification: The Kinetic Nexus
+
+## 1. Overview & Creative North Star
+This design system is built for an era of decentralized, secure communication. It moves away from the "standard app" aesthetic toward a philosophy we call **"The Digital Curator."** 
+
+The Creative North Star focuses on **Kinetic Sophistication**. We reject the static, boxy nature of traditional messaging apps in favor of an environment that feels alive and interconnected. By leveraging the concept of "Knots"—points where data, security, and human connection meet—we use intentional asymmetry, overlapping layers, and high-contrast editorial typography to create a high-end, bespoke experience. The interface should feel like a premium tool for modern digital sovereignty: fast, lightweight, and mathematically precise.
+
+---
+
+## 2. Colors & Surface Philosophy
+
+### Color Tokens
+Our palette is rooted in absolute depth and electric precision.
+
+*   **Dark Mode (Primary):** `surface-container-lowest` (#0E0E0E) as the foundation.
+*   **Light Mode:** `surface-bright` (#FFFFFF) and `surface-container` (#F5F5F7).
+*   **Accent:** `primary` (#ADC6FF) and `primary-container` (#4B8EFF).
+*   **Text:** High contrast `on-surface` (#E5E2E1) for readability, with `on-surface-variant` (#C1C6D7) for secondary metadata.
+
+### The "No-Line" Rule
+To achieve a premium editorial feel, **1px solid borders are strictly prohibited** for sectioning or containment. Boundaries must be defined through:
+1.  **Background Shifts:** Placing a `surface-container-low` panel atop a `surface` background.
+2.  **Tonal Transitions:** Using depth to separate the message list from the conversation view.
+
+### Surface Hierarchy & Nesting
+Treat the UI as a series of nested physical layers. Use the `surface-container` tiers to indicate importance:
+*   **Level 0 (Base):** `surface` (#131313) - The "desk" everything sits on.
+*   **Level 1 (Sections):** `surface-container-low` (#1C1B1B) - Large sidebars or navigation areas.
+*   **Level 2 (Active Elements):** `surface-container-high` (#2A2A2A) - Active chat bubbles or focused cards.
+
+### Signature Textures
+Avoid flat blocks of color. For Primary CTAs and Hero moments, use a **Linear Gradient** transition from `primary` (#ADC6FF) to `primary-container` (#4B8EFF) at a 135-degree angle. This provides "visual soul" and a sense of movement.
+
+---
+
+## 3. Typography
+We utilize **Inter** for its technical precision and flawless Cyrillic support.
+
+*   **Display (lg/md/sm):** Used for onboarding and empty states. Tighten letter-spacing to `-0.02em` for an authoritative, editorial look.
+*   **Headline (lg/md/sm):** Used for top-level navigation headers. These should feel intentional and spacious.
+*   **Title (lg/md):** Used for contact names and group titles. Bold weight.
+*   **Body (lg/md/sm):** The workhorse for messages. `body-lg` (1rem) is the default for chat bubbles to ensure premium legibility.
+*   **Label (md/sm):** Reserved for timestamps and micro-copy. Use `label-md` with `on-surface-variant`.
+
+**Hierarchy Note:** To move beyond generic UI, contrast the font weights aggressively. Pair a `display-sm` bold header with a `body-sm` light subhead to create a sophisticated "magazine" layout within the app settings.
+
+---
+
+## 4. Elevation & Depth
+
+### The Layering Principle
+Depth is achieved through **Tonal Stacking**. For example, a chat bubble (`surface-container-highest`) sitting on a message thread (`surface-container-low`) creates a natural, soft lift.
+
+### Ambient Shadows
+Shadows are only permitted for floating elements (e.g., Modals, Context Menus).
+*   **Spec:** `0px 20px 40px rgba(0, 0, 0, 0.4)`
+*   Shadows must be extra-diffused. The shadow color should be a tinted version of `surface-container-lowest` to ensure it feels like a natural lighting occlusion rather than a "drop shadow."
+
+### Glassmorphism & Ghost Borders
+For floating UI (like a bottom-pinned navigation bar), use **Backdrop Blur (20px)** combined with a 60% opacity `surface-variant`. 
+*   **Ghost Border Fallback:** If a container requires definition against a similar tone, use the `outline-variant` token at **15% opacity**. Never 100%.
+
+---
+
+## 5. Components
+
+### Avatars & Media Containers
+Reflecting the 'Knot' name, we move away from circles.
+*   **Spec:** Square with a **20px border radius** (`xl` / 1.5rem). This creates a distinct, modern silhouette that aligns with the square-ish nature of modern technical interfaces.
+
+### Buttons
+*   **Primary:** Gradient fill (Primary to Primary-Container), white text, `xl` rounding.
+*   **Secondary:** `surface-container-highest` fill, `primary` text. No border.
+*   **States:** On hover, increase the brightness of the gradient by 10%. On press, scale the component down to `0.98`.
+
+### Input Fields
+*   **Visual Style:** Ghost-style inputs. No background fill, only a bottom `outline-variant` (20% opacity). Upon focus, the bottom border transitions to a `primary` glow with a subtle backdrop shift to `surface-container-low`.
+
+### Chat Bubbles & Lists
+*   **NO DIVIDERS.** Use the Spacing Scale (`6` / 1.5rem) to separate message groups.
+*   **Asymmetry:** User messages should have a slightly different corner radius on the "anchor" side to feel like they are "plugged into" the side of the screen.
+
+### Interconnected Line Motifs
+Subtle 2px lines (using `outline-variant`) can be used to visually connect threads or "knots" of data in the background, reinforcing the brand identity of a federated network.
+
+---
+
+## 6. Do's and Don'ts
+
+### Do
+*   **DO** use whitespace as a functional element. Give text room to breathe (Spacing `8` or `10`).
+*   **DO** use "Kinetic" transitions. Elements should slide and fade into place using a `cubic-bezier(0.16, 1, 0.3, 1)` easing profile.
+*   **DO** prioritize the Cyrillic rendering of Inter, ensuring line-heights are generous enough to avoid "cramping" tall characters.
+
+### Don't
+*   **DON'T** use pure #000000 for backgrounds; it kills the perception of depth. Stick to the `surface-container-lowest` (#0E0E0E).
+*   **DON'T** use 1px solid dividers to separate list items. Use tonal shifts or vertical space.
+*   **DON'T** use round avatars. The 20px radius square is our signature signature element.
+*   **DON'T** default to high-opacity borders. They create "visual noise" and make the system feel like a generic template.