Tavus design system: Colors, fonts and DESIGN.md

---
version: alpha
name: Tavus
description: "Light interface measured from tavus.io: Perfectlynineties type with Suisse Intl, light red accents, tonal surfaces and square corners."
colors:
  background: "#F7F4EF"
  surface: "#F7F4EF"
  on-surface: "#28292A"
  on-background: "#28292A"
  on-surface-strong: "#140206"
  on-surface-variant: "#222222"
  on-surface-muted: "#4E4C47"
  surface-container-low: "#FFFDFB"
  surface-container: "#EAE5DE"
  surface-container-high: "#E4E0F2"
  overlay: "#F7F4EF61"
  outline: "#D9D0C2"
  primary: "#FF8BA6"
  on-primary: "#000000"
  secondary: "#7CFF98"
  tertiary: "#63311F"
  error: "#FF6183"
  success: "#38F261"
typography:
  headline-display:
    fontFamily: Perfectlynineties
    fontSize: 88px
    fontWeight: 400
    lineHeight: 1
  headline-lg:
    fontFamily: Perfectlynineties
    fontSize: 70px
    fontWeight: 400
    lineHeight: 1
  headline-md:
    fontFamily: Perfectlynineties
    fontSize: 59px
    fontWeight: 400
    lineHeight: 1
  headline-sm:
    fontFamily: Perfectlynineties
    fontSize: 49px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.01em
  title-lg:
    fontFamily: Perfectlynineties
    fontSize: 46.5px
    fontWeight: 400
    lineHeight: 1
  body-md:
    fontFamily: Suisse Intl
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
  body-lg:
    fontFamily: Fk Raster Grotesk Compact Blended
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08em
  body-sm:
    fontFamily: Fk Raster Grotesk Compact Blended
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.06em
  caption:
    fontFamily: Fk Raster Grotesk Compact Blended
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.127em
  label-md:
    fontFamily: Schibsted Grotesk
    fontSize: 16px
    fontWeight: 400
  label-sm:
    fontFamily: Suisse Intl
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.5
  code:
    fontFamily: monospace
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Perfectlynineties
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg-mobile:
    fontFamily: Perfectlynineties
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
rounded:
  none: 0px
spacing:
  xs: 4px
  sm: 6px
  md: 12px
  lg: 24px
  xl: 35.64px
  gutter: 16px
  margin: 70.8px
components:
  button-primary:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 20px 24px
    height: 57px
  button-secondary:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: 0px
    height: 55px
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 18.08px 24px
    height: 50px
  card:
    backgroundColor: "#B0A8D1"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: 0px
---

# Tavus Design System

## Overview

