AssemblyAI DESIGN.md
Brands
Voice AI design with deep indigo identity, developer-first surfaces, mono code aesthetics, and speech-intelligence clarity.
At a glance
- Group
- Brands
- Main color
- #5c6bc0Blue design systems
- Fonts
- InterJetBrains Mono
Colors in this file
- #5c6bc0
background
- #ffffff
background
- #0f172a
background
- #e2e8f0
Unnamed
- #22d3ee
Unnamed
- #1a1a2e
Unnamed
- #4ade80
Unnamed
- #f87171
Unnamed
- #fbbf24
Unnamed
- #f8fafc
Unnamed
Voice AI design with deep indigo identity, developer-first surfaces, mono code aesthetics, and speech-intelligence clarity.
1. Visual Theme & Atmosphere
AssemblyAI should feel precise, powerful, and developer-native. The design communicates speech-to-text accuracy, audio intelligence, LeMUR AI, and API-first workflows.
- Mood: technical, trustworthy, fast, developer-friendly
- Density: medium, with API reference panels, audio waveforms, and transcript surfaces
- Character: deep indigo brand, near-black backgrounds, green accuracy accents, mono code throughout
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--aai-indigo | #5C6BC0 | Primary brand CTA and highlights |
--aai-deep | #1A1A2E | Dark surface backgrounds |
--aai-green | #4ADE80 | Transcription confidence and success |
--aai-cyan | #22D3EE | Audio waveform and streaming indicator |
--aai-red | #F87171 | Error and low-confidence states |
--aai-amber | #FBBF24 | Processing / in-progress states |
--surface-card | #FFFFFF | Light content panels |
--surface-dark | #0F172A | Code blocks and terminal panels |
--surface-bg | #F8FAFC | Page background |
--text-primary | #0F172A | Main body and headings |
--border-default | #E2E8F0 | Panel and section borders |
Use indigo for primary interactions. Use cyan for anything related to live audio or streaming. Reserve green strictly for successful transcription states.
3. Typography Rules
css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 58px | 700 | 1.05 |
| Page Title | 38px | 700 | 1.1 |
| Section Title | 26px | 600 | 1.2 |
| Card Title | 20px | 600 | 1.3 |
| Body | 16px | 400 | 1.65 |
| Code | 14px | 400 | 1.7 |
| Label | 12px | 600 | 1.35 |
4. Component Stylings
css.button-primary {
min-height: 42px;
padding: 0 18px;
border: none;
border-radius: 8px;
background: #5C6BC0;
color: #FFFFFF;
font: 600 14px/1 Inter, sans-serif;
}
.transcript-panel {
border: 1px solid #E2E8F0;
border-radius: 12px;
background: #FFFFFF;
padding: 20px 24px;
font: 400 15px/1.8 Inter, sans-serif;
}
.code-block {
border-radius: 12px;
background: #0F172A;
color: #E2E8F0;
padding: 20px 24px;
font: 400 13px/1.7 "JetBrains Mono", monospace;
}
.waveform-bar {
height: 48px;
border-radius: 8px;
background: linear-gradient(135deg, #5C6BC0, #22D3EE);
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-2 | 8px | Word-timestamp spacing |
--space-4 | 16px | Core content rhythm |
--space-6 | 24px | Panel padding |
--space-10 | 40px | Major section gaps |
Show the API call and the result side-by-side wherever possible. Transcript text should have generous line-height for readability.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); }
.shadow-panel { box-shadow: 0 8px 28px rgba(92, 107, 192, 0.12); }
.shadow-dark { box-shadow: 0 20px 48px rgba(15, 23, 42, 0.30); }
Dark panels for code should use stronger shadows to maintain contrast against light page backgrounds.
7. Do's and Don'ts
Do show real transcript output in every example. Do highlight speaker labels with subtle color. Do use mono font for all API keys, timestamps, and JSON. Do not mix indigo and cyan as co-equal actions. Do not use decoration over functional waveform/transcript UI.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stacked transcript, hidden code panel |
| Tablet | 768px | Two-column docs with inline code |
| Desktop | 1200px | Full docs layout, side-by-side API explorer |
Prioritize readable transcript output on every screen size.
9. Agent Prompt Guide
Design like AssemblyAI: deep indigo CTAs, Inter and JetBrains Mono type, dark code surfaces, cyan audio accents, transcript-first layouts, and clean developer documentation hierarchy.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Liveblocks
Brands · Inter
Real-time collaboration infrastructure with a clean developer aesthetic — dark surfaces, electric blue presence indicators, and multiplayer-first UI patterns.
Cloudinary
Brands · Inter
Visual media platform design with official blue foundations, sky-inspired accents, and practical asset workflow clarity.
Qraft Technologies
Brands · Inter
Qraft Technologies (크래프트테크놀로지스) is a Seoul-headquartered AI-fintech that builds quantitative investment products — AI-managed ETFs, an AI hedge fund, and market-intelligence execution engines — and its homepage…
Together AI
Brands · Inter
AI inference platform with a sleek dark aesthetic — deep navy-black surfaces, electric blue-purple brand gradient, and API-first developer UI.
CADDi (キャディ)
Brands · NB International Pro
CADDi builds an AI data platform for manufacturing. Its own company page gives the mission as 「モノづくり産業のポテンシャルを解放する」, the head office in Asakusabashi, Taito-ku, Tokyo, 加藤勇志郎 as CEO and co-founder, and 911 employees as…
Revolut
Brands · Aeonik Pro
Revolut's marketing canvas operates in a high-contrast two-mode system: a near-black storytelling canvas (#000000) that hosts hero bands, product mockups, and the planning section, alternating with white catalogue…