Red Cinema

A cinematic, immersive design system built for content consumption in the dark. Red Cinema pairs a bold, unmistakable red with deep blacks and atmospheric grays to create a theater-like viewing experience. The aesthetic is dramatic and confident — large imagery dominates, typography is bold and direct, and the interface disappears to let content take center stage.

Primary#E50914
Secondary#564D4D
Neutral#808080
Background#141414
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Hero TitleBebas Neue · 72px · Regular

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

Featured TitleBebas Neue · 48px · Regular

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

Section TitleBebas Neue · 28px · Regular

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

Card TitleInter · 16px · SemiBold

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

BodyInter · 14px · Regular

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

Body SmallInter · 13px · Regular

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

LabelInter · 11px · SemiBold

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

CaptionInter · 12px · Regular

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

CodeJetBrains Mono · 14px · Regular

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

Spacing

Base: 8px

A cinematic, immersive design system built for content consumption in the dark. Red Cinema pairs a bold, unmistakable red with deep blacks and atmospheric grays to create a theater-like viewing experience. The aesthetic is dramatic and confident — large imagery dominates, typography is bold and direct, and the interface disappears to let content take center stage.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

DefaultSelectedBordered

Scroll Row

Default

Tooltips

Default

Topbar

Elevation & Depth

1
2
3

Do's & Don'ts

Do

Let content (artwork) be the hero — UI should be invisible when content is visible.
Use Bebas Neue sparingly for maximum impact — only for section headers and featured titles.
Create depth with gradient overlays on images (bottom fade to background color).
Use horizontal scroll rows as the primary browsing pattern.
Scale artwork on hover for a tactile, responsive browsing experience.

Don't

Use the red for anything except primary CTAs and the logo — overuse dilutes its power.
Show borders on content tiles — artwork should float on the dark background.
Use light backgrounds — the entire experience lives in darkness.
Clutter the screen — every element competes with the content, so show only what's essential.
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 6.8 KB
Downloads 41
Copies 5
bold cinematic dark streaming

Use with MCP

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

Don't have the MCP? Install it here