Tavus describes itself as: “Personified Application Layers that see, hear, and respond face-to-face in real time. Build and deploy with our API, no-code PAL Maker, or enterprise Solutions. Interactive AI avatars and conversational video reimagined” The interface is light, built on **Warm Mist (#F7F4EF)** with **Graphite (#28292A)** text, and **Light Red (#FF8BA6)** as the main accent.

Type is set in **Perfectlynineties** and **Suisse Intl**, with **monospace** for code. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Corners are square.

Measured from [tavus.io](https://www.tavus.io/) on October 29, 2026 at 1440×900 and 390×844 from 359 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 16 roles.

- **Warm Mist (#F7F4EF):** Page background, seen 10 times. Token `background`.
- **Graphite (#28292A):** Primary text and headings, seen 57 times. Token `on-surface`.
- **Deep Red (#140206):** Headings and emphasis, seen 66 times. Token `on-surface-strong`, CSS `--primatives--terminal-black`.
- **Charcoal (#222222):** Secondary text, seen 2 times. Token `on-surface-variant`.
- **Warm Graphite (#4E4C47):** Muted text and metadata, seen 2 times. Token `on-surface-muted`, CSS `--muted<deleted|variable-c37873a8-2807-6187-9074-ff40bbfea688>`.
- **Snow (#FFFDFB):** Raised areas one step from the page, seen 16 times. Token `surface-container-low`.
- **Warm Mist (#EAE5DE):** Cards and panels, seen 13 times. Token `surface-container`, CSS `--buttons--secondary-background`.
- **Pale Violet (#E4E0F2):** Hover and pressed fills, seen 1 time. Token `surface-container-high`.
- **Warm Mist 38% (#F7F4EF61):** Translucent fill for cards and controls, seen 3 times. Token `overlay`.
- **Light Orange (#D9D0C2):** Borders and dividers, seen 6 times. Token `outline`, CSS `--primatives--pc-plastic-4`.
- **Light Red (#FF8BA6):** Brand color in the header, seen 2 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Light Green (#7CFF98):** Accent in text, fills and borders, seen 2 times. Token `secondary`.
- **Dark Orange (#63311F):** Accent, seen 6 times. Token `tertiary`.
- **Red (#FF6183):** Errors and destructive states, seen 7 times. Token `error`, CSS `--primatives--bubbletech-4`.
- **Vivid Green (#38F261):** Success and positive states, seen 2 times. Token `success`.

## Typography

**Perfectlynineties**, **Suisse Intl**, **Fk Raster Grotesk Compact Blended**, **Schibsted Grotesk** and **monospace** (monospace) share the interface. Fallback stack: `Perfectlynineties, Georgia, sans-serif`. Other loaded fonts: launcher_icons_v2, Archivo, Gruppo, Open Sans.

- **headline-display:** Perfectlynineties 88px at weight 400, line height 1 (40px on mobile). Page title (h1).
- **headline-lg:** Perfectlynineties 70px at weight 400, line height 1 (40px on mobile). Section headings (h2).
- **headline-md:** Perfectlynineties 59px at weight 400, line height 1. Sub-section headings.
- **headline-sm:** Perfectlynineties 49px at weight 400, line height 1, tracking -0.01em. Card and feature titles.
- **title-lg:** Perfectlynineties 46.5px at weight 400, line height 1. Small titles.
- **body-md:** Suisse Intl 14px at weight 400, line height 1.2. Body text.
- **body-lg:** Fk Raster Grotesk Compact Blended 16px at weight 400, line height 1.5, tracking 0.08em. Lead paragraphs.
- **body-sm:** Fk Raster Grotesk Compact Blended 11px at weight 400, line height 1.5, tracking 0.06em. Secondary and small text.
- **caption:** Fk Raster Grotesk Compact Blended 10px at weight 400, line height 1, tracking 0.127em. Captions and fine print.
- **label-md:** Schibsted Grotesk 16px at weight 400. Buttons, navigation and labels.
- **label-sm:** Suisse Intl 10px at weight 700, line height 1.5. Small labels and badges.
- **code:** monospace 10px at weight 400, line height 1.5. Code and technical values.

## Layout

Spacing does not follow a strict grid: 70% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 6px, md 12px, lg 24px, xl 35.64px.
- **Gaps:** 16px is the most common gap in flex and grid layouts.
- **Page margin:** 70.8px on each side of full-width sections.
- **Breakpoints:** 370px, 479px, 576px, 767px, 767.98px, 768px, 991px, 992px, 1280px, 1440px, 1920px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgb(20, 2, 6) 4px 4px 0px 0px`
- `rgb(21, 26, 30) 4px 4px 0px 0px`

Hairline rings and inset highlights also appear: `rgb(20, 2, 6) 1px 1px 0px 0px inset`.

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“START BUILDING”):** #FF6183 fill, #28292A text, 14.08px/400, padding 20px 24px, border 1px solid #140206.
- **button-secondary (“SPEAK WITH CHARLIE”):** #38F261 fill, #28292A text, 16px/400, padding 0px, border 1px solid #140206.
- **button-outline (“VISION”):** #FFFDFB fill, #28292A text, 14.08px/400, padding 18.08px 24px.
- **card:** #B0A8D1 fill, #28292A text, 16px/400, padding 0px, border 1px solid #140206, shadow `rgb(20, 2, 6) 4px 4px 0px 0px`.

## Do's and Don'ts

- Do use #F7F4EF for the page and lift surfaces in small steps: #FFFDFB, #EAE5DE, #E4E0F2.
- Do keep text in 4 levels: #28292A, #140206, #222222, #4E4C47.
- Do use #FF8BA6 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (6px, 12px, 24px).
- Don't introduce new font families beyond Perfectlynineties, Suisse Intl, Fk Raster Grotesk Compact Blended, Schibsted Grotesk and monospace.
- Don't use #FF8BA6 for large backgrounds or body text.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.2s, 0.25s, 0.18s.

- **Easing:** `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/tavus.io/), the free DESIGN.md generator (engine 2026.10.29+bf9d681d83cf).