Stream Green

Stream Green captures the electric, content-forward energy of modern streaming platforms. Built around a vivid green-on-dark palette, it prioritizes content discovery with minimal UI chrome. The aesthetic is sleek, immersive, and optimized for browsing large media libraries in low-light environments.

Primary#1CE783
Secondary#2BF298
Neutral#272C30
Background#040405
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayDM Sans · 48px · Bold

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

h2/page titlesDM Sans · 32px · Bold

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

h3/section headersDM Sans · 24px · Bold

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

h4/card titlesDM Sans · 20px · Bold

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

bodyDM Sans · 16px · Regular

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

body small/labelsDM Sans · 14px · Medium

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

caption/metadataDM Sans · 12px · Medium

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

Spacing

Base: 4px

Stream Green captures the electric, content-forward energy of modern streaming platforms. Built around a vivid green-on-dark palette, it prioritizes content discovery with minimal UI chrome. The aesthetic is sleek, immersive, and optimized for browsing large media libraries in low-light environments.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

DefaultActive

Elevation & Depth

Level 2
thumbnail
active

Do's & Don'ts

Do

Use the green sparingly as an accent — let content thumbnails be the visual focus
Maintain high contrast ratios (minimum 4.5:1) for all text on dark backgrounds
Use smooth hover transitions (150-200ms ease) to feel responsive without being jarring
Prioritize content imagery over UI chrome; reduce visual noise wherever possible
Use the muted gray (#B0B3B8) for secondary text to establish clear hierarchy

Don't

Use green for large background fills; it should highlight, not dominate
Add visible borders to content cards — use elevation and background shifts instead
Use light mode — this system is designed exclusively for dark environments
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 6.0 KB
Downloads 27
Copies 0

Use with MCP

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

Don't have the MCP? Install it here