Cinejoy

Overview

Cinejoy is a free streaming platform designed for cinephiles and casual viewers seeking an immersive, discovery-first experience. The design language embraces a "Cinematic Glassmorphism" aesthetic—layered frosted-glass surfaces floating over a deep, atmospheric dark background, punctuated by a vibrant lime-green accent (#95FF50) that evokes the energy of cinema marquees and modern tech interfaces. The brand personality is sophisticated yet approachable: it treats content discovery as an art form, not a transaction. The UI whispers rather than shouts, using depth, blur, and subtle color shifts to guide attention without overwhelming. Voice: conversational, knowledgeable, never condescending. Example: "Discover what's trending tonight—or dive into a curated collection from your favorite studios."

Colors

The color system is anchored in a deep, cool-toned dark mode (surface #04120b, near-black #050505) that serves as a canvas for cinematic imagery. Primary accent is a vivid lime-green (#95FF50)—the brand's signature call-to-action color, used on play buttons, active navigation, and key interactive elements. This high-contrast accent ensures CTAs remain legible and clickable even over complex hero imagery. Secondary accent is a muted purple (#7a6bae, #5a4e8c) that appears in pill buttons, dividers, and subtle UI chrome, creating a sophisticated secondary layer without competing with the primary. Tertiary (#3f8a1d, #5fb82c) supports status indicators and success states. The surface stack progresses from the deepest container-lowest (#0a0a0a, used for modals and overlays) through mid-tone cont

Typography

The type system pairs Montserrat (headlines, display) with Inter (body, labels), creating a hierarchy that balances editorial gravitas with technical clarity. Montserrat's geometric warmth anchors hero content and section titles, while Inter's neutrality ensures readability in dense UI. Display (60px, 700 weight, -0.04em tracking) is reserved for hero movie titles and brand moments; headline-lg (40px, 600 weight) for section headers like "Trending Movies"; headline-md (28px, 600 weight) for subsections; title-lg (20px, 600 weight, Inter) for card titles. Body-lg (18px, 400 weight) is used for descriptive text over hero imagery; body-md (16px, 400 weight) for standard UI copy. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.02em tracking) handle buttons, badge

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The page rhythm is built on a semantic spacing scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Hero sections occupy full viewport height with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility over imagery. Content rows (trending movies, browse by provider) use lg spacing (40px) between sections. Cards are laid out in responsive grids: 4 columns on desktop, 2 on tablet, 1 on mobile, with md (24px) gaps. The gutter (24px) is consistently applied to all container edge

Elevation & Depth

Depth is conveyed through a layered glassmorphic stack rather than traditional shadows. Level 1 (Base): The background is a dynamic aurora gradient (purples, deep blues, blacks) with subtle grain texture, creating atmospheric depth. Level 2 (Standard Cards): backdrop-filter: blur(20px), background: rgba(29, 23, 40, 0.6), border: 1px solid rgba(255, 255, 255, 0.1), box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This creates a frosted-glass effect that feels both ethereal and tactile. Level 3 (Elevated/Modals): backdrop-filter: blur(40px), background: rgba(10, 10, 10, 0.9), border: 1px solid rgba(25

Shapes

The shape philosophy is "Soft-Technical Minimalism"—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons and pills use full border-radius (9999px) to create a friendly, approachable feel that contrasts with the dark, cinematic background. Cards and containers use lg (1rem / 16px) radius for a balanced, modern appearance. Input fields and smaller UI elements use DEFAULT (0.5rem / 8px) radius for subtle definition. Media cards use md (0.75rem / 12px) to maintain visual hierarchy without appearing too soft. The rationale: full-radius buttons act as v

Components

Action Elements Buttons are the primary interaction pattern. The primary button (Play, Watch Now) uses background: {colors.primary} (#95ff50), text-color: {colors.on-primary} (black), typography: label-md, rounded: full, padding: 12px 24px, height: 48px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, background shifts to #c9ffab (primary-fixed) with a smooth transition: all 200ms ease-out. Secondary buttons use background: rgba(255, 255, 255, 0.1), text-color: {colors.primary}, border: 1px solid rgba(255, 255, 255, 0.2), and the same rounded/padding/height. On hover, background becomes rgba(255, 255, 255, 0.15) and border becomes rgba(255, 255, 255, 0.3). Pill buttons (genre filters, provider tabs) use background: rgba(60, 50, 79, 0.7), rounded: full, padding: 8px 16px, and a

Do's and Don'ts

**Do**

• Do use the lime-green primary (#95ff50) exclusively for CTAs, active states, and brand moments—never dilute it with secondary uses.
• Do apply backdrop-filter: blur(20px) to all glass surfaces to maintain the frosted-lens aesthetic and ensure layered depth.
• Do pair Montserrat headlines with Inter body text to create editorial authority without sacrificing UI clarity.
• Do use the full rounded-radius (9999px) on all buttons to create visual anchors that pop against the dark background.
• Do maintain generous spacing (lg: 40px between sections) to emphasize the cinematic, gallery-like nature of content discovery.
• Do include 1px borders at rgba(255, 255, 255, 0.1) on all glass surfaces to define edges without harsh contrast.

**Don't**

• Don't use the primary accent (#95ff50) for body text, backgrounds, or non-interactive elements—reserve it for CTAs only.
• Don't apply heavy drop shadows (box-shadow: 0 20px 60px) that contradict the glassmorphic aesthetic; use soft shadows (0 3px 8px) or glow effects instead.
• Don't mix rounded-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't reduce padding or spacing to cram more content; the generous white-space is essential to the brand's cinematic, premium feel.