DesignMD Maker logo ← Home Report · Code analysis
⬇ Download .md ↗ Open live preview
N
Design System

Netflix Türkiye - Watch TV Shows Online, Watch Movies Online

Design system extracted from https://www.netflix.com/vn/ on 2026-08-27 (code-based analysis).

Source · https://www.netflix.com/vn/ Engine · Code analysis Created · Aug 27, 2026 14:09 Cost · $0.0000
Detected Language

Design Style

glassmorphism
2 backdrop-filter rules + 18 translucent white fills
gradient-rich / aurora
many gradient definitions
technical / mono accents
monospace font in use
Palette

Colors

primary
#E50914
4.79 on white · 4.38 on black · 357° 92% 47%
secondary
#000000
21 on white · 1 on black · 0° 0% 0%
accent
#EB3942
4.04 on white · 5.2 on black · 357° 82% 57%
Token Roles 8 tokens
background
#000000 · 21:1 vs white
surface
#ECECEC · 17.78:1 vs black
text-primary
#000000 · 21:1 vs white
text-secondary
#A9A9A9 · 2.35:1 vs white
border
#808080 · 3.95:1 vs white
on-primary
#FFFFFF · 21:1 vs black
on-secondary
#FFFFFF · 21:1 vs black
on-accent
#FFFFFF · 21:1 vs black
Detected Palette 24 colors by frequency in source CSS
#000000
used 92× · 0° 0% 0%
#FFFFFF
used 41× · 0° 0% 100%
#A9A9A9
used 16× · 0° 0% 66%
#232323
used 9× · 0° 0% 14%
#161616
used 5× · 0° 0% 9%
#E50914
used 5× · 357° 92% 47%
#808080
used 4× · 0° 0% 50%
#EB3942
used 4× · 357° 82% 57%
#2BB871
used 4× · 150° 62% 45%
#D89D31
used 4× · 39° 68% 52%
#414141
used 4× · 0° 0% 25%
#192247
used 3× · 228° 48% 19%
#461518
used 2× · 356° 54% 18%
#ECECEC
used 2× · 0° 0% 93%
#210E17
used 2× · 332° 40% 9%
#465A7E
used 2× · 219° 29% 38%
#050042
used 2× · 245° 100% 13%
#000438
used 2× · 236° 100% 11%
#C11119
used 2× · 357° 84% 41%
#99161D
used 2× · 357° 75% 34%
#210D16
used 2× · 333° 43% 9%
#B82869
used 2× · 333° 64% 44%
#2D2D2D
used 2× · 0° 0% 18%
#6F181D
used 1× · 357° 64% 26%
Surface Treatments

Gradients

