Netflix
Streaming platform. Rich red on deep black. Cinematic full-viewport imagery. Content discovery through horizontal carousels.
# Netflix Design System ## Visual Theme & Atmosphere Cinematic immersion. Bold red (#E50914) on deep black (#141414). Full-viewport hero images with content flowing underneath. Horizontal carousels for discovery. Every screen feels like a movie theater. ## Color Palette & Roles | Token | Hex | Role | |-------|-----|------| | Primary | #E50914 | Netflix Red | | Secondary | #B20710 | Red hover/dark | | Background | #141414 | Deep black | | Surface | #1F1F1F | Cards, panels | | Text | #FFFFFF | White text | | Muted | #A3A3A3 | Secondary text | | Border | #333333 | Subtle dividers | ## Typography Rules - **Headings**: Bebas Neue or bold condensed sans - **Body**: Helvetica Neue, clean sans-serif - **Base Size**: 16px ## Component Stylings - **Hero**: Full viewport image, centered title, CTA buttons - **Carousels**: Horizontal scroll rows of poster cards - **Cards**: Image-first, hover scale effect, rounded corners ## Agent Prompt Guide Deep black background, bold red accent, cinematic hero images, horizontal carousels, poster-style cards with hover scale.
Streaming platform. Rich red on deep black. Cinematic full-viewport imagery. Content discovery through horizontal carousels.
Netflix uses #E50914 as primary color, #141414 for background, and #FFFFFF for text.
Heading font: Bebas Neue, Arial Black, sans-serif. Body font: Helvetica Neue, Helvetica, Arial, sans-serif. Base size: 16px.
Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Netflix's style.
Discover 50+ curated design systems for your AI Coding projects.
View All Design Systems