---
site: "Netflix United Arab Emirates - Watch TV Shows Online, Watch Movies Online"
url: "https://netflix.com"
generated_at: "2026-06-25T08:24:57.408Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#e50914"
    secondary: "#3860be"
    accent: "#468254"
    background: "#000000"
    foreground: "#000000"
  typography:
    sans: Netflix Sans
    base: 16
  spacing:
    base: 2
    scale: "[1, 10, 12, 20, 22, 24, 27, 30, 32, 34]"
  radii:
    xs: 2
    md: 8
    lg: 16
    xl: 20
    full: 50
  shadows:
    sm: "rgba(0, 0, 0, 0) 0px 2px 4px 0px, rgba(50, 50, 93, 0.1) 0px 7px 14px 0px"
    md: "rgb(199, 197, 199) 0px 0px 12px 2px"
---

# Overview

A **landing** page (heuristic confidence 0.29), dressed in **flat** material.

> "Privacy Preference Center"

The author writes in a **friendly** voice; headings tend to be **Title Case** case and **tight**.

Reading order detected on the source: `nav → nav → content → content → content → footer`.

Source: <https://netflix.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#e50914` | 16 |
| secondary | `#3860be` | 14 |
| accent | `#468254` | 2 |
| background | `#000000` | — |
| foreground | `#000000` | — |

**Neutrals:** `#ffffff` · `#000000` · `#333333` · `#232323` · `#414141`

**Total unique colors detected:** 16.

# Typography

**Families**
- `Netflix Sans` · 572 uses

**Body size:** `16px` / line-height `normal`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `56px` | `700` | `70px` |
| h2 | `24px` | `500` | `24px` |
| h3 | `21.92px` | `600` | `26.304px` |
| h4 | `16px` | `400` | `normal` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `10px` · `12px` · `20px` · `22px` · `24px` · `27px` · `30px` · `32px` · `34px`

**Layout primitives:** 0 grid containers · 117 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgb(128, 128, 128) 0px 0px 5px 0px`
- `sm` — `rgba(0, 0, 0, 0) 0px 2px 4px 0px, rgba(50, 50, 93, 0.1) 0px 7px 14px 0px`
- `md` — `rgb(199, 197, 199) -3px -3px 5px -2px`
- `md` — `rgb(199, 197, 199) 0px 0px 12px 2px`

**Z-index layers:** 8 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `2px`
- `md` — `8px`
- `lg` — `16px`
- `xl` — `20px`
- `full` — `50px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `tabs` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 19 |
| input | — | — | 2 |

# Do's and Don'ts

**Do's**
- Use `get`, `how`, `watch` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Title Case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 49 !important rules — prefer specificity over overrides.
- Don't 86% of css is unused — consider purging.
- Don't 2295 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://netflix.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._