radial-gradient(11% 56% at 17% 50%, #461518 0%, transparent 100%),radial-gradient(11% 56% at 83% 50%, #461518 0%, transparent 100%)
linear-gradient( 0deg, transparent 0%, #6f181d 50%, transparent 100% )
linear-gradient( 180deg, rgba(0, 0, 0, 0.8000) 0.000%, rgba(0, 0, 0, 0.7889) 8.333%, rgba(0, 0, 0, 0.7556) 16.67%, rgba(0, 0, 0, 0.7000) 25.00%, rgba(0, 0, 0, 0.6222) 33.33%, rgba(0, 0, 0, 0.5222) 41.67%, rgba(0, 0, 0, 0.4000) 50.00%, rgba(0, 0, 0, 0.2778) 58.33%, rgba(0, 0, 0, 0.1778) 66.67%, rgba(0, 0, 0, 0.1000) 75.00%, rgba(0, 0, 0, 0.04444) 83.33%, rgba(0, 0, 0, 0.01111) 91.67%, rgba(0, 0, 0, 0.000) 100.0% )
linear-gradient(360deg, rgba(0, 0, 0, 0.9000) 0.000%, rgba(0, 0, 0, 0.8965) 8.500%, rgba(0, 0, 0, 0.8861) 17.00%, rgba(0, 0, 0, 0.8688) 25.50%, rgba(0, 0, 0, 0.8444) 34.00%, rgba(0, 0, 0, 0.8132) 42.50%, rgba(0, 0, 0, 0.7750) 51.00%, rgba(0, 0, 0, 0.7368) 59.50%, rgba(0, 0, 0, 0.7056) 68.00%, rgba(0, 0, 0, 0.6813) 76.50%, rgba(0, 0, 0, 0.6639) 85.00%, rgba(0, 0, 0, 0.6535) 93.50%, rgba(0, 0, 0, 0.6500) 102.0%)
linear-gradient(360deg, rgba(0, 0, 0, 0.8500) 3.000%, rgba(0, 0, 0, 0.8465) 11.08%, rgba(0, 0, 0, 0.8361) 19.17%, rgba(0, 0, 0, 0.8187) 27.25%, rgba(0, 0, 0, 0.7944) 35.33%, rgba(0, 0, 0, 0.7632) 43.42%, rgba(0, 0, 0, 0.7250) 51.50%, rgba(0, 0, 0, 0.6868) 59.58%, rgba(0, 0, 0, 0.6556) 67.67%, rgba(0, 0, 0, 0.6313) 75.75%, rgba(0, 0, 0, 0.6139) 83.83%, rgba(0, 0, 0, 0.6035) 91.92%, rgba(0, 0, 0, 0.6000) 100.0%)
linear-gradient(12deg, rgba(0, 0, 0, 0.8500) 36.00%, rgba(0, 0, 0, 0.8465) 40.58%, rgba(0, 0, 0, 0.8361) 45.17%, rgba(0, 0, 0, 0.8187) 49.75%, rgba(0, 0, 0, 0.7944) 54.33%, rgba(0, 0, 0, 0.7632) 58.92%, rgba(0, 0, 0, 0.7250) 63.50%, rgba(0, 0, 0, 0.6868) 68.08%, rgba(0, 0, 0, 0.6556) 72.67%, rgba(0, 0, 0, 0.6313) 77.25%, rgba(0, 0, 0, 0.6139) 81.83%, rgba(0, 0, 0, 0.6035) 86.42%, rgba(0, 0, 0, 0.6000) 91.00%)
Type System

Typography

display
inherit
120px · 100 · LH 1
Netflix Türkiye - Watch TV Shows Online, Watch Movies Online
headline-lg
inherit
32px · 100 · LH 1
Netflix Türkiye - Watch TV Shows Online, Watch Movies Online
headline-md
inherit
24px · 100 · LH 1
Netflix Türkiye - Watch TV Shows Online, Watch Movies Online
title-lg
inherit
20px · 100 · LH 1.4
Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.
body-lg
inherit
18px · 100 · LH 1.5
Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.
body-md
inherit
16px · 100 · LH 1.5
Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.
label-md
inherit
14px · 100 · LH 1.4
Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.
label-sm
inherit
10px · 100 · LH 1.4
Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.
Detected Font Stacks
var(--hcw--local-design--Text-TextFontFamily)Netflix Sans"Netflix Sans Variable"unsetvar(--hcw--local-design--Select-TextFontFamily)var(--hcw--local-design--Button-TextFontFamily)var(--hcw--local-design--Input-TextFontFamily)NKufi
Structure

Layout

Container
Section padding: — · card padding: —
Grid
12-column reference grid · gap —
Spacing Scale
xs
2px
sm
8px
md
16px
detected
0.125rem
detected
4px
detected
0.3rem
detected
.35em
detected
0.4rem
detected
0.5rem
detected
0.55rem
detected
.67em
detected
1rem
detected
1em
Breakpoints
599.98px600px959.98px960px1280px1600px1920px2560px
Geometry

Shapes

sm
2px
md
8px
lg
16px
r4
0.125rem
r5
0.5rem
r6
1rem
Tokens in Context

Components

card
background{colors.surface}
border1px solid {colors.border}
radius16px
button-primary
background{colors.primary}
radius8px
Animation

Motion

Keyframes 3 found
@keyframes animation-1o3pzgb-autofillStart

      

            

        
@keyframes animation-und0r9-autofillEnd

        

      

            

        
@keyframes loading

        
0%{background-color:rgb(35,35,35);}40%{background-color:rgb(35,35,35);}70%{background-color:rgb(65,65,65);}90%{background-color:rgb(35,35,35);}

      

          

            
Applied Animations

    
animation-und0r9-autofillEndanimation-1o3pzgb-autofillStartloading 4000ms infinite linearnone

            
Easing Curves

    
cubic-bezier(0.32,0.94,0.6,1)cubic-bezier(0.4,0,0.68,0.06)var(--hcw--local-design--Button-Easing)var(--hcw--local-design--Button-EasingHovered)var(--hcw--local-design--Button-EasingDisabled)var(--hcw--local-design--Button-EasingPressed)

            
Transitions

    
noneinherit-webkit-transform 0.2s ease-in-outtransform 0.2s ease-in-out

      

  
  
  
  

    
Proof

    
Live Preview

    

      
    

  


  
  

    
Complete Reference

    
Full design.md Specification

    
Design Specification — Netflix Türkiye - Watch TV Shows Online, Watch Movies Online


FieldValue


Site / Projecthttps://www.netflix.com/vn/


Analyzed on2026-08-27


Analysis modeAutomated code extraction (no AI)




Overview


This design system was extracted programmatically from the source page. It is built on a dark canvas (#000000), ink text (#000000), a vivid accent (#EB3942). All type is set in var(--hcw--local-design--Text-TextFontFamily). Detected font weights: 100, 300, 400, 500, 700, 900. Detected style signatures: glassmorphism; gradient-rich / aurora; technical / mono accents.


Logo asset(s): https://occ.a.nflxso.net/dnmt/api/v6/iL4oJVDYZ8KLSrJ6eG2OwtghbfQ/AAAAAfwxusEeCteu-L_QQ56_G2cohyI1E4BIh2uyr5t9gDhH0CKWHw3NVhndjuF7yQ26z3cYq_lnzY5pP6OarHyiibuiy2jIIa5sIhSvgal1S6u9YDVAyVoX6osPniEKN-dYy77H_pLfOCD7.svg


Color System


Detected palette (by frequency)


HexRGBHSLCount


#0000000, 0, 00° 0% 0%92


#FFFFFF255, 255, 2550° 0% 100%41


#A9A9A9169, 169, 1690° 0% 66%16


#23232335, 35, 350° 0% 14%9


#16161622, 22, 220° 0% 9%5


#E50914229, 9, 20357° 92% 47%5


#808080128, 128, 1280° 0% 50%4


#EB3942235, 57, 66357° 82% 57%4


#2BB87143, 184, 113150° 62% 45%4


#D89D31216, 157, 4939° 68% 52%4


#41414165, 65, 650° 0% 25%4


#19224725, 34, 71228° 48% 19%3


#46151870, 21, 24356° 54% 18%2


#ECECEC236, 236, 2360° 0% 93%2


#210E1733, 14, 23332° 40% 9%2


#465A7E70, 90, 126219° 29% 38%2


#0500425, 0, 66245° 100% 13%2


#0004380, 4, 56236° 100% 11%2


#C11119193, 17, 25357° 84% 41%2


#99161D153, 22, 29357° 75% 34%2




Assigned roles


Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.


TokenHexRGBHSL


--color-background#0000000, 0, 00° 0% 0%


--color-primary#E50914229, 9, 20357° 92% 47%


--color-accent#EB3942235, 57, 66357° 82% 57%


--color-surface#ECECEC236, 236, 2360° 0% 93%


--color-text-primary#0000000, 0, 00° 0% 0%


--color-secondary#0000000, 0, 00° 0% 0%


--color-text-secondary#A9A9A9169, 169, 1690° 0% 66%


--color-border#808080128, 128, 1280° 0% 50%


--color-on-primary#FFFFFF255, 255, 2550° 0% 100%


--color-on-secondary#FFFFFF255, 255, 2550° 0% 100%


--color-on-accent#FFFFFF255, 255, 2550° 0% 100%




Gradients


    

  • radial-gradient(11% 56% at 17% 50%, #461518 0%, transparent 100%),radial-gradient(11% 56% at 83% 50%, #461518 0%, transparent 100%)
    • 

  • `linear-gradient(
    • 



0deg,


transparent 0%,


#6f181d 50%,


transparent 100%


)`


    

  • `linear-gradient(
    • 



180deg,


rgba(0, 0, 0, 0.8000) 0.000%, rgba(0, 0, 0, 0.7889) 8.333%, rgba(0, 0, 0, 0.7556) 16.67%, rgba(0, 0, 0, 0.7000) 25.00%, rgba(0, 0, 0, 0.6222) 33.33%, rgba(0, 0, 0, 0.5222) 41.67%, rgba(0, 0, 0, 0.4000) 50.00%, rgba(0, 0, 0, 0.2778) 58.33%, rgba(0, 0, 0, 0.1778) 66.67%, rgba(0, 0, 0, 0.1000) 75.00%, rgba(0, 0, 0, 0.04444) 83.33%, rgba(0, 0, 0, 0.01111) 91.67%, rgba(0, 0, 0, 0.000) 100.0%


)`


    

  • linear-gradient(360deg, rgba(0, 0, 0, 0.9000) 0.000%, rgba(0, 0, 0, 0.8965) 8.500%, rgba(0, 0, 0, 0.8861) 17.00%, rgba(0, 0, 0, 0.8688) 25.50%, rgba(0, 0, 0, 0.8444) 34.00%, rgba(0, 0, 0, 0.8132) 42.50%, rgba(0, 0, 0, 0.7750) 51.00%, rgba(0, 0, 0, 0.7368) 59.50%, rgba(0, 0, 0, 0.7056) 68.00%, rgba(0, 0, 0, 0.6813) 76.50%, rgba(0, 0, 0, 0.6639) 85.00%, rgba(0, 0, 0, 0.6535) 93.50%, rgba(0, 0, 0, 0.6500) 102.0%)
    • 

  • linear-gradient(360deg, rgba(0, 0, 0, 0.8500) 3.000%, rgba(0, 0, 0, 0.8465) 11.08%, rgba(0, 0, 0, 0.8361) 19.17%, rgba(0, 0, 0, 0.8187) 27.25%, rgba(0, 0, 0, 0.7944) 35.33%, rgba(0, 0, 0, 0.7632) 43.42%, rgba(0, 0, 0, 0.7250) 51.50%, rgba(0, 0, 0, 0.6868) 59.58%, rgba(0, 0, 0, 0.6556) 67.67%, rgba(0, 0, 0, 0.6313) 75.75%, rgba(0, 0, 0, 0.6139) 83.83%, rgba(0, 0, 0, 0.6035) 91.92%, rgba(0, 0, 0, 0.6000) 100.0%)
    • 

  • linear-gradient(12deg, rgba(0, 0, 0, 0.8500) 36.00%, rgba(0, 0, 0, 0.8465) 40.58%, rgba(0, 0, 0, 0.8361) 45.17%, rgba(0, 0, 0, 0.8187) 49.75%, rgba(0, 0, 0, 0.7944) 54.33%, rgba(0, 0, 0, 0.7632) 58.92%, rgba(0, 0, 0, 0.7250) 63.50%, rgba(0, 0, 0, 0.6868) 68.08%, rgba(0, 0, 0, 0.6556) 72.67%, rgba(0, 0, 0, 0.6313) 77.25%, rgba(0, 0, 0, 0.6139) 81.83%, rgba(0, 0, 0, 0.6035) 86.42%, rgba(0, 0, 0, 0.6000) 91.00%)
    • 

  • linear-gradient(7deg, rgba(0, 0, 0, 0.8500) 10.00%, rgba(0, 0, 0, 0.8465) 17.25%, rgba(0, 0, 0, 0.8361) 24.50%, rgba(0, 0, 0, 0.8187) 31.75%, rgba(0, 0, 0, 0.7944) 39.00%, rgba(0, 0, 0, 0.7632) 46.25%, rgba(0, 0, 0, 0.7250) 53.50%, rgba(0, 0, 0, 0.6868) 60.75%, rgba(0, 0, 0, 0.6556) 68.00%, rgba(0, 0, 0, 0.6312) 75.25%, rgba(0, 0, 0, 0.6139) 82.50%, rgba(0, 0, 0, 0.6035) 89.75%, rgba(0, 0, 0, 0.6000) 97.00%)
    • 

  • linear-gradient(360deg, rgba(0, 0, 0, 0.8500) 8.000%, rgba(0, 0, 0, 0.8465) 15.67%, rgba(0, 0, 0, 0.8361) 23.33%, rgba(0, 0, 0, 0.8187) 31.00%, rgba(0, 0, 0, 0.7944) 38.67%, rgba(0, 0, 0, 0.7632) 46.33%, rgba(0, 0, 0, 0.7250) 54.00%, rgba(0, 0, 0, 0.6868) 61.67%, rgba(0, 0, 0, 0.6556) 69.33%, rgba(0, 0, 0, 0.6312) 77.00%, rgba(0, 0, 0, 0.6139) 84.67%, rgba(0, 0, 0, 0.6035) 92.33%, rgba(0, 0, 0, 0.6000) 100.0%)
    • 

  • `radial-gradient(
    • 



50% 500% at 50% -420%,


rgba(64, 97, 231, 0.4) 80%,


rgba(0, 0, 0, 0.1) 100%


)`


    

  • `linear-gradient(
    • 



to right,


rgba(33, 13, 22, 1) 16%,


rgba(184, 40, 105, 1),


rgba(229, 9, 20, 1),


rgba(184, 40, 105, 1),


rgba(33, 13, 22, 1) 84%


)`


> 3 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.


Typography


Primary typeface: var(--hcw--local-design--Text-TextFontFamily) — stack: var(--hcw--local-design--Text-TextFontFamily)


Font stacks (most used first)


    

  • var(--hcw--local-design--Text-TextFontFamily)
    • 

  • Netflix Sans
    • 

  • "Netflix Sans Variable"
    • 

  • unset
    • 

  • var(--hcw--local-design--Select-TextFontFamily)
    • 

  • var(--hcw--local-design--Button-TextFontFamily)
    • 

  • var(--hcw--local-design--Input-TextFontFamily)
    • 

  • NKufi
    • 

  • GraphikTH
    • 

  • "Netflix Sans Debug"
    • 



Derived type scale


TokenSize


display120px


headline-lg32px


headline-md24px


title-lg20px


body-lg18px


body-md16px


label-md14px


label-sm10px




Font sizes (by frequency)


SizeCount


0.8125rem3


1.125rem3


1rem2


1.5rem2


0.625rem1


1.25rem1


4rem1


5rem1


6.25rem1


7.5rem1


0.875rem1


2em1


1em1




Weights in use: 100, 300, 400, 500, 700, 900


Line heights (by frequency)


ValueCount


1.55


13


01




Spacing


Derived spacing scale


TokenValue


xs2px


sm8px


md16px




Raw values (by frequency)


ValueCount


0.125rem5


1rem1


0.3rem1


0.4rem1


0.5rem1


0.55rem1


4px1


.67em1


1em1


.35em1




Borders & Radius


Derived radius tokens


TokenValue


sm2px


md8px


lg16px




Raw values (resolved, by frequency)


RadiusCount


0.125rem7


0.5rem5


04


8px2


inherit1


1rem1




Layout


Container max-width: 960px


Breakpoints


    

  • 599.98px
    • 

  • 600px
    • 

  • 959.98px
    • 

  • 960px
    • 

  • 1280px
    • 

  • 1600px
    • 

  • 1920px
    • 

  • 2560px
    • 



Animation & Motion


Transitions


    

  • none
    • 

  • inherit
    • 

  • -webkit-transform 0.2s ease-in-out
    • 

  • transform 0.2s ease-in-out
    • 



Easing curves


    

  • cubic-bezier(0.32,0.94,0.6,1)
    • 

  • cubic-bezier(0.4,0,0.68,0.06)
    • 

  • cubic-bezier(0.32,0.94,0.6,1)
    • 

  • var(--hcw--local-design--Button-Easing)
    • 

  • var(--hcw--local-design--Button-EasingHovered)
    • 

  • var(--hcw--local-design--Button-EasingDisabled)
    • 

  • var(--hcw--local-design--Button-EasingPressed)
    • 

  • cubic-bezier(0.4,0,0.68,0.06)
    • 



Keyframes


@keyframes animation-1o3pzgb-autofillStart {  }
@keyframes animation-und0r9-autofillEnd {  }
@keyframes loading { 0%{background-color:rgb(35,35,35);}40%{background-color:rgb(35,35,35);}70%{background-color:rgb(65,65,65);}90%{background-color:rgb(35,35,35);} }



Animations


    

  • animation-und0r9-autofillEnd
    • 

  • animation-1o3pzgb-autofillStart
    • 

  • loading 4000ms infinite linear
    • 

  • none
    • 



Effects


    

  • backdrop-filter: blur(30px)
    • 



Source Design Tokens (CSS custom properties)


:root {
  --hcw--layout-container--alignItems: initial;
  --hcw--layout-container--alignItems-xs: initial;
  --hcw--layout-container--alignItems-s: initial;
  --hcw--layout-container--alignItems-m: initial;
  --hcw--layout-container--alignItems-l: initial;
  --hcw--layout-container--alignItems-xl: initial;
  --hcw--layout-container--alignItems-xxl: initial;
  --hcw--layout-container--alignItems-xxxl: initial;
  --hcw--layout-container--flexDirection: initial;
  --hcw--layout-container--flexDirection-xs: initial;
  --hcw--layout-container--flexDirection-s: initial;
  --hcw--layout-container--flexDirection-m: initial;
  --hcw--layout-container--flexDirection-l: initial;
  --hcw--layout-container--flexDirection-xl: initial;
  --hcw--layout-container--flexDirection-xxl: initial;
  --hcw--layout-container--flexDirection-xxxl: initial;
  --hcw--layout-container--justifyContent: initial;
  --hcw--layout-container--justifyContent-xs: initial;
  --hcw--layout-container--justifyContent-s: initial;
  --hcw--layout-container--justifyContent-m: initial;
  --hcw--layout-container--justifyContent-l: initial;
  --hcw--layout-container--justifyContent-xl: initial;
  --hcw--layout-container--justifyContent-xxl: initial;
  --hcw--layout-container--justifyContent-xxxl: initial;
  --hcw--layout-container--columnSpacing: initial;
  --hcw--layout-container--columnSpacing-xs: initial;
  --hcw--layout-container--columnSpacing-s: initial;
  --hcw--layout-container--columnSpacing-m: initial;
  --hcw--layout-container--columnSpacing-l: initial;
  --hcw--layout-container--columnSpacing-xl: initial;
  --hcw--layout-container--columnSpacing-xxl: initial;
  --hcw--layout-container--columnSpacing-xxxl: initial;
  --hcw--layout-container--rowSpacing: initial;
  --hcw--layout-container--rowSpacing-xs: initial;
  --hcw--layout-container--rowSpacing-s: initial;
  --hcw--layout-container--rowSpacing-m: initial;
  --hcw--layout-container--rowSpacing-l: initial;
  --hcw--layout-container--rowSpacing-xl: initial;
  --hcw--layout-container--rowSpacing-xxl: initial;
  --hcw--layout-container--rowSpacing-xxxl: initial;
  --hcw--layout-container--maxWidth: initial;
  --hcw--layout-container--maxWidth-xs: initial;
  --hcw--layout-container--maxWidth-s: initial;
  --hcw--layout-container--maxWidth-m: initial;
  --hcw--layout-container--maxWidth-l: initial;
  --hcw--layout-container--maxWidth-xl: initial;
  --hcw--layout-container--maxWidth-xxl: initial;
  --hcw--layout-container--maxWidth-xxxl: initial;
  --hcw--layout-container--padding: initial;
  --hcw--layout-container--padding-xs: initial;
  --hcw--layout-container--padding-s: initial;
  --hcw--layout-container--padding-m: initial;
  --hcw--layout-container--padding-l: initial;
  --hcw--layout-container--padding-xl: initial;
  --hcw--layout-container--padding-xxl: initial;
  --hcw--layout-container--padding-xxxl: initial;
  --hcw--layout-container--width: inherit;
  --hcw--layout-container--width-xs: inherit;
  --hcw--layout-container--width-s: inherit;
  --hcw--layout-container--width-m: inherit;
}



Do's and Don'ts


Do


    

  • Do reserve the accent #EB3942 for interactive highlights and key moments — it is used sparingly on the source page.
    • 

  • Do keep the canvas at #000000; surfaces should stay within the detected neutral ramp.
    • 

  • Do stick to the detected font weight(s): 100, 300, 400, 500, 700, 900.
    • 



Don't


    

  • Don't introduce colors outside the detected palette — every hue above was found in the source.
    • 

  • Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.
    • 



Design Tokens (copy-paste)


:root {
  --color-background: #000000;
  --color-primary: #E50914;
  --color-accent: #EB3942;
  --color-surface: #ECECEC;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #A9A9A9;
  --color-border: #808080;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: var(--hcw--local-design--Text-TextFontFamily);
  --font-size-display: 120px;
  --font-size-headline-lg: 32px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 10px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --container-max: 960px;
}