MovieBox

Overview

MovieBox is a high-velocity streaming platform designed for rapid content discovery across Lollywood, Bollywood, Hollywood, and live sports. The design system embraces a "Dark-Immersive Acceleration" aesthetic: a near-black canvas (rgb(16, 17, 20)) serves as the neutral foundation, while vibrant cyan (#1cb7ff), lime-green (#2ff58b), and golden-yellow (#fbd100) accents punctuate the interface to guide user attention toward calls-to-action, premium features, and trending content. The emotional response is one of energy and immediacy—users feel they're entering a curated, high-performance entertainment hub where every tap leads to discovery. The brand voice is conversational yet authoritative: direct, fast-paced, and unapologetically entertainment-focused. Vocabulary emphasizes action and novelty ("Explore," "Discover," "Stream Now," "Trending"). Example sentence in brand voice: "Stream the latest Bollywood blockbuster in 4K—no buffering, no ads, just pure cinema."

Colors

The color system is built on a dark-first philosophy optimized for extended viewing sessions and content prominence. The surface stack anchors at #101114 (surface) and descends to #050607 (surface-container-lowest) for maximum contrast on interactive elements. Primary (#1cb7ff) is the signature cyan accent used exclusively for high-priority CTAs ("Download App," "Watch Now"), focus states, and brand moments—it commands attention without overwhelming the dark canvas. Secondary (#2ff58b) is a vibrant lime-green reserved for success states, live indicators, and premium badges (e.g., "Live Cricket"). Tertiary (#fbd100) is a warm golden-yellow deployed for featured content labels, trending badges, and secondary CTAs (e.g., "OPEN" button on hero cards). Error (#ff5140) is a coral-red used for wa

Typography

The type system uses Roboto across all scales, chosen for its clarity at small sizes and its neutral, performance-oriented character—fitting for a platform where content, not typography, is the hero. Display (56px, 700 weight, -0.03em tracking) anchors hero sections and major announcements. Headline-lg (36px, 600 weight) is reserved for section titles and modal headers. Headline-md (28px, 600 weight) breaks up content zones and introduces new categories. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 0.02em tracking) is used for descriptive text and longer-form content. Body-md (16px, 400 weight) is the default for UI labels and list items. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, badges, and form labels. Label-sm (12px, 500

Layout

The layout system uses a 12-column grid with a max-width of 1280px, scaling fluidly on mobile (html font-size: 4.44444vw) and fixed at 1rem on desktop (768px+). The gutter is consistently 24px, applied as margin-left/right on grid items to maintain rhythm. Content sections are separated by lg spacing (40px) for major breaks and md spacing (24px) for subsections. The sidebar navigation (Home, TV Show, Movie, etc.) is fixed on desktop and collapsible on mobile, using 212px width. Hero sections span full-width with a 40px top/bottom padding buffer. Card grids use a responsive column count: 2 columns on mobile, 4 on tablet, 6 on desktop. Container max-width is enforced at 1280px to prevent content from stretching excessively on ultra-wide displays. White-space is used aggressively around featu

Elevation & Depth

Depth is conveyed through a layered shadow system that respects the dark aesthetic without introducing visual noise. Level 1 (Base): no shadow; surface sits flush against the background. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); used for content cards, input fields, and default interactive surfaces. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); applied on card-hover, modals, and dropdowns to signal interactivity and lift. Level 4 (Modal/Overlay): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) plus a semi-transparent backdrop (rgba(0, 0, 0, 0.5))

Shapes

The shape philosophy is "Technical Minimalism"—rounded corners are used sparingly and purposefully to create visual softness without sacrificing clarity. Buttons and primary CTAs use lg (1rem / 16px) border-radius to signal interactivity and approachability. Secondary buttons and chips use full (9999px) border-radius for a pill-shaped aesthetic, creating a distinct visual category for secondary actions. Cards and containers use DEFAULT (0.5rem / 8px) or md (0.75rem / 12px) for subtle definition without excessive rounding. Input fields use DEFAULT (0.5rem / 8px) to align with form conventions.

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#1cb7ff) background with {colors.on-primary} text, lg radius, and 12px 24px padding for a 48px total height. On hover, the background shifts to #0fa3e0 (10% darker) with a 200ms transition. On active, it darkens further to #0088b3. Button-secondary uses rgba(255, 255, 255, 0.1) background with a 1px border at rgba(255, 255, 255, 0.2), full radius, and the same padding. On hover, the background increases to rgba(255, 255, 255, 0.15) and the border to rgba(255, 255, 255, 0.3). Both buttons use label-md typography (14px, 600 weight). Chips are smaller, pill-shaped interactive elements using rgba(28, 183, 255, 0.15) background with a 1px border at rgba(28, 183, 255, 0.3), full radius, and 8

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1cb7ff) exclusively for high-priority CTAs and focus states—it is the brand's signature accent and must never be diluted or overused.
• Do apply the shadow system consistently: Level 2 (0 4px 12px) for cards, Level 3 (0 8px 24px) for hover/elevated states, and Level 4 (0 16px 40px) for modals.
• Do maintain the dark surface stack (#101114 to #28292e) as the foundation; never introduce light backgrounds or high-contrast neutrals that break the immersive viewing experience.
• Do use Roboto at the specified weights (400 for body, 600 for labels/headings) and letter-spacing values (-0.03em to 0.02em) to maintain typographic hierarchy and readability.
• Do apply transitions with cubic-bezier(0.4, 0, 0.2, 1) over 150–200ms for all interactive state changes to ensure smooth, responsive feedback.

**Don't**

• Don't use secondary (#2ff58b) or tertiary (#fbd100) as primary CTAs—they are supporting accents for badges, success states, and featured content only.
• Don't apply shadows larger than Level 4 (0 16px 40px) or use blur filters/glassmorphism; the design prioritizes clarity and performance on lower-end devices.
• Don't introduce rounded corners larger than xl (1.5rem) on any component; excessive rounding dilutes the technical, performance-oriented aesthetic.
• Don't use system fonts or generic sans-serif fallbacks; always specify Roboto from Google Fonts to maintain brand consistency across platforms.
• Don't override the spacing scale with arbitrary pixel values; always reference {spacing.xs}, {spacing.sm}, {spacing.md}, {spacing.lg}, or {spacing.xl} to maintain rhythm and consistency.