Skip to content
DesignMunkDesignMunk Submit a site

Cartesia Pricing

cartesia.ai
Real-time speech and transcription for voice agents—one API, no tradeoffs.
AI Technology Astro Tailwind Pricing IBM Plex Mono-39f46362fd5bf7f0 PP Kyoto-b14c6ebb315b725b
Share Visit site
cartesia.ai DESKTOP · 1440
Cartesia Pricing

AI Breakdown

Design export

---
version: alpha
name: Cartesia
description: Real-time speech and transcription for voice agents—one API, no tradeoffs.
colors:
  primary: "#1e1c1a"
  secondary: "#359c4d"
  tertiary: "#000000"
  neutral: "#ffffff"
  brand-greyed-jade: "#94bca4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: PP Kyoto-b14c6ebb315b725b
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.25
  headline-md:
    fontFamily: PP Kyoto-b14c6ebb315b725b
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
  headline-sm:
    fontFamily: PP Kyoto-b14c6ebb315b725b
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.25
  headline-xs:
    fontFamily: ABC Diatype-017f0f97e8794fab
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: IBM Plex Mono-39f46362fd5bf7f0
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 4.3px
  md: 7.2px
  lg: 10.1px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 56px
  xl: 76px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 10px 10px
    height: 38px
  button-secondary:
    textColor: "#525150"
    rounded: "{rounded.sm}"
    padding: 10px 10px
    height: 38px
  button-link:
    textColor: "#525150"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 16px
---

# Cartesia: Monospace Pricing Tables Framed by Jade Accents

## Overview

Cartesia's UI is technical, trustworthy, and calm. It targets developers and procurement teams comparing credits, concurrency, and compliance. The interface is spacious rather than dense, using generous 32–76px section spacing, restrained color, and mono body text to keep numbers legible. Green accents signal action and success; everything else stays neutral.

## Colors

