---
name: Captions
description: "This site is an excellent example of a modern, professional SaaS tool that uses typography and subtle depth to create a premium feel."
version: alpha

colors:
  background: "#f5f9fa"
  primary: "#1d1f20"
  secondary: "#2a2c2d"
  neutral: "#595e5e"
  bg-soft: "#ffffff"
  bg-quiet: "#eef4f6"
  muted-soft: "#7e8486"
  line: "rgba(208, 214, 215, 0.5)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.48px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.24px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 12px
  lg: 15px
  pill: 9999px

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

---

## Overview

AI-powered video editing tool that automates professional-grade captions and styles.

*A professional video editor that runs entirely in your browser.*

## Colors

Clean, airy neutrals with dark charcoal text for high contrast and readability.

- **Background (`#f5f9fa`)** — uses `bg` token
- **Primary text (`#1d1f20`)** — uses `ink` token
- **Secondary text (`#2a2c2d`)** — uses `ink-soft` token
- **Muted (`#595e5e`)** — uses `muted` token
- **Borders (`rgba(208, 214, 215, 0.5)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** system-ui

- Use a transitional serif for display and headline typography to convey a premium, editorial feel.
- Use a humanist sans-serif for body copy and UI elements to maintain high legibility and approachability.
- Maintain tight negative tracking on large display text for a cohesive, professional appearance.

## Layout

Standard centered column layout with a maximum content width, transitioning to single-column on mobile.

*Rhythm:* Consistent spacing multiples of 4 and 8, with generous vertical gaps between major page sections.

## Elevation & Depth

- 0px 4px 10px 0px rgba(0, 0, 0, 0.05)
- 0px 0px 0px 0.5px inset rgb(208, 214, 215)
- 0px 0px 80px 0px rgba(190, 210, 235, 0.45)
- Borders: Subtle 1px inset borders using light grays to define floating elements and inputs.

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 15px
- `pill`: 9999px

## Components

- **button:** Pill-shaped buttons with subtle borders or solid dark backgrounds, minimal drop shadows.
- **card:** Soft rounded rectangles with light background colors and subtle inset borders or shadows.
- **chip:** Small pill tags with light borders, often accompanied by an icon.
- **input:** Large, spacious input areas or drop zones with rounded corners and dashed or solid light borders.
- **hero:** A prominent text-based headline paired with a large interactive widget or visual element.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated primary colors — screenshot shows a restrained palette of dark grays, whites, and soft teals.
- Don't use playful, rounded sans-serifs for headlines — screenshot uses a sophisticated transitional serif for main display text.
- Don't use heavy drop shadows on cards — screenshot shows very subtle shadows or inset borders for depth.
- Don't use sharp, square corners on major components — screenshot consistently uses rounded corners (8px to 15px).
- Don't use a dark theme as the primary interface — screenshot shows a predominantly light, airy theme.
- Don't clutter the hero section with too many elements — screenshot shows a clear hierarchy with a single primary headline and action.

---

## System Prompt (paste into AI agent)

```
This is a clean, professional AI video editing tool. The design DNA is defined by a sophisticated, light UI using a neutral palette of whites (#ffffff), soft grays (#f5f9fa, #eef4f6), and dark charcoal text (#1d1f20). Typography relies on a transitional serif for expressive, premium headlines and a humanist sans-serif for highly legible body copy and UI. Critical donts: avoid overly bright or saturated accent colors, avoid using playful rounded fonts, and avoid heavy shadows that detract from the clean, airy feel. Use rounded corners and subtle borders to define interactive elements. The overall vibe is refined, calm, and professional.
```