Vai — Open Source Toolkit for Voyage AI Embeddings

vai

Design System

The complete visual language for vai. Logos, colors, typography, components, patterns, and usage guidelines for building consistent experiences across all surfaces.

Logos

Download and use the appropriate logo variant for your context. Always maintain clear space around the logo.

Logo (Light BG)

Use on light backgrounds. Transparent PNG.

Logo (Dark BG)

Use on dark backgrounds. Includes rounded container.

Icon Mark

Standalone V mark. Black on transparent. Use as watermark or favicon source.

Icon Mark (Inverted)

V mark inverted for dark backgrounds (apply CSS filter: invert(1)).

Clear Space

≥ "a" width

Minimum clear space around the logo equals the width of the "a" character in the vai logotype.

Minimum Size

32px ✓

20px ✗

Don't use the logo smaller than 32px in height.

Do / Don't

Correct usage on light background

Correct usage on dark background

Don't

Don't stretch or distort

Don't

Don't recolor the logo

Don't

Don't use on busy backgrounds

Don't

Don't go below 32px height

Voice & Tone

How vai sounds. Consistent voice, adaptive tone.

Voice Characteristics

Technical but approachable

We know the stack. We explain it clearly.

Confident but not arrogant

Show, don't boast. Let results speak.

Concise — every word earns its place

Cut the filler. Be direct.

Developer-first

Speak the audience's language. They build software.

Tone by Context

Marketing page

"Ship semantic search in minutes."

Bold, concise, aspirational

Error message

"Embedding failed: invalid API key. Check your .env file."

Direct, helpful, no blame

Documentation

"Pass the text array to vai.embed(). Returns a list of float vectors."

Precise, neutral, scannable

Changelog

"Added: batch embed command. Fixed: timeout on large docs."

Terse, factual, scannable

Writing Do / Don't

Ship semantic search in minutes

Our revolutionary AI-powered solution enables enterprises to leverage...

vai pipeline chunks, embeds, and indexes your docs

The vai pipeline functionality provides document processing capabilities

Embed 100k docs in under a minute

Experience unprecedented throughput for your embedding workflows

Preferred Terminology

Use

Avoid

knowledge base

vector store

embed

vectorize

query your embeddings

pipeline

workflow

vai

Vai / VAI / V.A.I.

Color Palette

Click any swatch to copy its hex value. The palette uses a teal/cyan accent anchored to a dark neutral base.

Primary (Teal)

Teal

#00D4AA

Primary accent, buttons, interactive elements (dark mode)

Teal Dark

#009E80

Primary accent (light mode), dimmed accent

Teal Darker

#007A63

Button hover (light mode)

Teal Light

#5CE8CC

Button hover (dark mode), secondary accent

Secondary (Cyan)

Cyan

#40E0FF

Links, secondary highlights (dark mode)

Cyan Dark

#0088CC

Links (light mode)

Neutrals (Dark Mode)

MDB Black

#001E2B

Dark mode background

Gray Dark 4

#112733

Surface, input backgrounds

Gray Dark 3

#1C2D38

Cards

Gray Dark 2

#3D4F58

Borders

Gray Base

#889397

Muted text

Gray Light 1

#C1C7C6

Dimmed text

Gray Light 2

#E8EDEB

Primary text (dark mode), borders (light mode)

Neutrals (Light Mode)

White

#FFFFFF

Light mode background

Gray Light 3

#F9FBFA

Light mode surface

Semantic

Red

#FF6960

Error states (dark mode)

Yellow

#FFC010

Warning states

Purple

#B45AF2

Accent, charts

Industry Accents

Healthcare

#5CE8CC

Healthcare use case accent

Legal

#B45AF2

Legal use case accent

Finance

#FFC010

Finance use case accent

DevDocs

#40E0FF

Developer docs use case accent

Accessibility Contrast Ratios

Text on Background

14.5:1

AAA

Accent on Background

9.0:1

AAA

Muted on Background

5.5:1

AAA

Text on Card

12.0:1

AAA

Accent on Card

7.4:1

AAA

Text on White (light)

17.2:1

AAA

Color Usage Map

Card Title

Body text describing the component.

Primary

Secondary

