Captions
A bright, editorial AI-video interface built on a soft warm-to-cool gradient header fading into a near-white canvas, anchored by an Exposure serif display headline and DenimINK body type. The system reads as confident creative-tooling — soft 12px rounded cards, hairline-inset borders instead of heavy shadows, real product/video chrome shown inside cards, and a single electric-cyan (#00d0ff) accent used sparingly for tags and inline links against an otherwise monochrome graphite palette.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
48px · 400 · 1.41
The quick brown fox jumps
display-tight
48px · 400 · 1.0
The quick brown fox jumps
heading
32px · 400 · 1.0
The quick brown fox jumps
subhead
18px · 500 · 1.3
The quick brown fox jumps
body
13px · 400 · 1.385
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 40px | |
| xxxl | 44px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 6px | |
| sm | 8px | |
| md | 12px | |
| lg | 15px | |
| xl | 20px | |
| xxl | 30px | |
| xxxl | 40px | |
| hero | 58px | |
| full | 9999px |
FAQ
- What colors does Captions use?
- Captions's core palette includes #00d0ff, #1d1f20, #000000, #434647, #7e8486. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Captions DESIGN.md.
- What font does Captions use?
- Captions's primary typeface is Exposure. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Captions design system?
- A bright, editorial AI-video interface built on a soft warm-to-cool gradient header fading into a near-white canvas, anchored by an Exposure serif display headline and DenimINK body type. The system…