Captions Design System

Overview

Captions' page is built around an unusual two-family typographic split that does the entire job of brand differentiation. Exposure-on-display, DenimINK-on-everything-else: the serif Exposure is reserved exclusively for h1 and h2 (both at 48px, weight 400, letter-spacing "-0.48px"), and the custom sans DenimINK carries every other text role from the 18px paragraph down to the 11px metadata at letter-spacing "0.22px". Where most AI-product marketing sites pick a single sans and lean on weight to create hierarchy, Captions creates hierarchy through family contrast — and reserves bold weights almost entirely (the body sits at weight 400, with 500 used only on label-md and the nav sign-in badge).

The chrome itself is near-monochrome. Inverted palette economy: the stylesheet declares 14 vivid brand hexes — violet {colors.violet} ("#6c4df7"), sea {colors.sea} ("#00d0ff"), meadow {colors.meadow} ("#5bf6bb"), barbie-pink {colors.barbie-pink} ("#ff1476"), mustard {colors.mustard} ("#ffdd33"), and nine more — yet none of them render in the page chrome at all. Charcoal {colors.charcoal} ("#1d1f20") accounts for 429 of the page's rendered color occurrences (215 as text, 214 as border); white "#ffffff" carries the canvas with 91 occurrences. The vibrant tokens are pre-staged for the product app and for video thumbnails, not the marketing surface.

Geometry resolves around a single number. The 12px radius ({rounded.md}) appears 64 times on the page — on thumbnail cards, feature cards, sticker overlays, and the body of every CTA-adjacent surface. Pill geometry {rounded.full} ("9999px") is used twice and only on the small sign-in badge in the top navigation. The composer card itself jumps to 30px ({rounded.composer}) — the only place the system widens its corners to acknowledge that an input area needs visual softness. Unlike the convention of stacking three or four radius tiers across a single layout, Captions commits hard to 12px and uses scale-deviation as a rare deliberate signal.

Colors

The palette splits cleanly into two layers — what the chrome wears and what the product paints.

Structural ink and surfaces (rendered in chrome)