← bg (#001E2B)

← bgCard (#1C2D38)

← text (#E8EDEB)

← textMuted (#889397)

← accent (#00D4AA)

← border (#3D4F58)

Typography

System fonts for body text, monospace for branding and code. No external font loading required.

Type Scale

Name

Size

Line H

Sample

Display

2.5rem

40px

1.1

vai

2rem

32px

1.2

Ship semantic search in minutes

1.5rem

24px

1.3

Embed, index, and search your documents

1.25rem

20px

1.4

Getting started with vai

Body

1rem

16px

1.6

The complete developer toolkit for Voyage AI embeddings, vector search, and RAG pipelines.

Small

0.875rem

14px

1.5

Updated 3 minutes ago

Caption

0.75rem

12px

1.4

v2.1.0 · MIT License

Font Stacks

Display / Logo

'Source Code Pro', 'SF Mono', 'Fira Code', monospace

Headings & Body

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Code / Terminal

'Source Code Pro', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace

Font Loading

vai uses system font stacks exclusively. No external font files or Google Fonts. The monospace stack (Source Code Pro → SF Mono → Fira Code) is available on most developer machines. On systems without Source Code Pro, the stack falls back gracefully.

Gradients

Used sparingly for emphasis, hero text, and interactive highlights.

Hero Text

linear-gradient(135deg, #00D4AA 0%, #40E0FF 100%)

Headline accents, hero text spans

Success Bar

linear-gradient(90deg, #00D4AA, #5CE8CC)

Progress bars, meter fills, positive indicators

Info Bar

linear-gradient(90deg, #40E0FF, #0088CC)

Secondary progress bars, latency indicators

Component Patterns

Key UI patterns used across the site. All examples are live-rendered MUI components.

Cards

Sample Card

Cards use bgCard background with a 1px border. Hover lifts with translateY(-2px).

tag

active

Buttons

Terminal / Command Block

$ vai embed "Hello, vector world!"

✓ Model: voyage-4-large

✓ Dimensions: 1024

✓ Latency: 42ms

[0.0234, -0.0891, 0.1456, ...]

Chips & Badges

voyage-code-3

voyage-3-large

Active

Beta

Healthcare

Finance

Section Container Pattern

Section Heading

Section subtitle with supporting context.

Content area

py: 8

Iconography

MUI Icons (Material Symbols), outlined style preferred. No custom icon library.

Domain Icons

Code

Developer docs

Gavel

Legal

TrendingUp

Finance

LocalHospital

Healthcare

Common UI Icons

Download

ContentCopy

Send

Chat

AutoAwesome

Usage

Use @mui/icons-material exclusively. Prefer the outlined variant for consistency. No custom SVGs or icon fonts.

Motion & Animation

Prefer subtle, functional motion. No decorative animations.

Hover transition

Default for all interactive hover states

transition: 'all 0.2s ease'

Card lift

Subtle elevation on card hover

transform: 'translateY(-2px)'

Shadow on lift

Depth shadow paired with lift

boxShadow: '0 8px 24px rgba(0,0,0,0.3)'

Fade in

Element visibility transitions

opacity 0.15s ease

Live Demo

Hover me

Glow

Layout Patterns

Page structure, section rhythm, and grid patterns.

Page Structure

Navbar

Hero

Section (bg)

Section (bgSurface)

Section (bg)

Footer

Section Rhythm

Alternate background colors between sections: bg → bgSurface → bg. This creates visual separation without hard dividers.

Container Widths

maxWidth="lg" (1200px)

maxWidth="md" (900px)

Grid Patterns

2-col (sm and up)

3-col (md and up)

4-col (lg and up)

Dark / Light Mode

Dark mode is primary. Light mode support is planned.

Token

Dark (current)

Light (planned)

#001E2B

#FFFFFF

bgSurface

#112733

#F9FBFA

bgCard

#1C2D38

#FFFFFF

accent

#00D4AA

#009E80

text

#E8EDEB

#001E2B

textDim

#C1C7C6

#3D4F58

textMuted

#889397

border

#3D4F58

#E8EDEB

Spacing & Radii

Consistent spacing and border radius values used throughout the UI.

Border Radius

4px

Small

8px

Default

12px

Card

16px

Large

Spacing Scale

4px

8px

16px

24px

32px

2xl

48px

vai Design System v1.0

Last updated February 2026

Community project by Michael Lynn. Not affiliated with Voyage AI, Inc. or MongoDB, Inc.

← Back to vai