---
name: AssemblyAI
description: "A strong example of a modern developer-focused site that balances technical credibility with clean, accessible design."
version: alpha

colors:
  background: "#FDFCF8"
  primary: "#1D1B16"
  secondary: "#4A4945"
  tertiary: "#3923C7"
  neutral: "#777673"
  bg-soft: "#F5F3EB"
  line: "rgba(74, 73, 69, 0.15)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.8px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"
  mono:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "1.4px"

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

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

---

## Overview

Clean, professional voice AI infrastructure for developers

*A precision tool for building voice applications*

## Colors

Clean, high-contrast base with a single bold accent for primary actions.

- **Background (`#FDFCF8`)** — uses `bg` token
- **Primary text (`#1D1B16`)** — uses `ink` token
- **Secondary text (`#4A4945`)** — uses `ink-soft` token
- **Accent (`#3923C7`)** — uses `accent` token
- **Muted (`#777673`)** — uses `muted` token
- **Borders (`rgba(74, 73, 69, 0.15)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent 8px base grid with generous whitespace for clarity.

## Elevation & Depth

- 0px 4px 20px 4px rgba(29, 27, 22, 0.12)
- Borders: Subtle, thin borders using muted dark colors to define containers without heaviness.

## Shapes

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

## Components

- **button:** Bold, uppercase buttons with high contrast between filled (accent) and outlined variants.
- **card:** Clean containers with thin borders and subtle shadows, often housing interactive or technical content.
- **chip:** Uppercase, monospace labels with thin borders, used for API categories.
- **input:** Minimal styling with clean borders, focusing on functionality.
- **hero:** Large, bold serif headlines paired with concise sans-serif subtext and clear calls to action.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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