---
name: Stream
description: "This site exemplifies a successful developer-first SaaS landing page, balancing professional trust with clear, actionable information."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#040405"
  secondary: "#323B44"
  tertiary: "#005FFF"
  neutral: "#979CA0"
  bg-soft: "#FAFAFA"
  bg-quiet: "#EFF0F1"
  line: "rgba(13, 23, 33, 0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.2px"
  h2:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.6px"
  h3:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.14px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  code:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "1.2px"

rounded:
  sm: 6px
  md: 8px
  lg: 16px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#040405`)** — uses `ink` token
- **Secondary text (`#323B44`)** — uses `ink-soft` token
- **Accent (`#005FFF`)** — uses `accent` token
- **Muted (`#979CA0`)** — uses `muted` token
- **Borders (`rgba(13, 23, 33, 0.1)`)** — uses `line` token

## Typography

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

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

## Layout

Standard centered container with a two-column hero layout.

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

## Elevation & Depth

- 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)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 16px
- `pill`: 9999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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