CineHD

Overview

CineHD is a unified streaming discovery platform that transforms the fragmented experience of searching across multiple streaming services into a single, visually immersive interface. The brand serves cinephiles and casual viewers alike—users who want to discover what to watch without the friction of platform-hopping. The aesthetic is "Cinematic Minimalism": hero imagery dominates the visual hierarchy, with bold red accents punctuating a dark, near-black canvas (rgb(9, 9, 11)) that evokes a theater lobby. The emotional response is one of curated discovery—the interface feels like a personal concierge, not a search engine. Every interaction reveals more, never overwhelms.

The voice is direct, knowledgeable, and conversational. CineHD speaks in the language of film: "Now Playing," "Trending," "Providers." Vocabulary avoids corporate jargon (no "leverage" or "synergy"); instead, it uses precise metadata (ratings, release years, runtime) and streaming-native terminology ("Watch on Netflix"). The brand personality is confident but not arrogant—it knows cinema, but doesn't gatekeep. Example sentence in brand voice: "The Odyssey is trending on 3 platforms—start watching now."

Colors

CineHD's color system is built on a dark-first philosophy with a single, dominant accent. The primary color is a vivid red (#ef4444, rgb(239, 68, 68)), used exclusively for call-to-action buttons, progress indicators, and interactive focus states. This red is the brand's signature—it appears on the "Play" button, the loading bar, and hover states, creating a visual thread through the entire experience. The surface stack is anchored in near-black (#090909 for surface, #050505 for surface-dim), with carefully calibrated grays for container elevation: surface-container-low (#111113) for subtle depth, surface-container-high (#242427) for prominent cards. On-surface text is near-white (#fafafa) for maximum contrast and readability over dark backgrounds. Secondary accent is a cool blue (#3b82f6)

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances precision with warmth—essential for a platform that must display both cinematic titles and dense metadata. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero titles like "The Odyssey," commanding attention without aggression. Headline-lg (40px, 700 weight) is used for section headers ("Trending Movies", "Now Playing"); headline-md (28px, 700 weight) for subsection titles. Title-lg (20px, 600 weight) anchors card titles and modal headers. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for descriptions and synopses—the 28px line-height ensures comfortable scanning over dark backgrounds. Body-md (16px, 400 weight, 24px line-height) is used for metadata and secondary copy

Layout

CineHD uses a fluid 12-column grid with a max-width of 1280px, centered on desktop. The page rhythm is driven by the hero section—a full-width image with overlay text (using surface-container-high at 40% opacity) that occupies the entire viewport height on mobile, 60vh on tablet, and 70vh on desktop. Below the hero, content is organized in horizontal carousels ("Trending Movies", "Trending TV Shows", "Providers"), each with 24px gutter spacing between cards. The spacing scale is semantic: lg (40px) separates major sections; md (24px) is the default card padding and inter-section margin; sm (12px) is used for internal card spacing (between title and metadata). Container max-width is 1280px; this ensures text remains readable and the layout doesn't feel stretched on ultra-wide displays. Whit

Elevation & Depth

Depth in CineHD is achieved through layered opacity and subtle shadows rather than dramatic drop-shadows. The visual hierarchy is built on three distinct levels: Level 1 (Base) is the near-black background (rgb(9, 9, 11)) with no shadow. Level 2 (Standard Card) uses surface-container (#18181b) with a 1px border at outline-variant (#4b5563) and a soft shadow (0 4px 12px rgba(0, 0, 0, 0.08)). Level 3 (Elevated/Modal) uses surface-container-highest (#2d3d30) with a 1px border at outline (#6b7280) and a more pronounced shadow (0 16px 40px rgba(0, 0, 0, 0.12)). Hero overlays use a gradient mask: rg

Shapes

CineHD employs a "Soft-Technical" radius philosophy: rounded corners are present but restrained, signaling modernity without sacrificing legibility. Buttons use rounded.md (0.75rem / 12px) for a slightly softer appearance than sharp corners, but not so rounded as to feel playful. Cards use rounded.lg (1rem / 16px) for a more generous curve that softens the dark aesthetic. Inputs use rounded.DEFAULT (0.5rem / 8px) for a neutral, functional appearance. The hero section has no border-radius (0px), maintaining a cinematic, full-bleed aesthetic. Badges and micro-interactions use rounded.full (9999p

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses a solid red background (#ef4444) with white text, 8px vertical and 24px horizontal padding, and rounded.md (12px). On hover, the background shifts to primary-container (#dc2626), a darker red, with a 200ms transition. The button-secondary component has a transparent background with a 1px outline border at outline (#6b7280) and on-surface text; on hover, it gains a surface-container-high background. Both button variants use label-md typography (14px, 700 weight) to ensure text is prominent and scannable. The "Play" button on the hero uses button-primary; the "See More" button uses button-secondary. Buttons must never use text-decoration: underline; instead, rely on weight and color for affor

Do's and Don'ts

**Do**

• Do use the primary red (#ef4444) exclusively for interactive elements and CTAs—never for passive backgrounds or body text.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) to all body text overlaid on hero images to ensure legibility.
• Do maintain 24px gutter spacing between cards in carousels and 40px spacing between major sections.
• Do use Inter 700 weight for all buttons and interactive labels to signal affordance and clickability.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all hover and focus state changes for smooth, predictable interactions.

**Don't**

• Don't use primary red (#ef4444) for backgrounds, borders, or non-interactive elements—reserve it for CTAs and focus states only.
• Don't apply border-radius to hero sections; maintain a full-bleed, cinematic aesthetic with 0px corners.
• Don't use system fonts or fallback sans-serif; Inter is the only approved typeface across all components.
• Don't exceed 4 cards per row on desktop; white-space is a design feature, not wasted space.
• Don't use shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12); the dark background already provides depth.