primary
#E50914
Primary CTA and logo signal.
A brand-specific catalog built from Netflix’s public web system: black stages, red commit buttons, poster rails, slab FAQs, and a split between marketing and utility flows.
Netflix limits emotional color to the action layer and lets neutral contrast carry the rest.
Primary CTA and logo signal.
Darker red interaction feedback.
Pressed state for commit actions.
Theater-grade entertainment background.
Soft dark staging and overlays.
FAQ rows and dark feature cards.
Signup and utility reset surface.
Support notes and help slabs.
Primary ink on white surfaces.
Low-priority text on dark shells.
Functional support link blue.
Subtle field and outline border.
Strong sans, dense lines, and obvious scale jumps keep the voice direct.
Button context changes through density and contrast, not playful geometry or shadow stacks.
Netflix surfaces are flat and confident. Once a card feels floaty, it stops reading like the brand.
Feature storytelling sits inside charcoal containers with generous copy room and low ornament.
Streaming value props appear as dark modules instead of glossy marketing cards.
Red is reserved for action emphasis or a deliberately stronger plan moment.
Transparent framing lets posters and oversized rank numerals do the work.
When the flow becomes transactional, Netflix moves to white canvas, dark ink, and firmer information structure.
These are the signatures that keep the preview from becoming a generic dark UI.
TV, laptop, tablet, phone.
Save favorites with minimal friction.
Family-safe spaces in the same account.
One membership, many contexts.
Homepage fields are signature Netflix: translucent dark fill, small radius, white text, minimal chrome.
Whitespace opens at the macro layout while rows, plans, and modules stay tightly paced.
Radius stays tight across the system; even bigger cards remain architectural rather than soft.
Most surfaces stay shadowless. One subtle masthead shadow is enough to document the exception.
This brand uses flat surfaces. Depth comes from color contrast and content imagery.
No drop shadow. The poster itself creates hierarchy within the black stage.
0 4px 4px rgba(0,0,0,.25) is the rare subtle shadow seen on editorial header separation.
All major tokens are declared as CSS custom properties so the preview stays portable and file-safe.
:root {
--brand-primary: #E50914;
--brand-accent-hover: #C11119;
--brand-accent-pressed: #A80D15;
--brand-canvas: #000000;
--brand-surface: #161616;
--brand-surface-alt: #232323;
--brand-help-canvas: #FFFFFF;
--brand-help-surface: #F4F4F4;
--brand-body: #221F1F;
--brand-muted: #B3B3B3;
--brand-border: #808080;
--brand-link: #448EF4;
--brand-on-primary: #FFFFFF;
--brand-on-dark: #FFFFFF;
--display-size: 56px;
--headline-size: 40px;
--title-lg: 32px;
--title-md: 24px;
--title-sm: 20px;
--body-size: 16px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-section: 56px;
}