Speakeasy Pricing

---
version: alpha
name: Speakeasy
description: The enterprise control plane for AI. Secure and centrally manage MCPs.
colors:
  primary: "#000000"
  secondary: "#7c7c7c"
  neutral: "#fafafa"
  brand-leadbelcher: "#cacaca"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Tobias
    fontSize: 67px
    fontWeight: 100
    lineHeight: 1.2
    letterSpacing: -0.04em
  headline-md:
    fontFamily: ABCDiatype
    fontSize: 54px
    fontWeight: 100
    lineHeight: 1.2
  headline-sm:
    fontFamily: ABCDiatype
    fontSize: 44px
    fontWeight: 100
    lineHeight: 1.2
    letterSpacing: 0.001em
  headline-xs:
    fontFamily: ABCDiatype
    fontSize: 35px
    fontWeight: 100
    lineHeight: 1.2
  body-md:
    fontFamily: Tobias
    fontSize: 28.4px
    fontWeight: 100
    lineHeight: 1.52
    letterSpacing: -0.04em
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 36px
  xl: 48px
components:
  button-primary:
    backgroundColor: "#f8f8f8"
    textColor: "#333333"
    rounded: "{rounded.sm}"
    padding: 8px 20px
    height: 40px
  button-secondary:
    backgroundColor: "#333333"
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 8px 20px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Speakeasy: Serif Headlines Over a Monochrome Pricing Grid

## Overview

Speakeasy's UI is sober and enterprise-oriented: monochrome type, generous whitespace, and thin rules. The tone is confident and technical rather than salesy, optimized for security, platform, and IT buyers. Density is medium: headlines are large and airy while feature lists and tables are compact for scanning. Use minimal color, rely on structure and typography to signal hierarchy.

## Colors

