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.

text-primary:#FFFFFF
text-secondary:#B3B3B3
background-base:#000000
background-surface:#141414
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Backgrounds

Text

Brand & Accents

Typography

h1 (Hero Title)Netflix Sans, Helvetica Neue, Helvetica, Arial, sans-serif · 48px to 64px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2 (Row Title)Netflix Sans, Helvetica Neue, Helvetica, Arial, sans-serif · 24px to 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-largeNetflix Sans, Helvetica Neue, Helvetica, Arial, sans-serif · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyNetflix Sans, Helvetica Neue, Helvetica, Arial, sans-serif · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallNetflix Sans, Helvetica Neue, Helvetica, Arial, sans-serif · 14px · 400 or 500

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

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.

Components

Buttons

App Bar

Scrolled

Elevation & Depth

hovered-card
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.

Download .md

License MIT
Uploaded 5 days ago
Version v1
File size 3.1 KB
Downloads 18
Copies 7

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/aldhoe/netflix-design-system and implement it in my code

Don't have the MCP? Install it here