Mobo Movies

Overview

Mobo Movies is a Persian-language streaming platform that delivers cinematic entertainment through a dark, immersive interface. The design philosophy embraces "Neon Minimalism"—a fusion of deep navy surfaces with vibrant accent colors (violet #8b5cf6, orange #f18a00, cyan #60a5fa) that evoke the energy of cinema while maintaining visual clarity. The aesthetic is premium yet accessible, using glassmorphic overlays (backdrop-filter: blur(20px), background: rgba(255, 255, 255, 0.04)) and layered shadows (0 32px 110px rgba(0, 0, 0, 0.56)) to create depth without clutter. The interface prioritizes content discovery and playback, with CTAs and metadata presented as floating, interactive elements against rich imagery.

The brand voice is direct, informative, and culturally resonant. Copy is concise and action-oriented, avoiding flowery language in favor of clear metadata (runtime, release year, language, IMDb rating). The tone balances entertainment enthusiasm with technical precision—users trust Mobo Movies to deliver accurate information about what to watch. Example sentence in brand voice: "سریال Kleo: یک قاتل جاسوس سابق برای انتقام برمی‌خیزد" (Kleo: A former spy assassin rises for revenge).

Colors

The color system is built on a dark, cinematic foundation with strategic accent deployment. The surface stack anchors the interface: surface (#0f172a) serves as the primary background, surface-dim (#080d16) for recessed areas, and surface-container (#141d33) for elevated cards. The on-surface palette (white #ffffff for primary text, #cbd5e1 for secondary) ensures legibility across all depths. Primary (#8b5cf6, violet) is the signature accent—used exclusively on CTAs ("دانلود", "پخش"), interactive states, and brand highlights. Secondary (#f18a00, orange) supports metadata badges and accent elements like IMDb ratings. Tertiary (#60a5fa, cyan) highlights supplementary information and interactive accents. Error (#ef4444, red) is reserved for warnings and destructive actions. The surface-varian

Typography

The type system reflects Persian language requirements and cinematic hierarchy. Display (Peyda, 60px, weight 900, line-height 68px, letter-spacing -0.04em) anchors hero titles like "سریال Kleo". Headline-lg (40px, weight 700) and headline-md (28px, weight 700) structure section headers and card titles, using Peyda for emphasis. Body text (IRANSans, 16px, weight 400, line-height 24px, letter-spacing 0.02em) ensures readability for descriptions and metadata. Label-md (14px, weight 600, letter-spacing 0.01em) is applied to buttons, badges, and interactive labels. The Peyda/IRANSans pairing respects Persian typography conventions while maintaining visual hierarchy. All small labels (≤12px) receive text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) when rendered over imagery to ensure legibility. Font

Layout

The layout employs a 12-column grid with a 1280px max-width container, maintaining a 24px gutter between columns. The hero section spans full-width with a background image overlay (gradient from #000000d1 to #000000ad) and content positioned in the lower-left quadrant, leaving breathing room for poster imagery on the right. Section spacing uses the lg token (40px) for major breaks between content blocks (hero, metadata, recommendations). Card grids use md spacing (24px) between items. The RTL (right-to-left) layout is native to the HTML (dir="rtl"), with all flex and grid directions automatically reversed. Horizontal scrolling carousels use sm spacing (12px) between cards. The search bar and navigation occupy a fixed header with 12px padding (xs token) and a 64px height, maintaining access

Elevation & Depth

Depth is conveyed through a layered shadow system and glassmorphic surfaces rather than traditional z-index stacking. Level 1 (Base): The background is a rich, dark gradient (from #0f172a to #080d16) with subtle grain texture, establishing the foundation. Level 2 (Standard Cards): Cards use backdrop-filter: blur(20px), background: rgba(255, 255, 255, 0.04), and a 1px border at rgba(255, 255, 255, 0.08), with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modals): Elevated surfaces apply backdrop-filter: blur(40px), background: rgba(255, 255, 255, 0.08), and box-shadow: 0 16px 40p

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used strategically to soften the interface while maintaining clarity. Buttons and chips use full radius (9999px) to create pill-shaped affordances that feel modern and inviting. Cards and input fields use lg radius (1rem / 16px) for a balanced, approachable look. Smaller interactive elements (list items, badges) use md radius (0.75rem / 12px) to maintain visual consistency without excessive rounding. The hero poster card uses xl radius (1.5rem / 24px) to emphasize its premium status. All radius values are applied consistent

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#8b5cf6) with full radius (9999px), 12px horizontal padding, and 44px height. On hover, the background transitions to {colors.primary-container} (#6d28d9) over 200ms. Button-secondary uses a transparent background with a 1px border at rgba(255, 255, 255, 0.12) and rgba(255, 255, 255, 0.08) background; on hover, the background increases to rgba(255, 255, 255, 0.12). All buttons apply {typography.label-md} (14px, weight 600) and include a 3px box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for depth. Tertiary buttons (ghost style) use transparent backgrounds with {colors.tertiary} text (#60a5fa); on hover, they receive a rgba(96, 165, 250, 0.1) background.

Containers & Surfaces Card-standa

Do's and Don'ts

**Do**

• Do use {colors.primary} (#8b5cf6) exclusively for primary CTAs and interactive focus states—never use it for passive elements or backgrounds.
• Do apply backdrop-filter: blur(20px) and rgba(255, 255, 255, 0.04) backgrounds to all elevated surfaces to maintain the glassmorphic aesthetic.
• Do pair Peyda (display/headlines) with IRANSans (body/labels) to respect Persian typography conventions and ensure cross-platform rendering.
• Do use the full elevation stack (0 32px 110px rgba(0, 0, 0, 0.56) + inset highlights) only on hero/premium elements; use {elevation.md} for standard cards.
• Do maintain a 24px gutter between grid columns and 40px spacing between major sections to create visual breathing room.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.

**Don't**

• Don't use near-black or near-white as primary colors—the violet (#8b5cf6) and orange (#f18a00) accents are brand-distinctive and must remain exclusive to CTAs.
• Don't apply shadows to glassmorphic cards; rely on backdrop-filter blur and rgba borders for depth instead.
• Don't mix Peyda and IRANSans arbitrarily—use Peyda only for display/headline sizes (≥28px) and IRANSans for body/label text.
• Don't exceed 40px of padding on cards or containers; the design favors compact, content-focused layouts.
• Don't use opacity-based text on imagery without a text-shadow (0 2px 4px rgba(0, 0, 0, 0.15)) to ensure legibility.
• Don't animate background colors or shadows on hover; use opacity and transform (scale, translateY) for performance and accessibility.