• Charcoal (#1d1f20) — frequency 429. Used as text (215), border (214). The system's load-bearing color — every primary text block, every hairline, every nav label. Bound to CSS variables --color-gray-900 and --color-charcoal.
• White (#ffffff) — frequency 91. Used as bg (48), text (21), border (21). The canvas; also the nav badge surface and the composer card fill. Clustered with near-whites #f5f9fa (bone) and #effbff (air).
• Gray-600 (#595e5e) — frequency 32. Used as text (16), border (16). Secondary text and footer link color; the system's "muted but legible" tone.
• Gray-800 (#2a2c2d) — frequency 24. Used as text (12), border (11). The hero h1 and h2 colors specifically — slightly lighter than charcoal so the serif headlines read warm rather than printed.
• Gray-200 (#d0d6d7) — frequency 24. Used as shadow (22), border (2). Bound to --color-medium-gray; the soft drop tone under composer cards.
• Black (#000000) — frequency 23. Used as gradient (20), border (1), text (1), shadow (1). Reserved for gradient stops on hero overlays and badge strokes — never as flat text.
• Gray-500 (#7e8486) — frequency 12. Used as text (6), border (6). Body paragraph text under feature cards.
• Gray-100 (#eef4f6) — frequency 5. Used as bg (5). The "pressed" surface variant; also the primary button rest fill.
• Gray-400 (#9fa5a7) — frequency 4. Used as text (2), border (2). Disclaimer and legal-note color.
• Gray-300 (#bec3c6) — frequency 4. Used as text (2), border (2). The disabled button border and label.
• Gray-150 (#dfe5e7) — frequency 0 on the captured viewport; declared as --color-gray-150 and reserved for soft hairlines.
• Gray-950 (#141515) — declared as --color-gray-950; used in product chrome.
• Gray-700 (#434647) — declared as --color-gray-700 / --color-dark-gray; reserved for darker body text.

Brand voltage (declared, not rendered in chrome)

• Violet (#6c4df7) — Bound to --color-violet. Reserved for product accents and sticker overlays — appears zero times in the marketing chrome.
• Sea (#00d0ff) — Bound to --color-sea. A bright cyan held back from chrome use.
• Meadow (#5bf6bb) — Bound to --color-meadow. Mint accent reserved for video preview chrome.
• Sky (#a6ecff) — Bound to --color-sky. A lighter cyan companion to sea.
• Mustard (#ffdd33) — Bound to --color-mustard. The yellow of caption stickers, not nav badges.
• Sunset (#f99f3f) — Bound to --color-sunset. Warm orange held in reserve.
• Peach (#ffca9f) — Bound to --color-peach. A softer skin-tone-adjacent fill.
• Barbie-pink (#ff1476) — Bound to --color-barbie-pink. The hottest accent in the file — and it is genuinely absent from chrome.
• Pink (#ff9bb2) — Bound to --color-pink. The softer companion.

Frequency narration tier note: every vibrant token sits at the "absent" tier on the rendered surface — and the absence is the design move. The product paints in those colors; the page that sells the product does not.

Typography

Captions ships two custom families. Exposure is a serif, used exclusively on h1 and h2 — both at 48px, weight 400, letter-spacing "-0.48px". The hero h1 stretches its line-height to 67.68px (1.41x ratio) for a poster-like vertical presence; the section h2 collapses to 48px line-height (1.0x ratio) for tighter section markers. DenimINK is a custom sans, used on everything else — paragraphs at 18px / 14px / 13px, buttons at 16px, micro labels at 11px. The family-contrast carries hierarchy that other systems would assign to weight.

The DenimINK scale is unusually narrow on weight. Weight 400 is the default for paragraph copy, captions, body links, and micro labels; weight 500 appears in only four places — the 16px medium body, the 14px label, the 13px caption-medium, and the 11px micro. There is no weight 600 or 700 anywhere on the page. Whispered authority: the brand chooses to land its emphasis with serif/sans family contrast rather than weight muscle, which is the move that gives the page its understated voice.

Letter-spacing is positive at the micro end of the scale and negative at display. The 11px micro label runs "0.22px" tracking; 13px caption-medium runs "0.3px"; 14px label runs "0.14px". Above 24px the spacing flips negative: 24px heading at "-0.24px", 48px display at "-0.48px". The scale crosses zero around the body-md size, where DenimINK runs at "normal" — neutral spacing for the long-paragraph workhorse.

Layout

Spacing system

Captions runs an 8px-based scale with a 6px micro step and generous section gaps. Tokens: {spacing.xxs} 4px · {spacing.xs} 6px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 18px · {spacing.xl} 24px · {spacing.2xl} 30px · {spacing.3xl} 40px · {spacing.4xl} 60px · {spacing.5xl} 80px. The dominant block padding is 30–40px on composer cards and 60–80px between marketing sections.

Grid and container

--container-max-width is set to 1440px, the captured viewport width — wide but not cinema-wide. The hero centers a single Exposure h1 above a 705px-wide composer card; below the fold, a two-column "edits with taste, not just speed" band pairs a video preview with a body paragraph at roughly equal weight. The trust bar (AXIOS, Bloomberg, TechCrunch, Forbes) runs horizontally across the full container at 80px vertical padding.

Whitespace philosophy

The hero alone uses 200px top padding to push the h1 down from the nav, an unusually generous breathing band. Section-to-section padding sits at 60–80px. Inside cards the rhythm tightens — 24–30px interior padding — creating a contrast between expansive marketing-section air and compact content-card density. This is the deliberate inverse of a typical SaaS site, which packs marketing sections tight and pads its components heavily.

Elevation and Depth

Captions uses shadow-as-hairline: rather than dropping a heavy 0 12px 24px rgba(0,0,0,0.12) under cards, the system layers gray-200 {colors.gray-200} ("#d0d6d7") as a soft drop with low blur — 22 of the page's 23 shadow occurrences use this single tone. The result is depth so faint it reads more as a vignette than a shadow.

Where most AI-product marketing pages drop heavy shadows under hero composers to suggest tactile depth, Captions keeps the composer card flat-with-hairline and lets the rounded corner do the lifting.

Shapes

The corner-radius philosophy is one-number commitment. The 12px radius ({rounded.md}) appears 64 times across the page — every thumbnail card, every feature panel, every CTA-adjacent surface. The other tiers are deliberate deviations:

The composer card's jump to 30px is the system's softest geometry and a deliberate signal: this is where the user types, so the corners widen to invite input.

Components

Navigation

top-nav — Transparent over white canvas at 44px height. Houses three nav links and one pill-shaped sign-in badge.

nav-link — DenimINK at 16px / weight 400 in charcoal. No underline, no hover-color shift on the rendered state — {colors.charcoal} ("#1d1f20") is the only color the link wears.

nav-signin-badge — The only {rounded.full} pill in the system. White fill with a 1px gray-200 stroke and DenimINK at 16px / weight 500. Used twice (sign-in and sign-up) at the right edge of the nav.

Buttons

button-primary (rest) — {colors.gray-100} fill with {colors.gray-300} text and a matching 1px border, 8px radius, 40px height. The disabled-looking rest state is a deliberate "type your prompt first" cue.

button-primary-active — {colors.charcoal} fill with white text once the prompt input has content. Same geometry, no border. The activation is the only color shift the button performs.

button-secondary — Transparent fill, charcoal text, 1px gray-200 border, 8px radius. Used in the footer and dialog secondary actions.

Hero and Headings

hero-heading — Exposure at 48px / weight 400 / line-height 67.68px / "-0.48px" tracking in {colors.gray-800} ("#2a2c2d") — a notch lighter than charcoal so the serif reads warm. 200px top padding pushes the headline well below the nav.

section-heading — Same Exposure family at 48px, but line-height collapses to 48px (1.0x) for compact section markers like "Captions edits with taste, not just speed."

Cards

composer-card — The hero's central surface. White fill, gray-150 hairline, 30px radius ({rounded.composer}), 24px interior padding. The widest corner in the system.

thumbnail-card — Video thumbnails below the hero. White fill, gray-150 hairline, 12px radius ({rounded.md}).

feature-card — The two-column "edits with taste, not just speed" band uses {colors.gray-100} ("#eef4f6") fill, 12px radius, 30px interior padding. The page's only colored surface that isn't pure white.

Body and Legal

body-paragraph — DenimINK at 13px / weight 400 / "0.325px" tracking in {colors.gray-400} ("#9fa5a7"). The same tone is reused for legal disclaimer text, deliberately under-saturated.

legal-note — A muted variant of body-paragraph used directly below the composer ("By uploading a video to be edited using AI, you are agreeing to our Terms…"). Same DenimINK at 13px in gray-400.

Trust Bar and Footer

trust-logo — AXIOS, Bloomberg, TechCrunch, Forbes wordmarks rendered in charcoal on the white canvas at 80px vertical padding. No grayscale washing — the logos sit at their native press-release weight.

footer-column — White fill, 40px vertical padding, DenimINK at 14px / weight 400. Stacked into four columns under the page band.

footer-link — {colors.gray-600} ("#595e5e") DenimINK at 14px. Subdued.

Micro

micro-label — 11px DenimINK at weight 500 with "0.22px" positive tracking. The smallest text role in the system, used 20 times for category badges and metadata.

Do's and Don'ts

Do scope Exposure to h1 and h2 only. Once Exposure leaks into card titles (24px heading-card uses DenimINK at "-0.24px" tracking, not Exposure), the family-contrast that carries the brand collapses.

Do keep buttons in the 8px radius lane. The 12px system-constant radius applies to cards and surfaces; buttons specifically drop to 8px ({rounded.sm}) — a deliberate scale split that signals "interactive at a smaller-corner cadence."

Do treat the vibrant palette as product-only paint. Violet, sea, meadow, mustard, barbie-pink, and the rest are declared in CSS variables for in-product use (caption stickers, video overlays, thumbnails). The marketing page renders zero occurrences of them — keep that absence intact.

Don't use #000000 as flat text. Black appears 23 times on the page, but 20 of those are gradient stops on video thumbnail overlays. Flat text uses {colors.charcoal} ("#1d1f20") or {colors.gray-800} ("#2a2c2d") instead — pure black would read harsh against the warm-charcoal hero headlines.

Don't stack DenimINK weights to create hierarchy. Weight 500 appears only on label-md, the medium-body link, the medium caption, and the micro label. There is no weight 600 or 700 in the system — reaching for them re-introduces the SaaS muscle move the brand chose to avoid.

Don't widen all card corners to match the 30px composer. The composer's {rounded.composer} is a one-off softness signal for the input area; thumbnail cards stay at 12px. Widening every card collapses the deliberate contrast.

Don't use the {rounded.full} ("9999px") pill outside the nav sign-in badge. It appears twice on the entire page, both times on the small auth badge. Applying it to CTAs or chips re-introduces a SaaS shape language the brand specifically refuses.

Known Gaps

• In-app composer chrome: the timeline, layer panel, generation controls, and export dialog live behind authentication and aren't represented in this DESIGN.md.
• Hover and focus deltas: the button rest-to-active state shift (gray-100 → charcoal fill) is captured, but micro-hover transitions on cards and nav links are subtle enough that exact opacity and color deltas aren't reliably extractable from a static capture.
• Form validation states: error chips, helper text colors, and disabled input treatments aren't visible on the captured marketing surface.
• Vibrant palette in-product usage: the 14-token brand stack (violet, sea, meadow, barbie-pink, mustard, sunset, peach, pink, sky, and others) is declared but renders zero times on the page; exact usage patterns inside the product app aren't documented here.
• Dark mode: the marketing surface is light-only. The CSS variable structure suggests a dark theme could be supported, but no dark-mode tokens are paired in the captured CSS.
• Animation timing: the marketing page's scroll-triggered reveals and composer-card micro-interactions aren't captured — only static rest states.