# Captions · Design system migration spec

> Source: https://www.captions.ai  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a modern, professional SaaS tool that uses typography and subtle depth to create a premium feel.

## 1. Identity DNA

The design system for Captions functions like a professional video editor's suite: everything is organized, calibrated, and purposeful, with a focus on clarity over ornamentation. Like a well-configured timeline, the interface provides a clean workspace where the content—the user's video—remains the primary subject, supported by a framework of precise tools. The result is an environment that feels both technically capable and aesthetically refined.

**One-liner:** AI-powered video editing tool that automates professional-grade captions and styles.
**Keywords:** AI · video · professional · creativity · editing
**Analogy:** A professional video editor that runs entirely in your browser.

## 2. Color

The color palette is a study in restraint, built on a foundation of airy light teals and whites that establish a sense of calm, open space. Deep charcoal provides the necessary contrast for text, ensuring readability without the harshness of pure black, while the overall effect is one of professional clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f5f9fa` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--bg-quiet` | `#eef4f6` | quiet area |
| `--ink` | `#1d1f20` | body text |
| `--ink-soft` | `#2a2c2d` | secondary text |
| `--muted` | `#595e5e` | placeholder |
| `--muted-soft` | `#7e8486` | weak hint |
| `--line` | `rgba(208, 214, 215, 0.5)` | divider |

**Color principle:** Clean, airy neutrals with dark charcoal text for high contrast and readability.

The underlying principle is functional contrast: a restrained palette that foregrounds content and reduces visual noise.

## 3. Typography

Typography is assigned distinct roles to create a clear hierarchy. A transitional serif carries the expressive weight of headlines, lending a premium, editorial authority, while a humanist sans-serif handles body copy and UI elements, prioritizing legibility and approachability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 400 | -0.48px | Hero headlines |
| h2 | 40px | 1.2 | 400 | -0.24px | Section headlines |
| body | 16px | 1.3 | 400 | 0px | Main body text |

**Type rules:**
- 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.

## 4. Spacing

A consistent spatial rhythm is established through multiples of 4 and 8 pixels, creating a predictable and harmonious grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** Consistent spacing multiples of 4 and 8, with generous vertical gaps between major page sections.

## 5. Surfaces

Depth is communicated through subtlety rather than pronounced effects. Surfaces use very soft, almost imperceptible shadows or light inset borders to float above the background, defining interactive areas without visual weight.

- **Radius:** sm 8px · md 12px · lg 15px · pill 9999px
- **Shadows:**
  - 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.

## 6. Layout

The structural skeleton is a centered column layout that maintains a comfortable maximum width for optimal reading. This core structure gracefully simplifies to a single column on smaller viewports, preserving clarity across devices.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is used sparingly and with clear purpose. Quick transitions provide immediate feedback for interactive elements like buttons, while smoother opacity and transform animations govern the appearance of new content, ensuring interface changes feel deliberate and fluid.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Quick transitions for interactive elements like buttons and menus.
  - Smooth opacity and transform animations for appearing elements.

- **Hover:** Subtle background color changes or slight opacity adjustments.
- **Click:** Immediate visual feedback, often through background color shifts.
- **Transition:** Standardized transitions for color, background-color, and transform properties.
- **Keyboard:** Focus styles typically utilizing the same subtle border or outline styles as hover states.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and direct. It favors clear, declarative headlines and action-oriented calls to action, avoiding both casual slang and aggressive sales language.

- **Tone:** Professional, confident, and straightforward.
- **Headline style:** Clear, declarative statements emphasizing the core value proposition.
- **CTA style:** Direct and action-oriented, often using simple verbs.
- **Avoid:** Overly casual or slang language. / Aggressive sales jargon. / Complicated technical jargon in primary UI text.

### Don'ts
- ❌ 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.

The system deliberately avoids bright saturated colors, playful rounded fonts, and heavy decorative shadows, committing instead to a calm, professional interface built on subtle depth and typographic hierarchy.

## System Prompt (paste into AI tool)

```
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.
```