---
name: Synthesia
description: "This site is worth including as a prime example of modern, professional SaaS design that balances a clean aesthetic with clear, benefit-driven communication."
version: alpha

colors:
  background: "#F5F8FF"
  primary: "#0D0F2C"
  secondary: "#333B52"
  tertiary: "#3E57DA"
  neutral: "#656C86"
  bg-soft: "#FFFFFF"
  bg-quiet: "#EBF6DF"
  muted-soft: "#E6EAF4"
  line: "rgba(230, 234, 244, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An all-in-one AI video platform for business that simplifies studio-quality video creation with avatars and voiceovers.

*A clean, enterprise-grade tool that uses AI to streamline video production.*

## Colors

A high-contrast, accessible palette using a dominant blue accent against a soft cool-gray background.

- **Background (`#F5F8FF`)** — uses `bg` token
- **Primary text (`#0D0F2C`)** — uses `ink` token
- **Secondary text (`#333B52`)** — uses `ink-soft` token
- **Accent (`#3E57DA`)** — uses `accent` token
- **Muted (`#656C86`)** — uses `muted` token
- **Borders (`rgba(230, 234, 244, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Use geometric-sans for all text (display, body, and UI elements).
- Avoid using more than 2 font weights (400 and 500).
- Headlines should have negative letter-spacing for a compact look.

## Layout

A centered, fixed-width container (1280px) with a 12-column grid and 24px gutters, adapting to mobile-first breakpoints.

*Rhythm:* 4px base grid with a consistent 24px gutter and 32px padding for cards.

## Elevation & Depth

- 0px 6px 20px 0px rgba(16, 24, 40, 0.08)
- 0px 2px 16px 0px rgba(16, 24, 40, 0.08)
- 0px 0px 0px 1px rgb(230, 234, 244)
- Borders: 1px solid rgb(230, 234, 244)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid blue (#3E57DA) with white text for primary actions, and outlined/ghost styles for secondary actions. Pill-shaped for smaller buttons, slightly rounded for larger ones.
- **card:** White background (#FFFFFF) with subtle shadows (0px 6px 20px rgba(16, 24, 40, 0.08)) and 12px border radius.
- **chip:** Pill-shaped elements with 1px borders and small padding, often used for tags or secondary filters.
- **input:** Clean, minimal inputs with a 1px border (rgb(230, 234, 244)) and subtle shadow on focus.
- **hero:** Large, centered headline (56px) with a soft cool background gradient, accompanied by a prominent CTA and product preview.

## Do's and Don'ts

**Don't:**
- Don't use a pure black (#000000) for text — screenshot shows a deep navy (#0D0F2C) for better readability.
- Don't use a wide variety of font weights — screenshot shows only 400 and 500 weights consistently.
- Don't use sharp, unrounded corners — screenshot shows 12px radius for cards and pill shapes for buttons.
- Don't use heavy, dark backgrounds for the main layout — screenshot shows a light, cool-blue tinted background (#F5F8FF).
- Don't use decorative or script fonts — screenshot shows a clean, geometric-sans font for all text.
- Don't use complex, multi-color gradients — screenshot shows subtle, single-direction gradients or solid colors.

---

## System Prompt (paste into AI agent)

```
Synthesia is an enterprise-grade SaaS platform for AI-driven video creation. The design features a clean, professional aesthetic with a primary blue accent (#3E57DA) and a soft, cool-gray background (#F5F8FF). The typography is a consistent geometric-sans font (using weights 400 and 500) with large, tight headlines. Key interaction patterns include subtle shadows and 12px rounded corners. Critical don'ts: avoid pure black text, sharp corners, heavy dark backgrounds, complex gradients, and decorative fonts. The layout is centered and spacious, prioritizing clarity and ease of navigation for business users.
```