- **primary (#000000):** Core text, headings, and icons for maximum contrast on light backgrounds.
- **secondary (#7c7c7c):** Secondary copy, hints, metadata, and subdued icons.
- **neutral (#FAFAFA):** Page background and card surfaces.
- **brand-leadbelcher (#CACACA):** Hairline borders, dividers, and subtle outlines.
- **surface ({colors.neutral} → #FAFAFA):** Default panel and card surface.
- **on-surface ({colors.primary} → #000000):** Text and icons that sit on the neutral surface.

## Typography

- Tobias (custom, display serif): Used for headline-lg at 67px and selected body copy at 28.4px, both at weight 100 with -0.04em tracking for a refined, editorial feel. Not freely hosted; suggested substitutes: Fraunces (Google, variable), Playfair Display (Google), or Lora (Google).
- ABCDiatype (custom, neo-grotesk sans): Headline-md 54px, headline-sm 44px, headline-xs 35px at light weight for section titles, plan names, and UI labels. Not freely hosted; substitutes: Inter (Google), IBM Plex Sans (Google), or Manrope (Google).
- ABCDiatype Mono (custom): Used where monospaced detail is required (code, identifiers). Not freely hosted; substitutes: IBM Plex Mono (Google), JetBrains Mono (free), or Roboto Mono (Google).
- Role guidance: Serif for marketing emphasis and hero moments; light grotesk for structure and data; mono only for technical strings.

## Layout

Spacing follows an 8px base: xs 8px, sm 16px, md 28px, lg 36px, xl 48px. Cards pad to 16px by token; stack sections with 36–48px for clear breaks. Tables and feature lists use 28–36px row rhythm with thin dividers in #CACACA to maintain scanability. On wide screens, treat content as centered columns with generous outer gutters to preserve the airy feel.

## Elevation & Depth

Depth is mostly flat. A subtle sm shadow (rgba(0,0,0,0.08) 0 2px 8px) can be used to lift interactive elements sparingly. Larger shadows are none; hierarchy is conveyed through whitespace, 1px borders in #CACACA, and tonal contrast (#000 on #FAFAFA). The inner inset shadow is reserved for pressed or toggled states.

## Shapes

Default corner radius is 8px (rounded.sm) for buttons, inputs, and cards—utilitarian and consistent. Links remain square (0px). Use the 8px radius to keep actions visually related; avoid mixing with fully pill-shaped controls unless explicitly specified by design comps.

## Components

- Buttons
  - Primary: #F8F8F8 background, #333333 text, 8px radius, 40px height, 8px 20px padding—use on light surfaces where a quiet CTA is needed.
  - Secondary: #333333 background, #FFFFFF text, 8px radius, 40px height—use for strongest emphasis against light backgrounds.
  - Link: Text-only in #000000, no radius—inline calls and low-friction actions.
- Card: #FAFAFA surface, #000000 text, 8px radius, 16px padding; add a 1px #CACACA border when separation is needed.

### Pricing Hero
- Uses headline-lg Tobias 67px (thin) with tight tracking. Supporting line in light grotesk. Layout center-aligned with wide top/bottom margins (36–48px).

### Enterprise Plan Card
- Card container on #FAFAFA with thin #CACACA border and 16px padding. Title in headline-sm (44px) Diatype; four feature columns with bullet lists. CTA aligns to the card's right edge.

### Capability Columns (Connect / Secure / Observe / Support)
- Column headers in Diatype, items as compact bullets. Use #7C7C7C for less critical descriptors and #000000 for item labels.

### Plan Comparison Table
- Sectioned rows (Tool creation, Curation, Auth, Management, Security, Support). Row headers in headline-xs (35px); cells separated by 1px #CACACA rules; apply sm shadow to the table wrapper only if it needs lift.

### FAQ Accordion
- Question rows in headline-xs (35px) with #000000; answers in Tobias body-md 28.4px at weight 100. Dividers in #CACACA; chevrons and meta in #7C7C7C.

### Top Navigation with Callout
- Quiet nav links; the prominent action uses the Secondary Button spec (#333333 / #FFFFFF, 8px radius). Keep height at 40px for consistency across pages.

### Footer Resource Index
- Three-column link groups with small caps/label styling in Diatype; thin dividers and ample 16–28px vertical rhythm.

## Do's and Don'ts

Do
- Use #000000 on #FAFAFA for primary copy; reserve #7C7C7C for metadata and helper text.
- Keep corners at 8px for actions and containers to maintain family resemblance.
- Use 1px borders in #CACACA to separate dense content like tables and FAQs.
- Apply the sm shadow sparingly to bring focus to interactive groups.

Don't
- Introduce saturated brand colors for emphasis; contrast and spacing carry hierarchy here.
- Mix pill-shaped buttons with 8px-radius components unless specified.
- Increase type weights casually; the system leans on light/thin faces for tone.
- Stack sections without at least 36px spacing; crowding breaks the calm.

## Agent Prompt Guide

Quick reference
- Text: #000000
- Background: #FAFAFA
- Border: #CACACA
- Accent/Emphasis (dark UI): #333333
- Base radius: 8px

1) Pricing hero section
"Create a centered hero on #FAFAFA with a max-width of 960px. Use Tobias, fallback Fraunces/serif for the H1 at 67px, weight 100, line-height 1.2, letter-spacing -0.04em, color #000000. Add a supporting line in ABCDiatype, fallback Inter/sans at 28.4px, weight 100, color #7C7C7C. Vertical spacing: 48px above and 36px below."

2) Enterprise plan card
"Render a card on #FAFAFA with a 1px border #CACACA, 8px radius, and 16px padding. Title in ABCDiatype 44px, weight 100, color #000000. Inside, create four equal columns with bullet lists. Place a Secondary Button (#333333 background, #FFFFFF text, height 40px, padding 8px 20px, radius 8px) aligned right."

3) Plan comparison table
"Build a table wrapper with 8px radius, 1px #CACACA border, and 28px internal gutters. Section headers in ABCDiatype 35px, weight 100, color #000000. Cell text in Tobias 28.4px, weight 100. Use row dividers #CACACA and optional sm shadow rgba(0,0,0,0.08) 0 2px 8px for elevation."

4) FAQ accordion
"On #FAFAFA, stack accordion items with 28px vertical spacing. Question text in ABCDiatype 35px, weight 100, color #000000. Answer text in Tobias 28.4px, weight 100, line-height 1.52. Divider lines #CACACA; chevron icons #7C7C7C. Maintain 16px hit targets and 8px corner radius for focused/active states using the inner inset shadow spec."

## Similar Brands

- Linear: Monochrome UI, light grotesk, and hairline rules; Linear uses higher density and more motion.
- Anthropic: Quiet palette with serif display moments; Anthropic leans warmer with more generous serif usage.
- OpenAI: Sparse layouts and thin dividers; OpenAI uses larger image modules and fewer borders.
- Notion: Black/white system and light grotesk; Notion is more utilitarian and uses heavier iconography.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #7c7c7c;
  --color-neutral: #fafafa;
  --color-brand-leadbelcher: #cacaca;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 67px;
  --text-headline-lg-weight: 100;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.04em;
  --text-headline-md-size: 54px;
  --text-headline-md-weight: 100;
  --text-headline-md-leading: 1.2;
  --text-headline-sm-size: 44px;
  --text-headline-sm-weight: 100;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: 0.001em;
  --text-headline-xs-size: 35px;
  --text-headline-xs-weight: 100;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 28.4px;
  --text-body-md-weight: 100;
  --text-body-md-leading: 1.52;
  --text-body-md-tracking: -0.04em;
  --font-tobias: "Tobias";
  --font-abcdiatype: "ABCDiatype";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 36px;
  --spacing-xl: 48px;

  /* Components */
  --button-primary-background-color: #f8f8f8;
  --button-primary-text-color: #333333;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 20px;
  --button-primary-height: 40px;
  --button-secondary-background-color: #333333;
  --button-secondary-text-color: #ffffff;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 20px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "The enterprise control plane for AI. Secure and centrally manage MCPs.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.486,
          0.486
        ],
        "hex": "#7c7c7c"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "brand-leadbelcher": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.792,
          0.792,
          0.792
        ],
        "hex": "#cacaca"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 48,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Tobias",
        "fontSize": {
          "value": 67,
          "unit": "px"
        },
        "fontWeight": 100,
        "letterSpacing": {
          "value": -0.04,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "ABCDiatype",
        "fontSize": {
          "value": 54,
          "unit": "px"
        },
        "fontWeight": 100
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "ABCDiatype",
        "fontSize": {
          "value": 44,
          "unit": "px"
        },
        "fontWeight": 100,
        "letterSpacing": {
          "value": 0.001,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "ABCDiatype",
        "fontSize": {
          "value": 35,
          "unit": "px"
        },
        "fontWeight": 100
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Tobias",
        "fontSize": {
          "value": 28.4,
          "unit": "px"
        },
        "fontWeight": 100,
        "letterSpacing": {
          "value": -0.04,
          "unit": "em"
        }
      }
    }
  }
}