Initial commit

docs/design-system.md

@@ -0,0 +1,267 @@
+# Morpheus — Design System
+
+## Design Philosophy
+
+### Feels alive, never heavy
+
+Morpheus should feel like the fastest app on your phone. Inspired by the speed of Telegram,
+the visual polish of iOS native apps, and the personality of Discord — but with its own
+distinct identity. Not corporate. Not underground. Alive.
+
+## Visual Identity
+
+### Name & Symbol
+
+- **Morpheus** — the awakener, the one who offers the choice
+- Symbol: an abstracted eye or pill shape — recognition without explanation
+- The symbol must work at 16x16 favicon size and on a billboard
+
+### Color System
+
+#### Primary Palette
+
+```plaintext
+Morpheus Violet    #7C3AED   — Primary brand color, CTAs, active states
+Electric Indigo    #4F46E5   — Secondary, links, interactive elements
+```
+
+#### Neutral Palette
+
+```plaintext
+Void               #09090B   — Darkest background (dark mode)
+Charcoal           #18181B   — Card backgrounds (dark mode)
+Slate              #27272A   — Borders, dividers (dark mode)
+Mist               #A1A1AA   — Secondary text
+Cloud              #F4F4F5   — Card backgrounds (light mode)
+Snow               #FAFAFA   — Lightest background (light mode)
+Pure               #FFFFFF   — Text on dark, cards on light
+```
+
+#### Accent Palette (Semantic)
+
+```plaintext
+Pulse Green        #10B981   — Success, online, sent
+Flame Orange       #F59E0B   — Warning, pending
+Signal Red         #EF4444   — Error, destructive actions
+Ice Blue           #06B6D4   — Info, links in context
+```
+
+#### Gradient
+
+```plaintext
+Morpheus Gradient: #7C3AED → #4F46E5 → #06B6D4
+Usage: onboarding screens, premium badges, hero moments only
+Never on body text. Never on backgrounds with text overlay.
+```
+
+### Dark Mode First
+
+- Dark mode is the default. Light mode is fully supported but secondary.
+- Rationale: target audience prefers dark. Dark mode is easier on OLED batteries.
+- Dark backgrounds use the Void/Charcoal scale, never pure #000000 for cards.
+
+## Typography
+
+### Font Stack
+
+```plaintext
+Primary:     Inter (UI text, body)
+Monospace:   JetBrains Mono (keys, codes, technical info)
+Display:     Manrope or Unbounded (headings, marketing, hero text)
+```
+
+### Type Scale
+
+```plaintext
+Display XL:  36px / 40px line-height  — Hero text only
+Display:     30px / 36px              — Page titles
+Heading 1:   24px / 32px              — Section headers
+Heading 2:   20px / 28px              — Card headers
+Body:        16px / 24px              — Default readable text
+Body Small:  14px / 20px              — Secondary info, timestamps
+Caption:     12px / 16px              — Labels, badges, metadata
+```
+
+### Weight Usage
+
+```plaintext
+Regular (400):    Body text, descriptions
+Medium (500):     UI labels, navigation, buttons
+Semibold (600):   Headings, emphasis
+Bold (700):       Display text, hero moments only
+```
+
+## Spacing & Layout
+
+### Spacing Scale (4px base)
+
+```plaintext
+xs:    4px     — Inline padding, icon gaps
+sm:    8px     — Tight grouping
+md:    12px    — Default inner padding
+lg:    16px    — Card padding, section gaps
+xl:    24px    — Between sections
+2xl:   32px    — Page-level spacing
+3xl:   48px    — Major section breaks
+```
+
+### Border Radius
+
+```plaintext
+sm:    6px     — Buttons, inputs, small cards
+md:    10px    — Cards, dialogs
+lg:    16px    — Large cards, modals
+xl:    24px    — Avatars (rounded square), feature cards
+full:  9999px  — Pills, tags, circular avatars
+```
+
+### Grid
+
+- Mobile-first. Single column default.
+- Max content width: 640px for feeds (readability).
+- Desktop: centered content column with contextual sidebars.
+- No infinite horizontal scrolling. Vertical is native.
+
+## Components
+
+### Buttons
+
+```plaintext
+Primary:     Morpheus Violet bg, white text, 6px radius, medium weight
+             Hover: slightly lighter. Active: slightly darker.
+Secondary:   Transparent bg, violet text, 1px violet border
+             Hover: violet/10 bg fill
+Ghost:       Transparent bg, mist text, no border
+             Hover: slate bg fill
+Destructive: Signal Red bg, white text (confirmation required)
+
+Size:        Default 40px height, compact 32px, large 48px
+             Min touch target: 44x44px always
+```
+
+### Cards
+
+```plaintext
+Dark mode:   Charcoal bg, 1px Slate border, md radius
+Light mode:  Pure bg, 1px Cloud border, md radius
+Elevation:   Subtle shadow on hover only (never resting shadow)
+Padding:     lg (16px)
+```
+
+### Inputs
+
+```plaintext
+Height:      44px (touch-friendly)
+Border:      1px Slate, focus → 2px Morpheus Violet
+Background:  Void (dark) / Snow (light)
+Placeholder: Mist color
+Error state: Signal Red border + helper text below
+```
+
+### Avatars
+
+```plaintext
+Sizes:       24px (inline), 32px (list), 40px (default), 64px (profile), 96px (hero)
+Shape:       Rounded square (xl radius) — distinguishes from other platforms
+Fallback:    Generated gradient from public key hash (every user gets a unique one)
+Online dot:  Pulse Green, bottom-right, 25% of avatar size
+```
+
+### Navigation
+
+```plaintext
+Mobile:      Bottom tab bar, 5 items max. Haptic feedback on tap.
+             Active tab: Morpheus Violet icon + label
+             Inactive: Mist icon, no label
+Desktop:     Left sidebar, collapsible. Icons + labels.
+Transitions: Horizontal slide between tabs, vertical within feeds
+```
+
+## Motion & Animation
+
+### Principles
+
+- **Purposeful**: every animation communicates something (state change, spatial relationship)
+- **Fast**: default duration 150-200ms. Never exceed 300ms for UI transitions.
+- **Interruptible**: user input cancels any running animation immediately
+- **No decorative animation**: no floating particles, no pulsing logos, no ambient motion
+
+### Standard Easings
+
+```plaintext
+ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1)    — Elements entering
+ease-in:     cubic-bezier(0.4, 0.0, 1, 1)       — Elements exiting
+ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1)     — Elements transforming
+spring:      spring(1, 80, 10)                    — Playful interactions (reactions, likes)
+```
+
+### Key Animations
+
+```plaintext
+Page transition:   Horizontal slide, 200ms ease-out
+Modal:             Scale from 0.95 + fade, 150ms ease-out
+Toast/snackbar:    Slide up from bottom, 200ms ease-out, auto-dismiss 3s
+Pull to refresh:   Native feel, custom indicator with Morpheus symbol
+Message send:      Slide up + slight scale, spring easing
+Reaction:          Pop + particle burst, spring easing (one of few "fun" moments)
+Skeleton loading:  Shimmer gradient, 1.5s loop (only when truly loading)
+```
+
+## Iconography
+
+### Style
+
+- Outlined style (not filled) for navigation and UI — 1.5px stroke
+- Filled style for active/selected states
+- 24x24 base size, optically adjusted per icon
+- Consistent metaphors: no mixing material/feather/custom within a view
+
+### Custom Icons Needed
+
+- Relay status indicator
+- Key/identity icon (not a literal key — too crypto-bro)
+- Encryption indicator (subtle, not a padlock — normalization, not alarm)
+- Morpheus-specific actions (e.g., "zap" for tips if using Lightning)
+
+## Tone of Voice (UI Copy)
+
+### Localization Principles
+
+- **Casual but not childish** — "Hey" not "Greetings, dear user"
+- **Direct** — "Send" not "Submit your message"
+- **Confident** — "Your messages are encrypted" not "We try to protect..."
+- **Bilingual-ready** — UI must work in Russian and English from day one
+- **No corporate speak** — "Something went wrong" not "An unexpected error occurred"
+
+### Examples
+
+```plaintext
+Empty state:     "Nobody here yet. Be the first." (not "No content available")
+Error:           "Couldn't connect. Tap to retry." (not "Network error 503")
+Onboarding:      "This key is you. Save it somewhere safe." (not "Back up your keypair")
+Destructive:     "Delete this forever?" (not "Are you sure you want to delete?")
+```
+
+## Accessibility
+
+- Minimum contrast ratio: 4.5:1 for body text, 3:1 for large text
+- All interactive elements: 44x44px minimum touch target
+- Screen reader labels for all icons and non-text elements
+- Reduce Motion support: disable all non-essential animation
+- Font scaling: support system font size preferences (up to 200%)
+- No information conveyed by color alone (always pair with icon or text)
+
+## Platform Targets
+
+### Priority Order
+
+1. **Mobile (iOS + Android)** — React Native or Flutter, native feel mandatory
+2. **Web (PWA)** — Full feature parity, installable
+3. **Desktop** — Electron or Tauri wrapper of web, or native if resources allow
+
+### Platform Adaptation
+
+- Follow platform conventions for navigation patterns (iOS back swipe, Android back button)
+- Native share sheets, notifications, haptics
+- Respect system dark/light mode by default, allow manual override
+- Adaptive layouts: phone → tablet → desktop, not just scaled up