How to use

Use the AssemblyAI brand design system with your AI coding tool of choice. It includes tokens, brand guidelines, fonts, icons, and logos. Build marketing websites, decks, assets, ad creative, landing pages, and micro-sites.

Use the AssemblyAI brand design system (version 1.1). Clone the repo https://github.com/AssemblyAI-Marketing/assemblyai-website and review README.md and public/brand-design-system/assemblyai-brand-design-system.md before starting — the BrandDesignSystem.md file is the source of truth for tokens, components, and brand rules. Also use the AssemblyAI Claude skills (for example /brand-design-system, /assemblyai-content, and /assemblyai-brand-voice) for any content or brand work. When I prompt you to build, use only the existing patterns, components, layouts, and visual treatments in the design system. Do not create new UI patterns, components, layouts, or visual treatments. Follow the structure, behavior, and visual language already established.

Using the AssemblyAI design system, build a new use-case page for [USE CASE, e.g. AI medical scribes]. Compose it only from existing components — top nav, a hero, section headers, feature grids or 3-ups, customer proof, river-flow sections, an inline CTA, FAQs, and the global footer. Keep all tokens, type, color, and motion from the design system, and draw copy direction from /assemblyai-content and /positioning. Do not invent new section patterns.

Using the AssemblyAI design system, design a visual to post on social media for [TOPIC OR LAUNCH]. Use only brand colors (Cobolt is the single accent), Oceanic Text headings, Modern Gothic Mono eyebrows and labels, and the AssemblyAI logos and Material Symbols icons. Keep it on-brand, precise, and developer-credible — no new colors or typefaces.

Using the AssemblyAI design system, build a slide deck for [TOPIC] with the /deck-template skill. Pick layouts by their selection criteria, fill the content slots, and emit on-brand HTML slides using design-system token classes only. Cobolt is the only accent; headings are Oceanic Text, eyebrows and labels are Modern Gothic Mono.

Using the AssemblyAI design system, create a social ad/asset for [CAMPAIGN] with the /supporting-imagery skill. Let it pick the right style (Up to seven: UI & Code, Demos, Maps, Pure Abstract, Literal × Abstract, Graphs, Diagrams) and build the asset from design-system tokens, fonts, color, logos, and Material Symbols icons. Cobolt is the only accent.

This design system Markdown file is the source of truth for agents and humans. It contains everything you need to know about the AssemblyAI brand design system.

Color palette

Named scales are the brand language. Cobolt is the only accent and CTA color, running deep (500) to light (100). Black is a warm text and surface scale. White and Neutral carry the warm off-white backgrounds and borders. Blush is reserved for error and highlight states. Click any swatch to copy the hex.

Typography

Three fonts, each with a clear role. Oceanic Text is the serif display face for all headings, set with tight negative tracking. UN 11ST carries body copy. Modern Gothic Mono handles eyebrows, labels, and CTAs in uppercase.

Spacing and layout

The spacing scale runs 4, 8, 12, 16, 24, 32, 40, 48, 80, 120 px, exposed as tokens --spacing-1 through --spacing-12. Section padding is 120px vertical and 148px horizontal on the 1440px canvas.

Corners and border radius

The radius scale runs 2, 4, 8, 12, 16, 24px, with a full 9999px reserved for pills like avatars and tags. Large CTAs use the 4px radius; nav-scale CTAs (tertiary and quaternary) use 2px. Rounding stays restrained to keep the brand precise.

Buttons and CTAs

CTAs are rectangular with a 4px radius (--radius-sm), 40px tall, set in Modern Gothic Mono at 14px uppercase with 1.4px letter-spacing. Primary uses Cobolt 500 with a Cobolt 300 hover. Secondary is outlined and fills on hover. Nav-scale tertiary and quaternary CTAs are smaller, 32px tall with a 2px radius. Cobolt is the only CTA color. On dark backgrounds, switch to the lighter Cobolt dark variants.

Primitives

Primitives are the smallest building blocks in the component explorer (/brand-design-system/components/primitives). Everything else composes from these. Buttons and CTAs are documented above.

Icons

