Reel TheoryLegacy format
Reel Theory is a design system for film studios, screening platforms, art-house streaming services, and any product that treats cinema as a medium rather than as content. The aesthetic borrows from film-festival print catalogs and 35mm projection booths: deep ink black, champagne gold for credits and accolades, a precise crimson reserved for play state and live screening indicators, and a faint film-grain texture beneath surfaces to give the interface the analog warmth of celluloid. Layouts are letterboxed — content lives within deliberate horizontal bands with black bars above and below, echoing the projected frame. Hero trailers play full-bleed at full brightness; metadata recedes into the gold-on-black palette of a Cannes program. Reel Theory rejects the streaming-service convention of dense thumbnail grids in favor of a curated, editorial film-card hierarchy where each title gets room to be a film, not a tile.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxReel Theory is a design system for film studios, screening platforms, art-house streaming services, and any product that treats cinema as a medium rather than as content. The aesthetic borrows from film-festival print catalogs and 35mm projection booths: deep ink black, champagne gold for credits and accolades, a precise crimson reserved for play state and live screening indicators, and a faint film-grain texture beneath surfaces to give the interface the analog warmth of celluloid. Layouts are letterboxed — content lives within deliberate horizontal bands with black bars above and below, echoing the projected frame. Hero trailers play full-bleed at full brightness; metadata recedes into the gold-on-black palette of a Cannes program. Reel Theory rejects the streaming-service convention of dense thumbnail grids in favor of a curated, editorial film-card hierarchy where each title gets room to be a film, not a tile.
Icons
Font AwesomeLibrary: Font Awesome · Style: outline · Size: 18px
Motion
Motion in Reel Theory is unhurried and projector-paced. Standard duration is 320ms with cubic-bezier(0.22, 0.61, 0.36, 1) easing (a confident ease-out). Card hovers use a slow 320ms champagne accent slide. Film posters cross-fade between frames every 4.8 seconds in autoplay hero contexts. Trailer modal open uses a 480ms scale-up from the poster origin to fullscreen — like a projector unspooling. The film-grain overlay subtly shifts at 12 fps (intentionally slow) to mimic actual film grain. Scrubbing the trailer timeline scrubs the grain too. Page transitions use a slow letterbox-bar slide-in (320ms) before the body content fades in (240ms).
Photography & Video Guidance
Posters use 2:3 vertical ratio — original film-poster proportions. Hero stills use 21:9 cinematic ratio. Trailers default to 1.85:1 or 2.39:1 aspect. Avoid square crops, modern-streaming-tile aspect ratios, and any treatment that crops out original poster typography. Black-and-white poster art is welcomed and presented at full fidelity. Behind-the-scenes photography uses 3:2 with a faint sepia warmth.
Voice and Tone
• Editorial and considered. Like a film festival catalog or a Criterion Collection essay.
• Use cinematic idiom: "Directed by," "Director of Photography," "Edited by," "Original Score," "In Selection," "Restored from a 4K scan."
• Avoid streaming-service marketing copy ("You'll love this!" — never).
• Synopses are loglines first, then a single editorial paragraph — not bullet lists of genre tags.
• Errors and empty states use cinematic dignity: "This title is not currently available in your region," "No screenings scheduled."
• Loading states use a slow champagne radial mark — like a film reel spinning up.
Use with MCP
Don't have the MCP? Install it here