---
name: Deepgram
description: "The site exemplifies a modern 'developer-tools' aesthetic, using a dark theme and vibrant accents to convey technical authority and innovation in the Voice AI space."
version: alpha

colors:
  background: "#0F0F13"
  primary: "#FFFFFF"
  secondary: "#E1E1E5"
  tertiary: "#00F099"
  neutral: "#88888C"
  bg-soft: "#1F1F24"
  muted-soft: "#A9A9AD"
  line: "rgba(44, 44, 51, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-1.2px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.55
    fontWeight: 400
    letterSpacing: "0"
  body-sm:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  mono:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

Build with the most accurate and cost-effective real-time APIs for speech-to-text, text-to-speech, and voice agents.

*The foundational infrastructure layer for voice intelligence, akin to Stripe for payments.*

## Colors

Dark mode dominance with vibrant teal accents to highlight innovation and developer-focused tools.

- **Background (`#0F0F13`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#E1E1E5`)** — uses `ink-soft` token
- **Accent (`#00F099`)** — uses `accent` token
- **Muted (`#88888C`)** — uses `muted` token
- **Borders (`rgba(44, 44, 51, 1)`)** — uses `line` token

## Typography

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

- Display sizes use tight tracking (-1.2px) for impact.
- Body text maintains generous line-height (1.55) for readability.
- Font weights are strictly 400, 500, 600, and 700.
- Geometric sans-serif for headlines conveys modern technical precision.

## Layout

Centered content with clear section breaks. Hero uses full-width with centered text, transitioning to a multi-column grid for features and partners.

*Rhythm:* Consistent 4px grid system with generous vertical spacing (32px, 48px, 64px) to separate distinct content blocks.

## Elevation & Depth

- 0px 24px 48px -12px rgba(38, 44, 52, 0.25)
- 6px 0px 15px 0px rgba(56, 237, 172, 0.2)
- -6px 0px 15px 0px rgba(20, 154, 251, 0.2)
- Borders: 1px solid rgba(44, 44, 51, 1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Primary buttons are solid white with dark text; secondary buttons are transparent with a vibrant teal border. Both use pill-shaped radius.
- **card:** Dark grey cards (#1F1F24) with subtle borders, rounded corners (8-12px), and consistent internal padding (32px).
- **chip:** Pill-shaped badges for categories or features, using the teal accent color for active states.
- **input:** Dark input fields with subtle borders and light text, following the dark theme aesthetic.
- **hero:** Massive, centered headline with vibrant teal gradient text ('Powered by Deepgram'), followed by descriptive text and two prominent CTAs.

## Do's and Don'ts

**Don't:**
- Don't use light or pastel backgrounds — screenshot shows a deep dark theme (#0F0F13) as the primary canvas.
- Don't apply gradients to every element — screenshot uses vibrant teal gradients sparingly, only on the main headline text.
- Don't use small or cluttered typography — screenshot features large, bold display sizes (56px+) with generous line-height.
- Don't use rounded corners on all elements — screenshot uses sharp or subtly rounded corners (4-12px) on cards and buttons, not fully circular except for pill badges.
- Don't use a multi-color palette — screenshot is dominated by dark tones, white text, and a single vibrant teal accent color.
- Don't hide primary actions — screenshot prominently displays 'Sign Up Free' and 'Playground' as large, high-contrast CTAs in the hero section.

---

## System Prompt (paste into AI agent)

```
Deepgram's design system is a dark-mode-first, developer-focused SaaS aesthetic. It positions the brand as a premium, technical infrastructure provider for Voice AI. Key colors are a deep charcoal background (#0F0F13), crisp white ink (#FFFFFF), and a vibrant teal accent (#00F099) used for emphasis. Typography relies on geometric and humanist sans-serif categories with large display sizes (56px+) and tight tracking for headlines. Critical donts: Never use light backgrounds, avoid excessive gradients (use them only on key headlines), and don't shrink CTAs—they must remain large and prominent. The layout is clean and centered, using a 12-column grid with generous spacing to maintain a sense of scale and technical sophistication.
```