# 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