Cartesia

Overview

Cartesia is a frontier AI voice platform that delivers real-time text-to-speech and transcription models purpose-built for interactive agents and conversational AI. The design system embodies "Technical Warmth"—a fusion of precision engineering with human-centered approachability. The visual language combines a rich, earthy neutral palette (cream, warm grays, deep charcoal) anchored by a vibrant, confident green (#309D4B) that signals trust, growth, and technological capability. The aesthetic evokes a sense of clarity and forward momentum: users should feel they're interacting with cutting-edge infrastructure that is nonetheless accessible and intuitive.

Cartesia's voice is precise, authoritative yet conversational, and never condescending. The brand speaks in concrete terms—"real-time," "no tradeoffs," "40+ languages"—grounding abstract AI concepts in tangible outcomes. Tone examples: "The #1 real-time speech and transcription models purpose-built for voice agents" (confident, specific) and "One API, no tradeoffs between quality and speed" (direct, solution-focused). The typography pairs serif headlines (PP Kyoto, a geometric serif with refined proportions) with a humanist sans-serif body (ABC Diatype), creating visual tension that mirrors the brand's dual nature: sophisticated yet approachable, technical yet human.

Colors

The color system is rooted in a warm, sophisticated neutral foundation—surface colors range from near-white (#fefefe) through soft creams (#f3f2ef, #ede9e2) to deeper grays (#787672, #525150)—creating a calm, professional canvas that never feels sterile. This palette is interrupted by a single, commanding primary accent: Cartesia Green (#309D4B), derived from the brand's meta theme-color. This green is used exclusively for primary CTAs (buttons with background: #309D4B, color: #ffffff), interactive focus states (outline: 2px solid #309D4B, outline-offset: 2px), and key brand moments (hero sections, badges). The green is warm and organic—not a cool tech-green—evoking growth and natural intelligence rather than artificial coldness.

Secondary and tertiary greens (#5db368, #227a38) provide de

Typography

The type system is a deliberate pairing of two distinct voices: PP Kyoto (a variable serif, 100–900 weight range) for headlines and display text, and ABC Diatype (a geometric humanist sans-serif, weights 400–700) for body and interface text. This contrast reinforces the brand's dual nature—sophisticated yet accessible. Display text (72px, 500 weight, -0.02em letter-spacing) commands attention in hero sections; headline-lg (48px, 500 weight) anchors feature sections. Body text is set at 16px (body-md) with 24px line-height (1.5x), ensuring readability on screens and print. Labels and buttons use 14px (label-md) with 0.01em letter-spacing to add subtle precision. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legibility. All serif headline

Layout

The layout system uses a 12-column grid with a max-width of 1248px, maintaining consistent horizontal rhythm across breakpoints. The gutter (24px) is applied symmetrically to all container edges, creating breathing room without excessive whitespace. Sections are separated using lg spacing (40px) to establish clear visual hierarchy; within sections, md spacing (24px) groups related content, and sm spacing (12px) tightens micro-interactions. The hero section spans full-width with 80px vertical padding and rounded corners (1.5rem), creating a contained, premium feel. Cards use 1.5rem border-radius and 24px padding, with subtle 1px borders (outline-variant color) to define edges without harsh shadows. Container max-width of 1248px ensures readability on ultra-wide displays while maintaining fo

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle color shifts rather than dramatic drop shadows. Level 1 (base surfaces) uses no shadow; Level 2 (cards, modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, diffuse shadow that suggests gentle lift. Level 3 (elevated modals, popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius (24px) and slight spread to create atmospheric depth. Hover states on cards transition to Level 3 shadows over 200ms, signaling interactivity. Focus states use a 2px solid outline in primary green (#309D4B) with 2px o

Shapes

The shape philosophy is "Soft Precision"—rounded corners are used consistently to soften the technical nature of the product while maintaining clarity. Buttons and inputs use 1rem (16px) border-radius, a moderate curve that feels friendly without being playful. Cards and containers use 1.5rem (24px), creating a more pronounced softness for larger surfaces. Small UI elements (badges, tags) use 0.5rem (8px) for subtle definition. The full-radius token (9999px) is reserved for pill-shaped buttons and fully rounded badges. This graduated approach ensures visual consistency: a user scanning the int

Components

Action Elements Buttons are the primary interactive currency. Primary buttons use background: #309D4B, color: #ffffff, padding: 12px 24px, height: 48px, border-radius: 1rem, and font-weight: 500. On hover, background shifts to #227a38 (darker green) with transition: background-color 200ms ease. On focus, add outline: 2px solid #309D4B, outline-offset: 2px. Secondary buttons are transparent with a 1px border in primary green, allowing the background to show through on hover (background: {colors.surface-container-high}). Both button types use label-md typography (14px, 500 weight).

Containers & Surfaces Cards are the primary content container, using background: #f9f9f8 (surface-container-lowest), border-radius: 1.5rem, padding: 24px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On

Do's and Don'ts

**Do**

• Do use the primary green (#309D4B) exclusively for high-priority CTAs, focus states, and brand moments—never dilute it with secondary uses.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) between related elements to preserve visual breathing room.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do pair PP Kyoto serif headlines with ABC Diatype sans-serif body text to reinforce the technical-yet-human brand voice.
• Do use the full shadow stack (0 3px 8px for Level 2, 0 8px 24px for Level 3) to create atmospheric depth without harsh contrast.
• Do ensure all interactive elements have a minimum 48px height and 16px horizontal padding for comfortable touch targets.

**Don't**

• Don't use the primary green for backgrounds or large surfaces—reserve it for accents, CTAs, and focus indicators only.
• Don't apply hard corners (border-radius: 0) to buttons, cards, or inputs; minimum 0.5rem maintains the approachable aesthetic.
• Don't compress spacing below 12px (sm) between interactive elements; cramped layouts feel rushed and undermine precision.
• Don't mix serif and sans-serif within a single headline or body paragraph; maintain clear typographic hierarchy.
• Don't use drop shadows larger than 0 8px 24px or blur radii exceeding 24px; excessive shadows feel dated and reduce clarity.
• Don't override focus outlines with custom styles; always provide a visible 2px outline in primary green for keyboard navigation.