forkmessager/his/knot_kinetic/DESIGN.md

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.