Netflix Design SystemLegacy format
Netflix is an immersive, cinematic, and bold entertainment platform. The design is engineered to get out of the way of the content. The UI is predominantly black and dark grey, allowing the vibrant colors of movie posters and trailers to pop. The signature Netflix Red is used sparingly but effectively for primary actions and brand recognition.
Color Palette
Backgrounds
Text
Brand & Accents
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.
Spacing
Base: 8pxNetflix is an immersive, cinematic, and bold entertainment platform. The design is engineered to get out of the way of the content. The UI is predominantly black and dark grey, allowing the vibrant colors of movie posters and trailers to pop. The signature Netflix Red is used sparingly but effectively for primary actions and brand recognition.
Components
Buttons
App Bar
Scrolled
Elevation & Depth
Brand Identity
Netflix is an immersive, cinematic, and bold entertainment platform. The design is engineered to get out of the way of the content. The UI is predominantly black and dark grey, allowing the vibrant colors of movie posters and trailers to pop. The signature Netflix Red is used sparingly but effectively for primary actions and brand recognition.
Effects
• Vignette/Gradients: Heavy use of black gradients overlaying the bottom and sides of hero images to ensure white text is always readable regardless of the image behind it.
• Transitions: Smooth, fast transitions (~200-300ms ease-in-out) for card expansions to make browsing feel responsive and fluid.
Use with MCP
Don't have the MCP? Install it here