---
title: "Captions design system"
variant: extended
source: https://captions.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/captions-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Captions · Design System

> A calm canvas for AI-powered video creation

**Theme:** light · **Industry:** ai · **Source:** https://captions.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Captions pairs an editorial, high-contrast typographic voice with a bright, spacious canvas. Soft cyan accents and rounded product previews keep the page approachable while video examples explain the editing tools.

## North star

Keep the interface quiet and spacious so editorial headlines and vivid video demonstrations carry the story.

## Overview

The page is built on a white canvas, with pale blue surfaces and a restrained cyan accent providing the brand’s main colour cues. A soft orange-to-cyan atmospheric gradient appears around the top navigation and lower FAQ area; keep this as background atmosphere rather than turning it into a dominant interface colour. Large, dark editorial serif headlines contrast with DenimINK sans-serif navigation, body copy, and controls. The hero centers its message above a product-like editing panel and a row of portrait video examples. Below, wide margins and generous vertical gaps create a calm sequence of feature splits, paired cards, capability lists, media examples, social proof, CTA, FAQ, and footer. Rounded cards and compact pill controls soften the otherwise clean geometry. Video stills carry varied colours and people, but the UI chrome stays quiet, allowing the product demonstrations to lead.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and the broad uninterrupted background behind most sections. |
| Soft Graphite | `#7e8486` | `--color-soft-graphite` | semantic | Muted link and body text, with occasional subdued card or inverse-surface use. |
| Ice Veil | `#effbff` | `--color-ice-veil` | surface | Pale blue feature-card and product-preview surface; also appears in the cyan gradient. |
| Mist Line | `#e8eff2` | `--color-mist-line` | semantic | Subtle hairline border colour for quiet separation on light backgrounds. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Strong heading and footer text where the page needs its darkest contrast. |
| Slate Text | `#434647` | `--color-slate-text` | semantic | Secondary headings and supporting copy, including text on pale feature cards. |
| Charcoal UI | `#1d1f20` | `--color-charcoal-ui` | neutral | Navigation and button text, dark outlined controls, and selected interface details. |
| Gradient Smoke | `#666666` | `--color-gradient-smoke` | surface | Measured within gradient imagery; not a defining interface colour in the screenshots. |
| Prism Cyan | `#a6ecff` | `--color-prism-cyan` | accent | Cyan end of the pale blue gradient and a restrained highlight around product accents. |
| Cloud Edge | `#d0d6d7` | `--color-cloud-edge` | semantic | Fine card and button outline detail, including subtle inset control borders. |
| Deep Slate | `#2a2c2d` | `--color-deep-slate` | neutral | Occasional darker navigation, heading, and body text detail. |
| Pewter Gray | `#9fa5a7` | `--color-pewter-gray` | semantic | Rare muted text detail; keep it secondary and low prominence. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#effbff` (Ice Veil) · `--color-surface-2` → `#7e8486` (Soft Graphite) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#7e8486` (Soft Graphite) · `--color-text-subtle` → `#434647` (Slate Text) · `--color-border` → `#e8eff2` (Mist Line) · `--color-accent` → `#a6ecff` (Prism Cyan)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#effbff` | 19.91:1 | AAA |
| `#000000` | `#7e8486` | 5.53:1 | AA |
| `#7e8486` | `#ffffff` | 3.8:1 | AA-large |
| `#7e8486` | `#effbff` | 3.6:1 | AA-large |
| `#434647` | `#ffffff` | 9.52:1 | AAA |
| `#434647` | `#effbff` | 9.03:1 | AAA |
| `#434647` | `#7e8486` | 2.51:1 | fail |
| `#a6ecff` | `#ffffff` | 1.31:1 | fail |
| `#a6ecff` | `#effbff` | 1.24:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 68.52%, rgba(0, 0, 0, 0.6) 100%)`
- `linear-gradient(rgb(239, 251, 255) 40%, rgb(166, 236, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DenimINK-fc4757ccf169d42a | `--font-body` | webfont | 400, 500 | Navigation, body copy, feature headings, controls, captions, and links. | Inter |
| Exposure-09cb373df0d2138c | `--font-display` | webfont | 400 | Large hero headline and prominent editorial section titles. | DM Serif Display |

- **DenimINK-fc4757ccf169d42a:** Sans-serif workhorse, mostly regular weight; medium weight for buttons and uppercase, tracked eyebrows.
- **Exposure-09cb373df0d2138c:** Use regular-weight serif for a distinctive editorial contrast; keep headlines dark and compact.

### Type scale — Augmented Fourth (ratio ≈ 1.442, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | -0.01em | — | Exposure-09cb373df0d2138c | Centered hero statement in expressive editorial serif. |
| h2 | 32px | 400 | 1 | 0 | — | DenimINK-fc4757ccf169d42a | Major section headings in the clean sans-serif face. |
| h3 | 24px | 400 | 1 | -0.01em | — | DenimINK-fc4757ccf169d42a | Feature and sub-section headings. |
| body | 16px | 400 | normal | 0 | — | DenimINK-fc4757ccf169d42a | Supporting feature descriptions and explanatory copy. |
| caption | 14px | 400 | 1.3 | 0 | — | DenimINK-fc4757ccf169d42a | Fine print, media captions, and compact supporting labels. |
| button | 16px | 500 | normal | 0 | — | DenimINK-fc4757ccf169d42a | Primary and secondary CTA labels. |
| nav | 16px | 400 | normal | 0 | — | DenimINK-fc4757ccf169d42a | Top navigation and footer navigation links. |
| link | 16px | 400 | normal | 0 | — | DenimINK-fc4757ccf169d42a | Inline links and repeated feature links. |
| eyebrow | 14px | 500 | 1.3 | 0.05em | uppercase | DenimINK-fc4757ccf169d42a | Small uppercase section labels with measured tracking. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 40, 44, 52 px.
- Section rhythm 60px · element gap 24px · card padding 25px · max content width 1280px.

Use a centered content area capped at the measured 1280px maximum, with a comfortable density and a 4px base spacing system. The hero is centered and vertically open, while feature content alternates between left-aligned copy and right-side media or uses paired cards. Follow the measured 60px section gap and 24px element gap as rhythm references; card padding is measured at 25px. The page moves through feature explanations, examples, proof, CTA, FAQ, and footer without heavy section bands.

## Shape & elevation

- Radius: button `12px` · card `30px` · nav `30px` · xs `8px` · sm `12px` · md `15px` · lg `20px` · xl `30px` · 2xl `40px` · pill `9999px`
- Shadow `inset` (button): `rgb(208, 214, 215) 0px 0px 0px 0.5px inset`
- Shadow `inset-2` (nav): `rgba(255, 255, 255, 0.4) 0px 0px 0px 1.5px inset, rgba(0, 0, 0, 0) 0px 10px 30px 0px, rgba(0, 0, 0, 0) 0px 10px 20px 0px, rgba(0, 0, 0, 0) 0px 5px 10px 0px, rgba(0, 0, 0, 0) 0px 2px 6px 0px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.05) 0px 4px 10px 0px`
- Shadow `xl` (card): `rgba(190, 210, 235, 0.45) 0px 0px 80px 0px`
- Shadow `inset-3` (button): `color(srgb 0 0.815686 1 / 0.2) 0px 0px 0px 0.5px inset`
- Motion: standard transition `0.15s ease` on interactive elements.

Most sections sit flat on the white canvas. Separate cards with pale fills, fine borders, and large rounded corners rather than strong drop shadows. Reserve the measured soft blue halo for a featured product card, and use restrained inset or subtle button shadow treatment for controls.

## Imagery

Use portrait-oriented video stills and product interface previews as the main imagery. The hero combines an editing panel with a row of sample clips; later sections show people, captions, and editing controls in rounded media frames. Images are colourful and human, but the surrounding UI remains pale and minimal. Avoid adding decorative illustration that competes with the real product examples.

## Components

### Floating navigation

A rounded, lightly outlined horizontal navigation bar over the atmospheric hero background, with dark links and a bordered Sign up control.

### Hero editor preview

Centered product mockup with a pale upload area, compact controls, and a row of portrait video examples beneath.

### Feature split

Pair explanatory copy with a large rounded product or video preview; alternate visual alignment to sustain the long-page rhythm.

### Pale feature cards

Use #effbff card surfaces, Slate Text copy, generous internal breathing room, and the measured 30px card radius.

### Prism Pro pill

Compact cyan-tinted pill with bright cyan label and a fully rounded silhouette, used as a product capability marker.

### FAQ rows

Simple question rows with ample vertical separation, light dividers, and a small plus control aligned to the right.

### Footer directory

Dense multi-column link directory on white, with compact headings and a separate lower legal-link row.

### Measured component styles

- **Primary button** (“Add footage to start”): background #f5f8fa · text #1d1f20 · radius 12px · padding 0px · 400 16px DenimINK-fc4757ccf169d42a
- **Secondary button** (“Sign up”): transparent background · text #1d1f20 · border 1px solid #1d1f20 · radius 15px · padding 12px 20px · 500 16px DenimINK-fc4757ccf169d42a
- **Link** (“Captions' AI editing transforms footage”): transparent background · text #7e8486 · radius 0px · padding 0px · 400 16px DenimINK-fc4757ccf169d42a
- **Card** (“AI Edit Watch as AI edits your entire vi”): background #effbff · text #434647 · radius 40px · padding 20px 20px 40px 20px · 400 16px DenimINK-fc4757ccf169d42a
- **Navigation item** (“Homepage”): transparent background · text #1d1f20 · radius 0px · padding 0px · 400 16px DenimINK-fc4757ccf169d42a

## Do

- Keep the main canvas white and spacious.
- Use serif display type for the hero headline.
- Use sans-serif typography for controls and supporting copy.
- Let video demonstrations provide most of the colour.
- Apply pale blue surfaces selectively to product cards.
- Use rounded cards and quiet, fine borders.
- Keep cyan accents small and purposeful.

## Don't

- Do not make the gradient a solid page background.
- Do not add saturated colour to ordinary UI controls.
- Do not crowd the hero with extra navigation or copy.
- Do not replace real video examples with generic decoration.
- Do not use heavy shadows across every card.
- Do not use the display serif for dense body copy.

## Agent prompt

Build a new Captions-style page with a bright, open canvas and an editorial product-story flow. Use Gallery White (#ffffff) as the dominant background, Ice Veil (#effbff) for selected product surfaces, and Prism Cyan (#a6ecff) only as a restrained accent or gradient endpoint. Set major display statements in a high-contrast serif and use a clean sans-serif for navigation, controls, and copy. Center the hero, then sequence generous feature splits, rounded video previews, capability content, proof, CTA, FAQ, and a directory-style footer. Keep media human and portrait-led, with visible editing UI where relevant. Use fine Cloud Edge (#d0d6d7) borders and Mist Line (#e8eff2) separators instead of heavy elevation. Preserve wide margins, calm spacing, and clear text hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long-form white canvas with a centered hero followed by staggered feature, media, proof, CTA, and FAQ blocks. | product-led storytelling, feature discovery, social proof, FAQ disclosure | editorial hero headline, rounded media cards, pale cyan surfaces, portrait video previews |
| 2 | footer | White footer arranged as a broad multi-column link directory with a separate legal row. | deep-link navigation, social links | brand mark, compact column headings, dense link lists, legal links |

## Source CSS custom properties (selected)

```css
--font-family-exposure: Exposure-09cb373df0d2138c,"Exposure-09cb373df0d2138c fallback: Times New Roman",serif;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/captions-ai