The icon system is Material Symbols, Google's outlined variable icon font. There is no custom icon set and no decorative accent dot. The Icon primitive renders a material-symbols-outlined span with axes FILL, wght, GRAD, and opsz. Default size 24, weight 400, outline (FILL 0). Color follows text. Use Cobolt 500 only as a deliberate accent. Browse and pick names at fonts.google.com/icons.

<!-- Load the font in <head> -->
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<!-- 24px outlined -->
<span class="material-symbols-outlined">check_circle</span>

<!-- filled, 20px, via the Icon component -->
<Icon name="arrow_forward" size={20} filled />

Component library

These are the only approved section components, rendered live below from the real site components, with light and dark variants where they exist. Compose pages from these and do not invent new section patterns. Jump to a category, or browse the standalone views at /brand-design-system/components/<section>.

Navigation

Top navigation bars. Hover a nav link to open its dropdown.

Top Nav

Main site navigation with logo, links, and CTA pair. Hover a nav link (Platform, Customers, Developers, Resources) to open its dropdown.

Close menu

Get started Log in

platform

Platform overview

Models, APIs, and infrastructure in one place. Build voice into any product, on any stack.

products

Pre-recorded Speech-to-Text API Realtime Speech-to-Text API Speech Understanding API Voice Agent API Guardrails LLM Gateway

deployments

Self-Hosted Voice AI Cloud

use cases

AI Scribes AI Notetakers Agent Assist Call Analytics Conversation Intelligence Medical Transcription Voice Agents

customers

All customer stories

Top Voice AI companies are building with Assembly.

See all stories

Zoom leverages AssemblyAI to help advance its AI research and development.

Read the story

Siro achieves a 90% reduction in customer complaints and support tickets.

Watch the video

resources

Documentation API Reference Cookbooks Support Changelog Status

Latest Release

Voice Agent API

Voice agents that get it right, respond instantly, and ship the same day with our new Voice Agent API

Learn more

resources

Blog Partners Research Benchmarks Security

Close menu

Get started Log in

platform

Platform overview

Models, APIs, and infrastructure in one place. Build voice into any product, on any stack.

products

Pre-recorded Speech-to-Text API Realtime Speech-to-Text API Speech Understanding API Voice Agent API Guardrails LLM Gateway

deployments

Self-Hosted Voice AI Cloud

use cases

AI Scribes AI Notetakers Agent Assist Call Analytics Conversation Intelligence Medical Transcription Voice Agents

customers

All customer stories

Top Voice AI companies are building with Assembly.

See all stories

Zoom leverages AssemblyAI to help advance its AI research and development.

Read the story

Siro achieves a 90% reduction in customer complaints and support tickets.

Watch the video

resources

Documentation API Reference Cookbooks Support Changelog Status

Latest Release

Voice Agent API

Voice agents that get it right, respond instantly, and ship the same day with our new Voice Agent API

Learn more

resources

Blog Partners Research Benchmarks Security

Top Nav Tertiary

Sub-navigation tabs for product pages.

Heroes

Hero sections for top of page. Large headings with CTA pairs.

Hero Center

Centered hero with heading, body text, and CTA pair.

4.6 stars

Build anything on AssemblyAI

Voice Agents, AI Scribe, Conversational Intelligence, Agent Assist, Captioning — one API for all your enterprise voice workloads.

Get started Learn more

4.6 stars

Build anything on AssemblyAI

Voice Agents, AI Scribe, Conversational Intelligence, Agent Assist, Captioning — one API for all your enterprise voice workloads.

Get started Learn more

Hero Center Primary

Centered hero with eyebrow, H2 heading, body text, and CTA pair.

Security

Pricing built for innovation

Voice Agents, AI Scribe, Conversational Intelligence, Agent Assist, Captioning — one API for all your enterprise voice workloads.

Get started Learn more

Security

Pricing built for innovation

Voice Agents, AI Scribe, Conversational Intelligence, Agent Assist, Captioning — one API for all your enterprise voice workloads.

Get started Learn more

Hero Left

Left-aligned hero with heading, CTA pair, and body text on the right.

4.6 stars

Pricing built for innovation

Get started Learn more

Start free. $0.21/hr after that — no contracts, no minimums, no credit card required.

4.6 stars

Pricing built for innovation

Get started Learn more

Start free. $0.21/hr after that — no contracts, no minimums, no credit card required.

Hero Left Product Below

Left-aligned hero with product image/demo slot below the text.

Speech-to-Text API

Speech-to-Text API

Get started Learn more

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Product image / demo slot

Speech-to-Text API

Speech-to-Text API

Get started Learn more

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Product image / demo slot

Hero Left Product Right

Left-aligned hero with product image/demo slot to the right.

Security

Pricing built for innovation

Start free. $0.21/hr after that — no contracts, no minimums, no credit card required.

Get started Learn more

Product image / demo slot

Security

Pricing built for innovation

Start free. $0.21/hr after that — no contracts, no minimums, no credit card required.

Get started Learn more

Product image / demo slot

Section headers

Section headers in left-aligned and centered layouts.

Stats

Statistic display sections, centered or left-aligned.

Customer proof

Social proof: customer logos, quotes, and testimonials.

Primary

Alternating quote cards and logo grid cells. Overflows horizontally.

2x

increase in free-to-paid conversion rate

“We needed a provider that could scale with us — offering unlimited concurrent streams, fair pricing, and responsive support.”

80%

increase in customer satisfaction

“Assembly has saved us countless hours managing models, and provided exceptional accuracy.”

75%

engineering time savings on infrastructure

2x

increase in free-to-paid conversion rate

“We needed a provider that could scale with us — offering unlimited concurrent streams, fair pricing, and responsive support.”

80%

increase in customer satisfaction

“Assembly has saved us countless hours managing models, and provided exceptional accuracy.”

75%

engineering time savings on infrastructure

2x

increase in free-to-paid conversion rate

“We needed a provider that could scale with us — offering unlimited concurrent streams, fair pricing, and responsive support.”

80%

increase in customer satisfaction

“Assembly has saved us countless hours managing models, and provided exceptional accuracy.”

75%

engineering time savings on infrastructure

2x

increase in free-to-paid conversion rate

“We needed a provider that could scale with us — offering unlimited concurrent streams, fair pricing, and responsive support.”

80%

increase in customer satisfaction

“Assembly has saved us countless hours managing models, and provided exceptional accuracy.”

75%

engineering time savings on infrastructure

Secondary

Heading + horizontal logo row with spacing.

Trusted by the world’s leading enterprises

Trusted by the world’s leading enterprises

Secondary 2

Bordered logo cells in a horizontal overflow strip. No heading.

Tertiary

Heading + bordered logo cells in a horizontal overflow strip.

Trusted by the world’s leading enterprises

Trusted by the world’s leading enterprises

Cards

Content cards with text and image slots, left and right.

Feature grids

Multi-card grid layouts for features and use cases.

Pricing

Pricing card layouts and comparison matrix.

3-up

Three-column layouts with icons, titles, and descriptions.

FAQs

Accordion FAQ sections with expandable pairs.

Inline CTA

Inline call-to-action banners for mid-page conversion.

River flow

Alternating content blocks with text panels and media.

Site structure

The site uses Astro file-based routing: a file at src/pages/<path>.astro serves at /<path>, a folder becomes a URL segment, and a [slug].astro file is a dynamic route. Use this map to decide where a new page belongs before creating one. Most new pages slot into an existing folder rather than the top level.

