8.6 KiB
8.6 KiB
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
Morpheus Violet #7C3AED — Primary brand color, CTAs, active states
Electric Indigo #4F46E5 — Secondary, links, interactive elements
Neutral Palette
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)
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
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
Primary: Inter (UI text, body)
Monospace: JetBrains Mono (keys, codes, technical info)
Display: Manrope or Unbounded (headings, marketing, hero text)
Type Scale
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
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)
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
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
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
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
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
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
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
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
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
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
- Mobile (iOS + Android) — React Native or Flutter, native feel mandatory
- Web (PWA) — Full feature parity, installable
- 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