- primary (#1e1c1a): Deep ink for headings, body text, and icons against light surfaces.
- secondary (#359c4d): Brand green for primary actions, highlights, and positive states.
- tertiary (#000000): Absolute black reserved for rare emphasis or media.
- neutral (#ffffff): Page background and card surfaces.
- brand-greyed-jade (#94bca4): Muted accent for subtle highlights, badges, or charts.
- surface ({colors.neutral}): Default canvas for content sections and cards.
- on-surface ({colors.primary}): Default text color on the surface.

## Typography

- PP Kyoto (headline-lg/md/sm): Proprietary serif display at 36/24/20px, weight 500, for hero and section titles. Not freely loadable. Use Fraunces, Spectral, or Cormorant Garamond as substitutes.
- ABC Diatype (headline-xs): Proprietary grotesk at 18px/500 for small headings and labels. Not freely loadable. Use Inter, Work Sans, or IBM Plex Sans as substitutes.
- IBM Plex Mono (body-md): Self-hosted here at 16px/500/1.5 for all body copy, lists, and data. Treat as not guaranteed. Use JetBrains Mono, Source Code Pro, or Roboto Mono as substitutes.
Role: serif headlines establish voice; mono body emphasizes precision in pricing, tables, and code-adjacent content.

## Layout

Spacing follows an 8px base: xs 8, sm 16, md 32, lg 56, xl 76. Build sections with md (32px) gutters and lg/xl (56–76px) vertical rhythm. Pricing cards form an even multi-column grid with 16px internal padding and consistent heights for plan buttons and feature lists. Long comparison tables use the same baseline with compact row spacing for scanability.

## Elevation & Depth

Depth is mostly flat. A subtle small shadow combines a 1px outline with a soft drop to lift interactive cards or sticky elements; larger shadows are unused. Hierarchy is conveyed with type scale, whitespace, and faint dividers rather than heavy elevation.

## Shapes

Three radii define the language: sm 4.3px for inputs and chips, md 7.2px for buttons, and lg 10.1px for cards and panels. Rounded shapes soften the otherwise technical palette without feeling playful.

## Components

- Buttons
  - Primary: 38px height, md radius (7.2px), bold action styling; typically used for plan CTAs. Text contrasts the green fill for accessibility.
  - Secondary: 38px height, sm radius (4.3px), neutral text with a light outline for quieter actions.
  - Link: Unfilled, 0px radius, inline with body text for tertiary actions.
- Card: White background (#ffffff), lg radius (10.1px), 16px padding. Used for plans, estimator panes, and FAQ items.

### Pricing tier card
Five-up grid of plans (Free → Enterprise). Each card: serif plan name, large price figure, 38px CTA, and a bullet list using mono body text. Spacing: 16px internal, 32px between blocks.

### Usage estimator (stepper + slider)
Two-step control: capability chips (sm radius 4.3px) and a minutes slider. Outputs a recommended plan and calculated limits using mono text at 16px.

### Recommended plan tile
A prominent summary card with lg radius and generous white space, showing plan name, price, and a single CTA. Works as a right-rail on wide screens or inline on mobile.

### Feature comparison table
Sectioned by product (Text to Speech, Speech to Text, Voice Agents). Uses small headings at 18px and rows in mono. Light dividers separate tiers; checkmarks and counts rely on the green accent.

### FAQ accordion
Stacked cards with lg radius and neutral background. Questions in 18px; answers in 16px mono. Expand/collapse affordance maintains the sm radius for controls.

### Header bar with dual CTAs
Top navigation with text links and two actions: Contact Sales (quiet) and Try Cartesia (primary). Buttons keep 38px height and md radius for consistency.

## Do's and Don'ts

Do
- Use #359c4d for primary actions, checkmarks, and quantitative highlights; keep other text in #1e1c1a.
- Keep buttons at 38px height with md radius (7.2px) and clear, direct labels.
- Space sections with 56–76px vertically; use 16–32px inside cards.
- Use monospace 16px body for lists, limits, and prices to preserve alignment.

Don't
- Add heavy shadows; rely on the small outline/soft shadow and clear dividers instead.
- Mix additional accent colors; the system depends on a single green.
- Overuse borders; when needed, keep them subtle and consistent with the light 1px outline.
- Drop below 16px for body copy on data-dense tables.

## Agent Prompt Guide

Quick color reference
- Text: #1e1c1a
- Background: #ffffff
- Border: 1px #1e1c1a at 10% opacity
- Accent/CTA: #359c4d

1) Build a five-up pricing grid
- Background #ffffff; text #1e1c1a; accent #359c4d.
- Headline: Fraunces 500, 36px/1.25; subheads: Inter 500, 18px/1.22; body: Source Code Pro 16px/1.5.
- Each card: 16px padding, 10.1px radius, subtle 1px border (ink at 10% opacity).
- CTA buttons: 38px height, 7.2px radius, fill #359c4d, text #ffffff.

2) Create a usage estimator module
- Step chips: Inter 500, 14–16px; sm radius 4.3px; selected chip uses #359c4d text/background inversion.
- Slider below with labels in Source Code Pro 16px; card container 10.1px radius, 16px padding, light border.

3) Design the recommended plan tile
- Container: #ffffff, 10.1px radius, 16–32px internal spacing.
- Title: Fraunces 500 24px; price in Source Code Pro 20px.
- Primary CTA: 38px height, 7.2px radius, #359c4d fill, #ffffff text.

4) Build an FAQ accordion
- Question row: Inter 500 18px; answer: Source Code Pro 16px/1.5.
- Card background #ffffff, 10.1px radius, 16px padding; divider/border at 1px ink (10% opacity).

## Similar Brands

- OpenAI: similarly minimal with restrained green accents; Cartesia skews more editorial with a mono body and serif headings.
- Stripe: precision in pricing tables and developer focus; Stripe uses blue and denser data tables, Cartesia is airier.
- Retool: developer-first tone and neutral palette; Cartesia employs a serif for headlines where Retool stays purely sans.
- Anthropic: soft neutrals and careful spacing; Cartesia adds a clearer pricing calculator and stronger green CTAs.

More like this

Browse AI →
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 1 hour ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 2 hours ago
overmindlab.ai
Overmind AI
Overmind
The AI engineering copilot for agent optimisation and model training.
Homepage · 14 hours ago
customer.io
Customer.io AI
Customer.io
Supercharge your messaging with compounding customer engagement
Homepage · 15 hours ago