CURATED · OPEN · FREE

Captions

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

01

Identity DNA

A professional video editor that runs entirely in your browser.

02

Color

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

03

Typography

transitional-serif · humanist-sans · system-ui

• display48px · 400
• h240px · 400
• body16px · 400

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.

04

Spacing

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

05

Surfaces

Subtle 1px inset borders using light grays to define floating elements and inputs.

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)

06

Layout

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

07

Motion & Interaction

Quick transitions for interactive elements like buttons and menus. · Smooth opacity and transform animations for appearing elements.

Subtle background color changes or slight opacity adjustments. · Immediate visual feedback, often through background color shifts.

08

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.

09

Voice & Don'ts

• Tone Professional, confident, and straightforward.
• Headlines Clear, declarative statements emphasizing the core value proposition.
• CTAs Direct and action-oriented, often using simple verbs.

• 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.
• Avoid: Overly casual or slang language.
• Avoid: Aggressive sales jargon.
• Avoid: Complicated technical jargon in primary UI text.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko