# Stream · Design system migration spec

> Source: https://getstream.io  ·  Curated by OpenDesign  ·  en

> This site exemplifies a successful developer-first SaaS landing page, balancing professional trust with clear, actionable information.

## 1. Identity DNA

The design system for Stream is built to function as a clean, professional developer console, translating the brand's real-time API infrastructure into a visual language of clarity and precision. It is a toolkit for building chat, feeds, and video integrations, constructed with the same deliberate, unadorned utility one expects from a well-documented SDK.

**One-liner:** Build chat, feeds, and video integrations faster with Stream's developer-first SDKs.
**Keywords:** developer · real-time · APIs · infrastructure
**Analogy:** A clean, professional developer console for building real-time features.

## 2. Color

The color system is a study in high-contrast minimalism, built on a foundation of white and dark ink. A single, vibrant blue acts as the sole accent, used sparingly to direct focus to primary actions and interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FAFAFA` | card background |
| `--bg-quiet` | `#EFF0F1` | quiet area |
| `--ink` | `#040405` | body text |
| `--ink-soft` | `#323B44` | secondary text |
| `--muted` | `#979CA0` | placeholder |
| `--accent` | `#005FFF` | single accent |
| `--line` | `rgba(13, 23, 33, 0.1)` | divider |

**Color principle:** High-contrast professional minimalism with a single vibrant blue accent.

The principle is absolute restraint, ensuring every chromatic choice serves a functional, not decorative, purpose.

## 3. Typography

The typographic voice is defined by a humanist sans-serif, selected for its technical clarity and neutral authority. Monospace is reserved strictly for code, establishing a clear visual hierarchy between prose and payload.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 500 | -1.2px | Hero headlines |
| h2 | 36px | 1.2 | 500 | -0.6px | Section titles |
| h3 | 24px | 1.2 | 600 | -0.14px | Card headings |
| body | 16px | 1.5 | 400 | 0px | Paragraph text |
| code | 14px | 1.4 | 400 | 0px | Code snippets |
| caption | 12px | 1.4 | 500 | 1.2px | Uppercase badges |

**Type rules:**
- 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.

## 4. Spacing

A consistent 4px base rhythm underpins the entire layout, providing a mathematical foundation for vertical and horizontal alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with generous whitespace in hero and section breaks.

## 5. Surfaces

Surfaces are defined by subtle depth and barely-there separation. Borders are fine, low-opacity lines, and shadows are dialed to near-invisibility to suggest layering without visual weight.

- **Radius:** sm 6px · md 8px · lg 16px · pill 9999px
- **Shadows:**
  - 0px 3px 12px 0px rgba(0, 0, 0, 0)
  - 0px 1px 4px 0px rgba(0, 0, 0, 0.14)
- **Borders:** 1px solid rgba(13, 23, 33, 0.1)

## 6. Layout

The structural skeleton is a centered, responsive container that grounds the layout. A two-column hero establishes the primary content flow, with a flexible grid below accommodating product showcases and feature sets.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard centered container with a two-column hero layout.

## 7. Motion & Interaction

Motion is treated as functional feedback, not embellishment. Transitions use a standardized cubic-bezier easing curve to provide smooth, predictable state changes for background colors, opacity, and shadows.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background-color and opacity transitions on hover states.
  - Subtle box-shadow adjustments during interaction.

- **Hover:** Background-color or opacity shifts with a 0.15s to 0.5s transition.
- **Click:** Immediate state change with subtle transform or shadow feedback.
- **Transition:** Standardized use of cubic-bezier(0.4, 0, 0.2, 1) across all interactive elements.
- **Keyboard:** Visible focus states on interactive components.

## 8. Voice & Don'ts

The editorial voice is professional, developer-focused, and confidently direct, mirroring the tone of excellent technical documentation. Headlines are action-oriented and occasionally punctuated with monospace accents to bridge copy and code.

- **Tone:** Professional, developer-focused, and confident.
- **Headline style:** Direct, action-oriented, and slightly technical.
- **CTA style:** Clear and immediate, using monospace accents like '>_' or '->'.
- **Avoid:** overly casual slang / vague marketing jargon / unsupported technical claims

### Don'ts
- ❌ 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.

The system deliberately avoids heavy shadows, complex gradients, multiple accent colors, and dense layouts, preserving a strictly functional and trustworthy aesthetic.

## System Prompt (paste into AI tool)

```
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.
```