CURATED · OPEN · FREE

Stream

Build chat, feeds, and video integrations faster with Stream's developer-first SDKs.

devchat

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://getstream.io

📦 Browse pack contents →

Identity DNA

developerreal-timeAPIsinfrastructure

A clean, professional developer console for building real-time features.

Color

#005FFFAccent

#040405Ink

#323B44Ink soft

#FFFFFFBG

#FAFAFABG soft

#EFF0F1BG quiet

#979CA0Muted

rgba(13, 23, 33, 0.1)Line

High-contrast professional minimalism with a single vibrant blue accent.

Typography

humanist-sans · monospace

display48px · 500
h236px · 500
h324px · 600
body16px · 400
code14px · 400
caption12px · 500

Display and heading weights are consistently 500 to 600. · Body text uses a standard 400 weight for maximum readability. · Monospace font is used exclusively for inline code and command blocks.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px base with generous whitespace in hero and section breaks.

Surfaces

sm · 6px

md · 8px

lg · 16px

pill · 9999px

1px solid rgba(13, 23, 33, 0.1)

0px 3px 12px 0px rgba(0, 0, 0, 0) · 0px 1px 4px 0px rgba(0, 0, 0, 0.14)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard centered container with a two-column hero layout.

Motion & Interaction

150msmicro

300mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth background-color and opacity transitions on hover states. · Subtle box-shadow adjustments during interaction.

Background-color or opacity shifts with a 0.15s to 0.5s transition. · Immediate state change with subtle transform or shadow feedback.

Components

button Solid blue rounded pill for primary actions; white rounded pill with border for secondary.
card White cards with subtle gray borders and rounded corners (16px) used for use-case showcases.
chip Small uppercase badges with light backgrounds and rounded corners.
input Code block styling with monospace font and a dark background for command prompts.
hero Large left-aligned text block paired with a floating, overlapping product UI mockup on the right.

Voice & Don'ts

Tone Professional, developer-focused, and confident.
Headlines Direct, action-oriented, and slightly technical.
CTAs Clear and immediate, using monospace accents like '>_' or '->'.

Don't use heavy drop shadows — screenshot shows very subtle, almost invisible shadows.
Don't use complex gradients — screenshot shows mostly flat white and light gray backgrounds.
Don't use decorative serif fonts — screenshot uses a clean humanist sans-serif for all text.
Don't use neon or varied accent colors — screenshot shows a strict blue-only accent strategy.
Don't use sharp corners on primary buttons — screenshot uses fully rounded pill shapes.
Don't use dense layouts — screenshot shows generous padding and clear section separation.
Avoid: overly casual slang
Avoid: vague marketing jargon
Avoid: unsupported technical claims

Inside the pack — real screenshots

Stream — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Stream's website is a developer-focused SaaS landing page using a clean, high-contrast design. The primary palette consists of a white background, dark ink text, and a single vibrant blue accent (#005FFF). Typography relies on a humanist sans-serif for headings and body, with a monospace font for code snippets. Critical design elements include generous whitespace, rounded pill buttons, and subtle card borders. Don't use dark mode by default. Don't use decorative or serif fonts. Don't use multiple competing accent colors. The layout is centered and professional, prioritizing readability and clear calls to action for developers.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko