# AssemblyAI · Design system migration spec

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

> A strong example of a modern developer-focused site that balances technical credibility with clean, accessible design.

## 1. Identity DNA

AssemblyAI presents itself not as a consumer product, but as **precision infrastructure**. Like a finely machined tool, the design system is engineered for clarity and reliability, providing the foundational components for developers to build voice applications with confidence.

**One-liner:** Clean, professional voice AI infrastructure for developers
**Keywords:** infrastructure · voice · developer · precision
**Analogy:** A precision tool for building voice applications

## 2. Color

The color system is built on a foundation of warm off-whites and deep dark browns, establishing a high-contrast, professional base. A single, authoritative blue-purple accent is reserved exclusively for primary actions, creating a clear and unambiguous hierarchy of interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FDFCF8` | main background |
| `--bg-soft` | `#F5F3EB` | card background |
| `--ink` | `#1D1B16` | body text |
| `--ink-soft` | `#4A4945` | secondary text |
| `--muted` | `#777673` | placeholder |
| `--accent` | `#3923C7` | single accent |
| `--line` | `rgba(74, 73, 69, 0.15)` | divider |

**Color principle:** Clean, high-contrast base with a single bold accent for primary actions.

This restrained approach ensures the interface remains focused and the user's attention is directed toward critical tasks.

## 3. Typography

The typographic voice is a deliberate pairing: a transitional serif commands large display headlines, lending scale and gravitas, while a clean geometric sans-serif handles body text and navigation for optimal readability. A monospace family is integrated for code snippets and technical labels, reinforcing the system's developer-centric purpose.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 400 | -2.8px | Main headlines |
| body | 16px | 1.3 | 400 | 0 | General text |
| mono | 14px | 1.3 | 400 | 1.4px | Code and technical labels |

**Type rules:**
- Use transitional serif for large display headlines
- Use geometric sans for body and navigation
- Use monospace for code snippets and technical UI elements

## 4. Spacing

A consistent 8px grid establishes a reliable vertical and horizontal rhythm, with generous whitespace used to separate content blocks and reduce cognitive load.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 8px base grid with generous whitespace for clarity.

## 5. Surfaces

Depth is communicated subtly through a single, soft box-shadow on elevated containers, providing just enough separation from the background. Borders are thin and muted, defining structure without adding visual weight.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - 0px 4px 20px 4px rgba(29, 27, 22, 0.12)
- **Borders:** Subtle, thin borders using muted dark colors to define containers without heaviness.

## 6. Layout

The layout skeleton is defined by generous spacing and a clear hierarchy, separating navigation, hero sections, and content modules into distinct, unambiguous horizontal zones. This structure prioritizes scannability and allows each component to occupy its own spatial territory.

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

**Skeleton:** Generous spacing with a clear hierarchical structure between navigation, hero, and content sections.

## 7. Motion & Interaction

Motion is employed with restraint, serving functional clarity over decoration. Subtle transitions of 150ms to 220ms on hover, focus, and state changes provide immediate feedback while maintaining the system's professional demeanor.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle transitions on hover and focus for interactive elements
  - Smooth state changes for UI components

- **Hover:** Subtle color or opacity changes on buttons and navigation links.
- **Click:** Immediate visual feedback through state changes.
- **Transition:** Standard 150ms to 220ms transitions for smooth UI updates.
- **Keyboard:** Focusable elements have clear outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, authoritative, and developer-focused, mirroring the precision of the visual system. Language is direct and unambiguous, avoiding informal tone or decorative flourish in favor of technical clarity.

- **Tone:** Professional, authoritative, and developer-focused.
- **Headline style:** Large, impactful serif headlines that convey scale and importance.
- **CTA style:** Direct, uppercase, and action-oriented.
- **Avoid:** Informal language / Excessive decoration / Ambiguous terminology

### Don'ts
- ❌ Don't use playful or rounded fonts — screenshot shows a mix of transitional serif and geometric sans.
- ❌ Don't use bright, multi-color gradients — screenshot shows a clean, mostly monochromatic palette with a single accent.
- ❌ Don't clutter the interface with too many elements — screenshot shows generous whitespace and clear hierarchy.
- ❌ Don't use lowercase for primary calls to action — screenshot shows all uppercase for buttons and technical labels.
- ❌ Don't use heavy, bold weights for body text — screenshot shows a consistent 400 weight across most text.
- ❌ Don't use complex, layered shadows — screenshot shows a single, subtle box-shadow on elevated elements.

The system deliberately avoids playful typography, multi-color gradients, and interface clutter, committing instead to a monochromatic palette and stark, uppercase calls to action.

## System Prompt (paste into AI tool)

```
This is a clean, professional website for a voice AI infrastructure company. The design uses a transitional serif font for large display headlines and a geometric sans-serif for body text, creating a sophisticated yet modern feel. The primary accent color is a deep blue/purple (#3923C7), used for key actions like 'SIGN UP FREE' and 'GET STARTED'. The background is a warm off-white (#FDFCF8) with a slightly darker off-white (#F5F3EB) for subtle surface differentiation. Text is primarily a very dark brown/black (#1D1B16) for high contrast. Critical donts: avoid playful fonts, avoid multi-color gradients, and avoid cluttering the interface. The layout is spacious with generous padding, emphasizing clarity and technical precision.
```