Design tokens (YAML front matter)

version: alpha
name: Otter-Inspired-design-analysis
description: An inspired interpretation of Otter.ai's design language — a meeting-AI brand with a clean white and light-gray canvas, light-weight Circular headlines in a strong electric blue, outlined rounded-rectangle buttons and a forest-green secondary accent.

colors:
  primary: "#144fff"
  primary-deep: "#1d25e2"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  canvas-gray: "#f3f3f3"
  canvas-dark: "#131313"
  surface-slate: "#22282f"
  ink: "#000000"
  body: "#696969"
  green: "#346e4a"
  hairline: "#d3d8df"

typography:
  display:
    fontFamily: Circular, "Circular Std", "DM Sans", Arial, sans-serif
    fontSize: 58px
    fontWeight: 300
    lineHeight: 64px
    letterSpacing: -1.17px
  heading:
    fontFamily: Circular, "DM Sans", Arial, sans-serif
    fontSize: 54px
    fontWeight: 300
    lineHeight: 60px
    letterSpacing: -1.09px
  body-lg:
    fontFamily: Circular, "DM Sans", Arial, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: -0.41px
  announcement:
    fontFamily: Circular, "DM Sans", Arial, sans-serif
    fontSize: 23px
    fontWeight: 400
    lineHeight: 34px
    letterSpacing: -0.47px
  button:
    fontFamily: Circular, "DM Sans", Arial, sans-serif
    fontSize: 15.5px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0px

rounded:
  xs: 2px
  md: 10px
  lg: 15.5px
  xl: 23px
  2xl: 31px
  pill: 9999px

spacing:
  sm: 8px
  md: 14px
  lg: 20px
  xl: 40px
  section: 120px

components:
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: "14px 20px"
  button-outline-on-dark:
    backgroundColor: transparent
    textColor: "#ffffff"
    borderColor: "#ffffff"
    rounded: "{rounded.lg}"

Design System Inspiration of Otter.ai

Overview

Otter is an AI meeting agent — transcription, pre-call briefs, live coaching, summaries and follow-ups. The site is calm and corporate-friendly: white ({colors.canvas}, about 54% of painted area) and light gray ({colors.canvas-gray} #f3f3f3, about 30%) bands, with a near-black band ({colors.canvas-dark} #131313) for the announcement bar and testimonial areas.

Its signature is light-weight type in color. The hero (“Meeting AI that turns talk into action”) is Circular at weight 300 in black, and section headlines (“Before, during, and after every meeting.”) are the same weight in electric blue ({colors.primary} #144fff). Buttons are outlined rounded rectangles in the same blue. A forest green ({colors.green} #346e4a) marks secondary features.

Key Characteristics:

White and light-gray canvas with a dark announcement bar.
Circular at weight 300 for big headlines, tight negative tracking.
Electric blue for section headlines, links and outlined buttons.
Outlined buttons with about 16px radius and bold 700 labels.
Product screenshots of transcripts and summaries as the main visuals.

Colors

Electric Blue ({colors.primary} — #144fff): Section headlines, outlined buttons, links. Deep (#1d25e2) for hover.
Canvas (#ffffff) and Canvas Gray (#f3f3f3): Alternating sections.
Canvas Dark (#131313) and Slate (#22282f): Announcement bar, dark feature panels.
Ink (#000000): Hero headline and body.
Body (#696969): Secondary text.
Green (#346e4a): Secondary accent for feature tags and outlines.
Hairline (#d3d8df): Dividers.

Typography

Font Family

Circular (Lineto) for everything, weights 300 / 400 / 700. Substitute: DM Sans or Satoshi.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display}`	58px	300	64px	-1.17px	Hero headline (black).
`{typography.heading}`	54px	300	60px	-1.09px	Section headlines (blue).
`{typography.announcement}`	23px	400	34px	-0.47px	Announcement bar text.
`{typography.body-lg}`	20px	400	27px	-0.41px	Hero subline and lead text.
`{typography.button}`	15.5px	700	20px	0	Buttons.

Principles

Big type is light (300); small type is bold (700 on buttons). The contrast is the style.
Tracking is about -2% on everything above 20px.

Layout

Max content width around 1333px; text blocks 660–800px.
123px combined header: dark announcement bar (“Work Mode and Live Assist are here…”) plus a white nav (Enterprise · Pricing · Schedule demo · Log in · Start for free).
Alternating white / gray sections, each with a blue headline, short copy and a product screenshot.
Logo wall and testimonial carousel lower on the page.

Elevation & Depth

Flat sections. Product screenshots float with a single soft 0 0 18px rgba(0,0,0,0.2).

Shapes

{rounded.lg} ~16px — buttons.
{rounded.2xl} ~31px and {rounded.xl} ~23px — screenshot frames and feature cards.
{rounded.md} ~10px — small cards and chips.
{rounded.pill} — avatars and toggles.

Components

button-outline — transparent fill, 1px blue border and blue 700 label, ~16px radius, padding 14px 20px (“Schedule demo”, “Learn more”).
button-outline-on-dark — white border and label on the dark bar (“Start for free”).
Transcript Card — speaker avatar, name, timestamp and transcript text with highlighted keywords; used in hero and feature visuals.
Announcement Bar — dark full-width strip with a single line and a “Learn more” link.

Do’s and Don’ts

Do

Set big headlines light (300) and color section headlines blue.
Use outlined blue buttons with bold labels.
Alternate white and light-gray sections.
Show real transcript and summary UI.

Don’t

Don’t use heavy weights for headlines.
Don’t fill every button with blue; outlines are the default.
Don’t add gradients or multiple bright accents.

Responsive Behavior

Headlines drop to about 36px, keeping weight 300.
Screenshots stack under their text.
Header collapses to logo, “Start for free” and a menu button.

Known Gaps

Measured on the homepage at 1440px; the logged-in app was not measured.
Fractional sizes (15.59px, 58.48px) come from fluid scaling; values above are rounded.

Otter.ai

Palette

At a glance

Design System · Otter.ai

Design System Inspiration of Otter.ai

Overview

Colors