{
  "name": "Netflix style",
  "slug": "netflix",
  "number": 3,
  "words": {
    "en": "Dark, Cinematic, Bold",
    "ko": "다크, 시네마틱, 강렬함"
  },
  "source": [
    "https://www.netflix.com",
    "https://www.netflix.com/tudum/top10"
  ],
  "sample": {
    "url": "https://styles.vizney.com/netflix/",
    "data": "tickets.csv",
    "topic": "Weekly ticket sales report of Vizney Live, a fictional US live entertainment company (32 shows in Los Angeles, New York and Chicago), built from the parts Netflix shows data with instead of charts (the billboard, a Top 10 of outlined numerals with bars and rank moves, weeks in the Top 10, the continue-watching progress bar, the episode list, the hover card, the TOP 10 badge and the FAQ accordion) in one card and chart grammar on a dark page"
  },
  "colors": {
    "canvas": {
      "hex": "#000000",
      "role": "page background, header and footer (netflix.com's signed-out pages are black, measured)"
    },
    "card": {
      "hex": "#161616",
      "role": "every figure, table and the workbench: no border, no shadow, an 8px radius (the dark step behind the landing's rails; Tudum's page is #242424)"
    },
    "plot": {
      "hex": "#161616",
      "role": "chart background: the card itself, never a second panel"
    },
    "raise": {
      "hex": "#232323",
      "role": "the hover card (tooltip) and the Top 10 poster (measured: #232323, 8px radius)"
    },
    "field": {
      "hex": "#2d2d2d",
      "role": "FAQ rows (measured: #2d2d2d, 24px padding, 8px apart), install-command boxes; the hover band behind a bar is #262626"
    },
    "hair": {
      "hex": "#414141",
      "role": "the fill of the outlined Top 10 numerals (measured #414141), chart baselines"
    },
    "line": {
      "hex": "#2d2d2d",
      "role": "chart gridlines and the workbench dividers"
    },
    "rule": {
      "hex": "#404040",
      "role": "rules between table rows and between episode rows (the episode list divider)"
    },
    "ink": {
      "hex": "#ffffff",
      "role": "titles, key figures, table values, the current week's tick, the focus ring"
    },
    "body": {
      "hex": "#e5e5e5",
      "role": "running text, code, labels inside dark cells"
    },
    "text-2": {
      "hex": "#b3b3b3",
      "role": "subtitles, figure labels, KPI labels, footer text: rgba(255,255,255,.7) on black, as netflix.com and Tudum set secondary text (8.6:1 on the card)"
    },
    "muted": {
      "hex": "#808080",
      "role": "notes, axis ticks, table headers, captions under tiles (4.6:1 on the card: the lightest gray for small text, and only on #161616 or darker; use text-2 on #232323 and lighter)"
    },
    "accent": {
      "hex": "#e50914",
      "role": "Netflix red for UI only (measured #e50914): the primary button, the TOP 10 badge, the NEW ribbon, the selected code tab. White text on it is 4.8:1. Data takes its own red step, #f0313b"
    },
    "accent-hover": {
      "hex": "#c11119",
      "role": "primary button hover"
    },
    "gray-button": {
      "hex": "#808080",
      "role": "the secondary button: rgba(128,128,128,.4) with white text, 40px, 16px/500, padding 6px 16px, 4px radius (measured: 'Learn more' on netflix.com/kr); hover at .6"
    },
    "good": {
      "hex": "#46d369",
      "role": "favourable change, text only (the green Netflix uses for match scores, 9.3:1 on the card)"
    },
    "bad": {
      "hex": "#e87c03",
      "role": "unfavourable change, text only (orange, so it never reads as the red subject; 6.3:1 on the card)"
    },
    "focus": {
      "hex": "#ffffff",
      "role": "focus ring, 2px with a 2px offset"
    }
  },
  "data": {
    "surface": "#161616",
    "categorical": [
      {
        "name": "red · the subject",
        "hex": "#f0313b",
        "text": "#ff5a63"
      },
      {
        "name": "blue",
        "hex": "#6a88f2",
        "text": "#8ea5f6"
      }
    ],
    "other": "#595959",
    "comparison": "#808080",
    "marks": {
      "grid": "#2d2d2d",
      "baseline": "#414141",
      "target": "#ffffff",
      "track": "#575757",
      "cell": "#333333",
      "hover": "#262626",
      "numeral": "#414141"
    },
    "sequential": [
      "#9e2027",
      "#c4262f",
      "#f0313b",
      "#ff6b72",
      "#ffa3a7"
    ],
    "diverging": [
      "#ffa3a7",
      "#f0313b",
      "#9e2027",
      "#3a3a3a",
      "#3f55a8",
      "#6a88f2",
      "#b3c3f9"
    ],
    "status": {
      "good": "#46d369",
      "bad": "#e87c03",
      "neutral": "#808080"
    },
    "validation": {
      "tool": "dataviz validate_palette.js (OKLab), mode dark, on the card #161616 where every chart sits",
      "categorical": "red #f0313b (one step lighter than the UI red #e50914, which stays on buttons and badges) and blue #6a88f2 (netflix.com's blue #4061e7 raised for a dark surface) pass every check: CVD ΔE 27.6 (deutan), normal vision 32.8, OKLCH lightness inside the dark band 0.48–0.67, contrast 4.49 and 5.53:1. Two hues on purpose: Netflix paints with red and keeps the rest gray",
      "other": "#595959 is a neutral gray one step above the numeral fill #414141; neutral by design (lightness band and chroma floor do not apply). Against red: CVD 7.4 (protan), normal 24.9 against blue. At 2.58:1 it always has a second cue: a 2px gap between segments, value labels and a table",
      "comparison": "#808080 against red: 4.58:1 on the card, always dashed (6 4) and labeled at its end",
      "sequential": "one red hue (#9e2027 → #ffa3a7, dim to bright, because on a dark card a larger value is brighter): monotone lightness, every gap ≥ 0.06, the dim end 2.32:1, hue spread 8°",
      "diverging": "arms #ffa3a7→#9e2027 and #b3c3f9→#3f55a8 each pass the ordinal checks (dim ends 2.32 and 2.65:1, hue spread 8° and 2°); poles CVD 11.7 (protan), normal 15.1; the midpoint #3a3a3a is a neutral that sinks into the card",
      "status": "good #46d369 9.3:1 and bad #e87c03 6.3:1 as text on the card; status is never color alone: a change keeps its sign and its comparison words",
      "text": "label steps on the card: red text #ff5a63 5.9:1, blue text #8ea5f6 7.6:1; digits in grid cells are #e5e5e5 on #333333 (9.6:1) and black on the red #1 cell (5.2:1)"
    }
  },
  "code": {
    "background": "#0b0b0b",
    "comment": "#808080",
    "string": "#46d369",
    "number": "#e87c03",
    "keyword": "#8ea5f6",
    "function": "#ff5a63",
    "property": "#e5e5e5",
    "line-number": "#808080",
    "highlight": "#262626",
    "caret": "#e50914",
    "note": "the screen's own text steps (blue keyword, green string, orange number, red function), all ≥ 4.5:1 on #0b0b0b"
  },
  "typography": {
    "sans": {
      "en": "Roboto",
      "ko": "Pretendard",
      "weights": [
        400,
        500,
        700,
        900
      ],
      "role": "everything: Roboto stands in for Netflix Sans (it is in netflix.com's own fallback stack: 'Netflix Sans', 'Helvetica Neue', 'Segoe UI', Roboto, Ubuntu, sans-serif); netflix.com loads Netflix Sans 400, 500 and 700, Tudum's ranks use 900. Netflix Sans has no Hangul, so Korean pages fall back to system fonts and Korean uses Pretendard"
    },
    "mono": {
      "family": "Roboto Mono",
      "weights": [
        400,
        500
      ],
      "role": "code and file names only"
    },
    "links": {
      "google": "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Roboto:wght@400;500;700;900&display=swap",
      "pretendard": "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
    },
    "scale": {
      "headline": {
        "size": "clamp(30px, 3.3vw, 48px)",
        "weight": 700,
        "lineHeight": 1.16,
        "letterSpacing": "-0.01em",
        "family": "sans",
        "measured": "netflix.com h1 56px/700, line-height 70px"
      },
      "kpi": {
        "size": "40px",
        "weight": 700,
        "lineHeight": 1.05,
        "letterSpacing": "-0.02em",
        "family": "sans"
      },
      "eyebrow": {
        "size": "18px",
        "weight": 500,
        "lineHeight": 1.3,
        "family": "sans"
      },
      "lede": {
        "size": "18px",
        "weight": 400,
        "lineHeight": 1.45,
        "family": "sans"
      },
      "sectionTitle": {
        "size": "24px",
        "weight": 500,
        "lineHeight": 1.45,
        "family": "sans",
        "measured": "row titles ('Trending Now') 24px/500"
      },
      "sectionIntro": {
        "size": "16px",
        "weight": 400,
        "lineHeight": 1.5,
        "family": "sans"
      },
      "cardTitle": {
        "size": "20px",
        "weight": 500,
        "lineHeight": 1.35,
        "family": "sans"
      },
      "figureLabel": {
        "size": "12px",
        "weight": 700,
        "letterSpacing": "0.12em",
        "transform": "uppercase",
        "family": "sans"
      },
      "body": {
        "size": "14px",
        "weight": 400,
        "lineHeight": 1.5,
        "family": "sans"
      },
      "table": {
        "size": "16px",
        "weight": 400,
        "lineHeight": "22px",
        "family": "sans",
        "measured": "Tudum Top 10 rows 18px/400"
      },
      "tableHeader": {
        "size": "14px",
        "weight": 500,
        "color": "white",
        "family": "sans",
        "measured": "Tudum Top 10 header 14px/500, sentence case"
      },
      "rank": {
        "size": "36px",
        "weight": 900,
        "lineHeight": 1.1,
        "family": "sans",
        "measured": "Tudum Top 10 rank '01' 36px/900"
      },
      "numeral": {
        "size": "58px in the Top 10 (netflix.com: 100px over a 252px poster)",
        "weight": 700,
        "fill": "#414141",
        "stroke": "4px white",
        "shadow": "0 0 24px rgba(0,0,0,.5)",
        "family": "sans",
        "measured": "Trending Now rail on netflix.com"
      },
      "note": {
        "size": "13px",
        "weight": 400,
        "lineHeight": "20px",
        "family": "sans"
      },
      "axis": {
        "size": "12px",
        "weight": 400,
        "family": "sans"
      },
      "faq": {
        "size": "24px",
        "weight": 400,
        "lineHeight": 1.3,
        "family": "sans",
        "measured": "FAQ question 24px/400, padding 24px"
      },
      "code": {
        "size": "12.5px",
        "weight": 400,
        "lineHeight": 1.62,
        "family": "mono"
      }
    }
  },
  "radius": {
    "card": "8px",
    "kpi": "8px",
    "button": "4px",
    "feature-card": "16px",
    "chip": "16px",
    "badge": "2px",
    "tooltip": "6px",
    "faq": "0",
    "bar": "2px"
  },
  "spacing": {
    "page": "32px",
    "gap": "16px",
    "section": "56px",
    "card": "20px 24px 18px",
    "card-head": "0 0 16px",
    "card-foot": "14px 0 0",
    "billboard": "44px 48px 28px",
    "cell": "8px 10px",
    "episode": "10px",
    "faq": "24px",
    "footer": "28px 32px 40px",
    "feature-card": "24px 16px"
  },
  "layout": {
    "maxWidth": "1400px",
    "columns": 12,
    "header": "72px",
    "maxViewsPerScreen": 7,
    "breakpoints": {
      "wide": 1360,
      "split": 1200,
      "mid": 1024,
      "narrow": 900,
      "phone": 640
    },
    "rows": [
      "black header 72px: company and report name; period, EN/KO, Export PDF (outlined), Copy as Markdown (red)",
      "filter row: outlined chips, the selected one white",
      "billboard: TOP 10 badge and the #1 line, the headline, a lede, a red and a gray button, four key figures; key art is a color block with a giant outlined numeral",
      "This week: Figure 1 Top 10 (12, two columns of five rows); Figure 2 tickets by week (7) · Figure 3 weeks in the Top 10 (5)",
      "Coming up: Figure 4 episode list with progress bars (7) · Figure 5 channels (5); Table 1 every show (12)",
      "How it's built: three gradient step cards, then the window (package 240px · figure and checks · code)",
      "Method and sources: the FAQ accordion",
      "black footer"
    ]
  },
  "motion": {
    "ease": "cubic-bezier(.5,0,.1,1)",
    "button": "0.2s",
    "draw": "0.7s",
    "grow": "0.45s",
    "rise": "0.45s",
    "fade": "0.3s",
    "typing": "55ms per line, 380ms between steps"
  },
  "tools": {
    "tableau": {
      "palettes": "netflix.tps",
      "fonts": "Tableau Book for text; Roboto only if it is installed on every viewing machine and the server"
    },
    "powerbi": {
      "theme": "powerbi-theme.json",
      "fontFamily": "Roboto",
      "fallback": "Segoe UI",
      "visual": {
        "background": "card",
        "plot": "card",
        "radius": 8
      }
    },
    "web": {
      "css": "tokens.css"
    }
  },
  "measured": {
    "date": "2026-11-03, Chrome, netflix.com/kr (signed out) and netflix.com/tudum/top10",
    "landing": "body #000000; text #ffffff and rgba(255,255,255,.7); h1 56px/700 (line-height 70px); row titles 24px/500; primary button #e50914, 4px radius (header 32px 14px/500 4px 16px; hero 56px 24px/500 12px 24px); secondary rgba(128,128,128,.4) 40px 16px/500 6px 16px; Trending Now posters #232323, 8px radius, 180×252, numerals 100px/700 #414141 with a 4px white stroke and a 24px black glow over the poster's lower left; feature cards linear-gradient(149deg, #192247 0%, #210e17 96.86%), 16px radius, titles 24px/500, text rgba(255,255,255,.7); FAQ rows #2d2d2d, 24px/400, 24px padding, 8px apart; the curved divider #210d16 → #b82869 → #e50914 with a rgba(64,97,231,.4) glow; footer rgba(255,255,255,.7) 14px",
    "tudum": "rank '01' 36px/900 white; header 14px/500 white; rows 18px/400 with a 16:9 thumbnail and no rules; weeks in the Top 10 as a plain integer; views and hours in full digits (10,700,000); runtime h:mm (1:48); week as 10/19/26 - 10/25/26; filters as 40px 4px-radius buttons, 14px",
    "fonts": "Netflix Sans 400, 500, 700 loaded on the landing (fallback 'Helvetica Neue', 'Segoe UI', Roboto, Ubuntu, sans-serif); no Hangul subset"
  }
}