返回设计库
N

Netflix

Netflix

访问网站

Streaming platform. Rich red on deep black. Cinematic full-viewport imagery. Content discovery through horizontal carousels.

Netflix红电影级全屏横向滚动深色沉浸内容发现

配色方案

primary
secondary
background
surface
text
muted
border

字体规范

标题字体Bebas Neue, Arial Black, sans-serif
正文字体Helvetica Neue, Helvetica, Arial, sans-serif
基础字号16px
行高1.4
字重400, 500, 700, 900

标题层级

h1Netflix Heading
h2Netflix Heading
h3Netflix Heading
h4Netflix Heading

DESIGN.md

# Netflix Design System

## Visual Theme & Atmosphere
Cinematic immersion. Bold red (#E50914) on deep black (#141414). Full-viewport hero images with content flowing underneath. Horizontal carousels for discovery. Every screen feels like a movie theater.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #E50914 | Netflix Red |
| Secondary | #B20710 | Red hover/dark |
| Background | #141414 | Deep black |
| Surface | #1F1F1F | Cards, panels |
| Text | #FFFFFF | White text |
| Muted | #A3A3A3 | Secondary text |
| Border | #333333 | Subtle dividers |

## Typography Rules
- **Headings**: Bebas Neue or bold condensed sans
- **Body**: Helvetica Neue, clean sans-serif
- **Base Size**: 16px

## Component Stylings
- **Hero**: Full viewport image, centered title, CTA buttons
- **Carousels**: Horizontal scroll rows of poster cards
- **Cards**: Image-first, hover scale effect, rounded corners

## Agent Prompt Guide
Deep black background, bold red accent, cinematic hero images, horizontal carousels, poster-style cards with hover scale.

常见问题

Netflix 的设计风格是什么?

Streaming platform. Rich red on deep black. Cinematic full-viewport imagery. Content discovery through horizontal carousels.

Netflix 使用什么主色调?

Netflix 的主色调是 #E50914,背景色为 #141414,文本色为 #FFFFFF。

Netflix 使用什么字体?

标题字体: Bebas Neue, Arial Black, sans-serif。正文字体: Helvetica Neue, Helvetica, Arial, sans-serif。基础字号: 16px。

如何在项目中使用 Netflix 设计系统?

点击上方 DESIGN.md 代码块中的复制按钮,将完整设计规范复制到你的项目中。AI Coding 工具(如 Cursor)可以直接读取 DESIGN.md 来生成符合 Netflix 风格的代码。

探索更多设计系统

发现 50+ 精选设计系统,为你的 AI Coding 项目提供设计灵感。

查看全部设计系统