# Deepgram · Design system migration spec

> Source: https://deepgram.com  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Deepgram presents itself not as a product to be bought, but as a foundational layer to be built upon. Its design system mirrors the role of a critical API provider: structurally robust, visually restrained, and engineered for developer trust. The system's core analogy is Stripe for payments—a dependable, technical backbone for voice intelligence.

**One-liner:** Build with the most accurate and cost-effective real-time APIs for speech-to-text, text-to-speech, and voice agents.
**Keywords:** Voice AI · Speech-to-Text · Enterprise · Infrastructure · APIs
**Analogy:** The foundational infrastructure layer for voice intelligence, akin to Stripe for payments.

## 2. Color

The color system is built on a principle of dark-mode dominance, using a deep charcoal canvas (#0F0F13) to create a focused, high-contrast environment. A single vibrant teal accent (#00F099) is employed with surgical precision, highlighting innovation and active states without overwhelming the composition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0F0F13` | main background |
| `--bg-soft` | `#1F1F24` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#E1E1E5` | secondary text |
| `--muted` | `#88888C` | placeholder |
| `--muted-soft` | `#A9A9AD` | weak hint |
| `--accent` | `#00F099` | single accent |
| `--line` | `rgba(44, 44, 51, 1)` | divider |

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

Color is used not for decoration, but to signal function and hierarchy within a complex technical interface.

## 3. Typography

Typography is engineered for clarity and authority, pairing a geometric sans-serif for headlines with a humanist face for body text. The system enforces a strict hierarchy of four weights and tight tracking for display sizes, creating a voice that is both modern and technically precise.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 700 | -1.2px | Hero headlines and major section headings |
| body-lg | 18px | 1.55 | 400 | 0 | Primary body copy and descriptions |
| body-sm | 14px | 1.4 | 400 | 0 | Captions, labels, and secondary information |
| mono | 14px | 1.5 | 400 | 0 | Code snippets and technical references |

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

## 4. Spacing

Spacing operates on a consistent 4px grid, but the system's true rhythm is defined by its generous vertical separations.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid system with generous vertical spacing (32px, 48px, 64px) to separate distinct content blocks.

## 5. Surfaces

Surfaces are defined by depth and restraint. Cards and containers use subtle, colored shadows and fine, dark borders to create layered separation from the primary background, avoiding heavy elevation for a more integrated, tool-like feel.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton begins with a strong, full-width hero section centered on a singular message. This transitions into a disciplined, centered column structure with clear section breaks, using a 12-column grid to organize dense feature information without clutter.

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

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

## 7. Motion & Interaction

Motion is applied with the precision of a micro-interaction, not a spectacle. Transitions are smooth and brief, using cubic-bezier easing to provide immediate, polished feedback for hover and click states, reinforcing a sense of technical reliability.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover (0.15s-0.2s).
  - Subtle opacity and filter changes for interactive elements.
  - Gradient animations for visual emphasis on key phrases.

- **Hover:** Subtle background color shifts and text color changes on buttons and links.
- **Click:** Immediate visual feedback through state changes (e.g., button depress or color shift).
- **Transition:** Consistent use of cubic-bezier easing for all property transitions (0.15s-0.3s).
- **Keyboard:** Standard focus rings and logical tab order for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident and declarative, mirroring the system's technical authority. It avoids passive phrasing and casual playfulness in favor of direct, action-oriented language that speaks to building and integration.

- **Tone:** Confident, technical, and forward-looking.
- **Headline style:** Bold, declarative statements that emphasize market leadership and technical superiority.
- **CTA style:** Direct and action-oriented ('Sign Up Free', 'Start Building', 'Playground').
- **Avoid:** Casual or overly playful language. / Excessive jargon without clear context. / Passive or hesitant phrasing.

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

The system deliberately does not use light backgrounds, excessive gradients, or shrunken call-to-action buttons.

## System Prompt (paste into AI tool)

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