Twelve Labs — design system & UI screens
Dark video-intelligence landing; a two-line headline over a blurred video-frame mosaic with a Try-on-Playground CTA and an investor logo wall (NEA, NVentures, Amazon).
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/twelve-labs.
Decoded design system
Twelve Labs's decoded design system: background #F5F5F5, text #1D1C1B, accent #5864ED, link #5864ED, primary #0000EE; type scale h1 48px / h2 48px / body 16px; 4px spacing base; 8px base radius. The single interactive/action color is #F4F3F3 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #F5F5F5 |
| surface | #E8E7E7 |
| border | #D4D4D4 |
| text | #1D1C1B |
| text_muted | #6F6E6D |
| primary | #0000EE |
| accent | #5864ED |
| link | #5864ED |
| secondary | #30710E |
| button_bg | #F4F3F3 |
| button_text | #0000EE |
Using these colors
- Action color
#F4F3F3— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#5864ED— one role, not several (the action color).- accent
#5864ED— accent for emphasis — keep it rare on the page. - primary
#0000EE— a brand color — but the call-to-action uses #F4F3F3, not this. - secondary
#30710E— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Helvetica
- Body: Helvetica
- h1: 48px
- h2: 48px
- body: 16px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px
Radii
- base: 8px
- button: 14px
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →
Pages
Sections (11)
- Hero — See the Unseen Hero
- Feature — Results in Minutes
- Feature — Demanding Video Workflows
- Stats / Metrics — Create, Scale, Move Faster
- Logo Wall — Customer Logo Row
- Gallery / Showcase — Built for Every Workflow
- Feature — Secure by Design
- Feature — Perception and Orchestration
- Testimonial / Social Proof — Customer Stories
- CTA / Sign-up — Ready to See CTA
- Footer — Footer