src/pages/
├── index.astro                          /                       Homepage: brand + product overview
├── about · careers · newsroom           /about · /careers …     Company: story, hiring, press
├── pricing · enterprise                 /pricing · /enterprise  Plans, and the enterprise pitch
├── security · benchmarks · changelog    /security …             Trust, proof, release notes
├── products.astro + products/      /products · /products/* Product index + one page per product
├── solutions/                          /solutions/*            Industry / use-case pages
├── features/                           /features/*             Single-capability deep-dives
├── deployments/                        /deployments/*          Cloud vs self-hosted
├── compare/                            /compare/*              Competitor comparisons
├── universal-2 · universal-3-pro …      /universal-*            Model launch / landing pages
├── blog + blog/[slug]                 /blog · /blog/:slug     Index + posts (dynamic)
├── customers · research · partners ·    …/:slug                Index + entries (dynamic collections)
│   legal  (each: index + [slug])
├── contact/                            /contact/*              Lead-capture forms by intent
├── spotlight · assembly-required ·      /spotlight …            Programs, video series, campaigns
│   explore/
├── listen · pete · v2                   /listen · /pete · /v2   Microsites and experiments
├── api/                                /api/*                  Backend endpoints (not pages)
└── design-system/             /internal/*             Internal-only (this design system)

Content and AI skills

Marketing content for AssemblyAI is produced with a set of Claude skills. Invoke a skill with its slash name, for example /assemblyai-content. Use these as the on-brand path for any copy, blog, or content task.

Planned skills (placeholders)

Skills we should have for marketing work but have not built yet. These are placeholders. Create them as dedicated, AssemblyAI-specific skills.

Deck template Built

A reusable AssemblyAI slide deck system — the working implementation of the brand rules in assemblyai-slides-guidelines.md. Slides are self-contained HTML authored on a native 1920×1080 canvas and scaled to fit, composed entirely from fixed tokens and reusable components.

A few layouts at a glance — 39 reference slides span six families (Title / Section · BIG TEXT · GRID · 4 COL · Top / Bottom + COL · Editorial). Open deck-template/examples.html for the full set.

CSS variables

Complete :root token block from the AssemblyAI @theme. Color scales, semantic aliases, fonts, spacing, and radius. Copy and paste into any project.

:root {
  /* ── Cobolt (brand) ── */
  --color-cobolt-500:   #3923c7;  /* primary brand / primary CTA */
  --color-cobolt-400:   #614fd2;
  --color-cobolt-300:   #887bdd;  /* CTA hover / dark-mode primary */
  --color-cobolt-200:   #b0a7e9;
  --color-cobolt-100:   #d7d3f4;

  /* ── Black (warm) ── */
  --color-black-500:    #1d1b16;  /* headings */
  --color-black-400:    #4a4945;  /* body text */
  --color-black-300:    #777673;  /* muted text */
  --color-black-200:    #a5a4a2;  /* faint text */
  --color-black-100:    #d2d1d0;

  /* ── White (warm) ── */
  --color-white-100:    #ffffff;
  --color-white-200:    #fdfcf8;  /* page background */
  --color-white-300:    #f5f3eb;

  /* ── Neutral ── */
  --color-neutral-100:  #ecebe5;
  --color-neutral-200:  #dad7cb;
  --color-neutral-300:  #c7c3b2;  /* border */

  /* ── Blush (error / highlight accent) ── */
  --color-blush-200:    #f4d4d0;
  --color-blush-300:    #ec9d92;
  --color-blush-500:    #e39389;

  /* ── Semantic aliases ── */
  --color-page-bg:      #fdfcf8;
  --color-text:         #4a4945;
  --color-text-dark:    #1d1b16;
  --color-text-muted:   #777673;
  --color-text-faint:   #a5a4a2;
  --color-border:       #c7c3b2;
  --color-error:        #F04438;

  /* ── Fonts ── */
  --font-display:       'Oceanic Text', Georgia, serif;
  --font-body:          'UN 11ST', system-ui, sans-serif;
  --font-mono:          'Modern Gothic Mono', monospace;

  /* ── Spacing (4,8,12,16,24,32,40,48,80,120) ── */
  --spacing-1:  4px;   --spacing-2:  8px;
  --spacing-3:  12px;  --spacing-4:  16px;
  --spacing-5:  24px;  --spacing-6:  32px;
  --spacing-7:  40px;  --spacing-8:  48px;
  --spacing-10: 80px;  --spacing-12: 120px;

  /* ── Radius ── */
  --radius-sm:   4px;    /* buttons/CTAs */
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-xxl:  24px;
  --radius-full: 9999px;

  /* ── Section layout (1440px canvas) ── */
  --section-px: 148px;
  --section-py: 120px;
}

Utility Classes

Spacing scale, text colors, and background colors available as utility classes. Component patterns for common interactive elements.