Purple Stream

Purple Stream mockup preview
Click to expand

Purple Stream is a bold, dark-mode-native design system inspired by the world's leading live streaming platform. It pulses with electric purple energy against deep black backgrounds, designed to keep viewers immersed in live content for hours. The aesthetic is gaming-adjacent and entertainment-first — high contrast, vibrant accents, and an interface that recedes behind the stream while providing dense, real-time information through chat, overlays, and interactive panels.

Primary#9146FF
Secondary#BF94FF
Neutral#ADADB8
Background#0E0E10
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

stream titlesInter · 18px · Bold

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

channel namesInter · 14px · SemiBold

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

body chat descriptionsInter · 13px · Regular

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

category tagsInter · 12px · SemiBold

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

badges timestampsInter · 11px · Regular

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

section titlesInter · 16px · SemiBold

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

page headingsInter · 24px · SemiBold

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

marketing heroInter · 34px · SemiBold

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

Spacing

Base: 4px

Purple Stream is a bold, dark-mode-native design system inspired by the world's leading live streaming platform. It pulses with electric purple energy against deep black backgrounds, designed to keep viewers immersed in live content for hours. The aesthetic is gaming-adjacent and entertainment-first — high contrast, vibrant accents, and an interface that recedes behind the stream while providing dense, real-time information through chat, overlays, and interactive panels.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

categorylive

Elevation & Depth

base
panel
modal

Do's & Don'ts

Do

Use #9146FF purple as the signature interactive color
Keep the interface dark — the video stream is the brightest element
Support dense real-time information without clutter
Use hover-to-preview on stream thumbnails
Use uppercase with letter-spacing for small labels and buttons

Don't

Use white or light backgrounds anywhere in the main interface
Let UI elements compete with the video player for visual attention
Animate slowly — all transitions should be under 100ms
Use the primary purple for body text
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 7.1 KB
Downloads 122
Copies 26
bold dark gaming streaming

Use with MCP

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

Don't have the MCP? Install it here