What is Captions' primary brand color?

Captions has no chrome-applied brand accent. The interface is built almost entirely on charcoal ink #1d1f20 (429 occurrences as text and border) over a white #ffffff canvas, with three off-white surfaces (#eef4f6, #effbff, #f5f9fa) for gentle section banding. A vibrant 14-token palette — violet #6c4df7, sea #00d0ff, meadow #5bf6bb, barbie-pink #ff1476, mustard #ffdd33, and others — is declared as CSS variables but renders zero times in page chrome. Those hues live inside the product itself, on caption stickers and video thumbnails.

What typography does Captions use, and what should I use if the custom faces aren't available?

Captions runs two custom families. Exposure, a serif, is used only for display headings — h1 and h2 at 48px, weight 400, line-height 48px (or 67.68px on the hero), letter-spacing -0.48px. DenimINK, a custom sans, handles everything else from 18px paragraph copy down to 11px metadata. Newsreader or Fraunces are workable open-source substitutes for Exposure; Inter or DM Sans cover DenimINK. The split itself matters more than the families — keep the serif scoped to h1/h2 only, never let it leak into card titles or buttons.

What corner radius does Captions use?

The system constant is 12px, repeated 64 times on the page across cards, video thumbnails, and the hero composer surface. A 15px radius appears three times on softer image plates, 8px sits on the primary CTA button, 20px and 30px scale up for the prompt input and the composer card respectively, and the full pill 9999px is used twice — both times on the small sign-in badge in the navigation. There is no sharp 0px geometry anywhere outside the body grid.

Does Captions have a dark mode?

The captured marketing surface is light-only. Canvas is white #ffffff, surfaces step through air #effbff, gray-50 #eef4f6, and bone #f5f9fa, and text is charcoal #1d1f20 rather than pure black. The product app likely runs darker chrome to let video previews dominate, but that surface lives behind authentication and isn't represented here. The vibrant palette in CSS variables would support a dark theme — those tokens are pre-mapped — but the marketing site doesn't ship one.

Can I use this DESIGN.md to build my own React video app?

Yes. The file is designed to be fed into Claude, Cursor, or any AI tool that reads structured tokens, and the agent will reproduce Captions' two-family discipline — Exposure scoped to display, DenimINK everywhere else — rather than collapsing to a default sans. You can also reference tokens directly: every hex, weight, and 12px radius is a quoted string you can paste into Tailwind config. The system assumes you bring colorful video content; without it, the restrained chrome will read empty.

What's missing from this DESIGN.md spec?

Several things, listed in the Known Gaps section: in-app composer chrome (timeline, layer panel, export dialog) lives behind auth and isn't represented; precise hover and focus deltas are subtle enough that they're hard to extract reliably; form validation states and error chips aren't captured on the marketing page; and the vibrant 14-token brand palette is declared but unused, so the spec documents what those tokens exist for but not exact in-product usage patterns.

Captions Design System

Captions' design system as a DESIGN.md file.

About Captions DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source captions.ai

AI & LLM Platforms
Music, Video & Streaming

Captions is the AI video editor that promises to edit footage "like a professional editor would," and its marketing page wears that claim as a discipline rather than a slogan. The canvas is white "#ffffff". Display headings run Exposure, a serif, at 48px with -0.48px tracking and a stretched 67.68px line-height on the hero — the typographic equivalent of a film title sitting above a poster. Everything else — body, nav, button, footer, legal — is set in DenimINK, a custom sans, at 11–18px in weights 400 and 500. The only colors the page actually renders are charcoal "#1d1f20" (429 occurrences as text and border), a sequence of gray-200 through gray-950 neutrals, and white. Where most AI tools shout with gradients, Captions stays quiet so the AI-edited video thumbnails carry the saturation.

This DESIGN.md packages that discipline into Google Labs' machine-readable format. Inside: 24 color tokens — split between a structural stack (charcoal, four gray steps, two off-white surfaces, hairlines) and a brand stack of 14 declared but unused-in-chrome accents (violet "#6c4df7", sea "#00d0ff", meadow "#5bf6bb", barbie-pink "#ff1476", mustard "#ffdd33", peach "#ffca9f", sunset "#f99f3f", and seven more), all of which live in CSS custom properties for use inside video preview chrome. Thirteen typography tokens map the Exposure/DenimINK split. Five radius tiers cluster around 12px. Sixteen spacing values, an Exposure-fronted hero/h2 pair, and 17 component recipes covering the pill-shaped sign-in badge, primary CTA, hero composer card, navigation, footer columns, and trust-bar logos.

Drop the file into Claude, Cursor, or Copilot and the agent will reproduce the two-family split — Exposure only on h1/h2, DenimINK on everything else — rather than collapsing to a single sans. Or reference the tokens directly: every hex, weight, tracking value, and 12px radius is a quoted string you can paste into Tailwind config or CSS variables. The system is worth studying because it answers an unusual question in the AI category: when the product generates colorful content, the marketing chrome should not.

What makes it distinct

Two-typeface splitExposure serif for h1/h2 display only, DenimINK sans for every other role across the page
Inverted palette economy24 vivid brand hexes live in CSS variables but render zero times in chrome; saturation is reserved for video content
12px radius as the system constant64 of 76 rounded surfaces use 12px, with 9999px pills appearing only twice on nav badges
Display headings at 48px serif with -0.48px trackingfilm-poster compression rather than the SaaS 700-weight muscle move
Charcoal ink #1d1f20 carries 429 occurrences as text and borderthe only color the interface actually wears

Live at captions.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

captions.ai

Explore Captions

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Text

Headlines, body, captions, muted.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Captions design system FAQ

Common questions about Captions's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Captions — official site

The AI video editor that edits like a professional editor — generate, caption, and ship video from one composer.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Captions in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→