Red Broadcast

Red Broadcast mockup preview
Click to expand

A content-first design system engineered for video consumption at scale. Red Broadcast uses a signature red accent sparingly against clean white and dark surfaces, letting video thumbnails dominate the visual landscape. The aesthetic is efficient and grid-driven — designed for rapid scanning across thousands of videos while maintaining a consistent, recognizable framework that works from mobile to living room screens.

Primary#FF0000
Secondary#065FD4
Neutral#606060
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Page TitleRoboto · 24px · Bold

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

Section TitleRoboto · 20px · Medium

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

Video Title (Grid)Roboto · 14px · Medium

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

Video Title (Watch)Roboto · 20px · Bold

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

Channel NameRoboto · 14px · Medium

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

BodyRoboto · 14px · Regular

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

Body SmallRoboto · 12px · Regular

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

MetadataRoboto · 12px · Regular

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

LabelRoboto · 12px · Medium

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

Button TextRoboto · 14px · Medium

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

CodeRoboto 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 content-first design system engineered for video consumption at scale. Red Broadcast uses a signature red accent sparingly against clean white and dark surfaces, letting video thumbnails dominate the visual landscape. The aesthetic is efficient and grid-driven — designed for rapid scanning across thousands of videos while maintaining a consistent, recognizable framework that works from mobile to living room screens.

Components

Buttons

Inputs

Chips

DefaultSelected

Elevation & Depth

Level 0
Level 1
Level 2
Level 3

Do's & Don'ts

Do

Make video thumbnails the dominant visual element — they drive clicks more than any UI
Use 16:9 aspect ratio consistently for all video thumbnails
Clamp video titles to exactly 2 lines with ellipsis for grid consistency
Show metadata compactly: "channel dot views dot time" format (e.g., "TechChannel 1.2M views 3 days ago")
Prioritize the comment section with clear threading and easy reply interactions

Don't

Overuse the red — reserve it for Subscribe buttons, live indicators, and progress bars only
Add borders or shadows to video cards — let thumbnails sit directly on the background
Auto-play video previews on hover immediately — use a 2-second delay to prevent flickering
Use custom scrollbars — rely on native scrolling for performance
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 7.6 KB
Downloads 608
Copies 213

Use with MCP

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

Don't have the MCP? Install it here