StreamFlix Design System

StreamFlix Design System mockup preview
Click to expand

StreamFlix is a dark, binge-worthy design system tailored for video streaming and media catalog platforms. It prioritizes large content thumbnails within dense grid layouts, accented with bold red on deep black surfaces. The system uses colored hover glows and sharp, cinematic typography to create an engaging content-browsing experience.

Color Primary#E11D48
Color Secondary#0F0F0F
Color Tertiary#F5F5F5
Color Success#22C55E
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Oswald · 40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Oswald · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Oswald · 24px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Oswald · 18px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyOpen Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallOpen Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsJetBrains Mono · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

StreamFlix is a dark, binge-worthy design system tailored for video streaming and media catalog platforms. It prioritizes large content thumbnails within dense grid layouts, accented with bold red on deep black surfaces. The system uses colored hover glows and sharp, cinematic typography to create an engaging content-browsing experience.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-red
shadow-hover

Do's & Don'ts

Do

use the red glow shadow on thumbnail hover to draw attention to browseable content
let thumbnails dominate the layout; text is secondary to visual content
use Oswald in uppercase for category row headings to create cinematic impact
apply scale transforms (1.03-1.05) on card hover for a lively browsing feel
keep the navigation bar at surface-sunken to visually anchor the page
reserve the red primary exclusively for play buttons, subscribe CTAs, and the brand logo

Don't

use light backgrounds; the entire experience must remain dark for immersive viewing
overuse the primary red outside of CTAs and branding; most UI should be neutral grays
use heavy borders on content cards; shadows and subtle dividers are preferred
set body text below 14px on dark backgrounds to preserve readability at distance
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.5 KB
Downloads 0
bold dark landing-page media news

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/streamflix and implement it in my code

Don't have the MCP? Install it here