What is Vimeo's primary brand color?

Vimeo's brand voltage is Cyan "#17d5ff" — a saturated electric blue at OKLCH lightness 0.81, chroma 0.14, hue 219. It appears 45 times on the captured page, mapped to `--colors-chroma-button-cta-primary`, `--colors-chroma-button-play-primary`, and `--colors-lohp-play-btn-bg-default` in the live CSS. The hover state steps to a deeper "#13b1d4" (the vimeo-blue-58 token), with "#02464f" reserved for the pressed and disabled tiers. The cyan never paints a section background, never appears as a card fill, and never pairs with a second chromatic accent on the same viewport.

Does Vimeo's design system have a light mode?

The hero and the platform-grid sections render dark — "#0a0e12" canvas with "#141a20" cards. The page does include alternating light bands at "#fafcfd" off-white for the customer-logo strip and the testimonial grid, but the marketing chrome — global nav, footer, primary cards, pricing tiles — is dark-first. The spec documents both ladders so an agent can reproduce the light-section breaks accurately, with "#fafcfd" surface and "#23313b" hairlines for any inverted band.

What typography does Vimeo use, and what should I use if ABCRepro isn't available?

Vimeo runs ABCRepro across every tier — 17 distinct type signatures, all in the same family, with InterTight, Helvetica, and Arial documented as fallbacks. The display scale runs from 72px weight 500 (hero h2, -3.6px tracking) through 40px h2, 24px h3 (-0.96px), 22px subhead, 18px lead, 16px body weight 400 (-0.48px), 14px secondary weight 500, and 12px caption weight 400. Inter at weights 400 / 500 / 700 is the closest open-source substitute, with Geist Sans as another viable option. The negative letter-spacing scales linearly at roughly 5% of font size at the top end.

Why does Vimeo use aggressive negative letter-spacing on display type?

The display scale pulls tracking to -3.6px at 72px hero, -1.6px at 40px h2, -0.96px at 24px h3, -0.86px at 22px subhead, and -0.48px at 16px body — roughly 5% of font size at the top of the ramp. This compresses headlines optically and gives Vimeo's voice an editorial cadence that matches the film-and-video category. Body holds tight at -0.48px so paragraphs still read as compact, and only the 12px caption tier and the button label fall back to `normal` letter-spacing.

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

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Vimeo's restraint: dark canvas, single cyan accent, surface ladder over shadows, bimodal radius scale. Reference the tokens directly inside Tailwind config or CSS variables — every color, type style, radius, and spacing value is a quoted scalar. The 21 component definitions cover the Join CTA, secondary buttons, play-button primary, the dark pricing card, generic feature card, comparison-table heading, top-nav, footer, and the accordion expanded state.

What's missing from this DESIGN.md spec?

A handful of things, documented in the Known Gaps section: form-input styling is partial since the captured page does not surface a text-input on the first scroll; the bokeh and chroma gradient tokens (orange, pink, green, purple ladders) exist as declared CSS variables but never surface on the marketing page in the captured viewport; and the player chrome and embedded video controls live in Vimeo's product UI rather than the marketing surface and are not extracted here. The cyan hover ladder values (vimeo-blue-58, vimeo-blue-80) come straight from Vimeo's canonical CSS variables.

Vimeo Design System

Vimeo's design system as a DESIGN.md file.

About Vimeo DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source vimeo.com

Music, Video & Streaming

Vimeo's marketing surface is the strictest single-accent dark canvas in the streaming category. The page floor is "#0a0e12" — a near-black with a faint blue cast registered at OKLCH lightness 0.16, never the flat "#000000" true black most video platforms default to — lifted by a single charcoal surface "#141a20" that carries every card, the pricing tile, the global nav, and the accordion panel. The brand voltage is a saturated electric cyan "#17d5ff" that appears 45 times across the captured page, scoped strictly to the primary Join CTA, the chroma play-button background, and the carousel-nav sub-content marker. No second chromatic accent. No gradient mesh. No atmospheric wash. The body palette runs through a graded warm-gray ladder — "#3d4751", "#4c5864", "#a9b2bc" — that handles secondary text, focus outlines, and tooltip icons.

The DESIGN.md file packages 22 color tokens, 14 typography roles, 7 corner radii, 9 spacing values, and 21 component definitions, all grounded in 493 declared CSS custom properties on the live `:root`. ABCRepro is the only typeface — every one of the 17 distinct type signatures resolves to the same family, with InterTight as the documented fallback. Display sits at 72px weight 500 with -3.6px negative letter-spacing for the hero, stepping down through 40px h2, 24px h3, 22px subhead, and 16px body at -0.48px. The corner-radius scale is bimodal — 100 captured 16px values for surface cards against 97 captured 8px values for buttons and chips, with the 12px CTA radius reserved for the primary Join action alone.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Vimeo's discipline — dark canvas, single cyan accent, surface lift over shadow — rather than a generic streaming dark theme. Or reference the tokens directly: every hex, font, radius, and spacing value is a quoted scalar you can paste into Tailwind config, CSS variables, or your component library. Vimeo is worth studying because it shows how an editorial video brand sustains a 72px hero and a saturated brand voltage without ever using the cyan as a section background — the page reads as production studio, not consumer streaming app.

What makes it distinct

Single accent voltageVimeo Cyan (#17d5ff) appears 45 times, scoped to the Join CTA and play-button primary against an otherwise monochrome dark canvas
Surface ladder over shadowsthree near-black tiers (#0a0e12 canvas, #141a20 cards, #23313b borders) carry hierarchy where most video platforms reach for drop shadows
Hero display at 72px weight 500 with -3.6px negative trackingconfidence by typographic compression rather than the 700+ weight enterprise video tools default to
ABCRepro as the only typeface17 type signatures, every one in the same family, where most marketing pages mix a display serif with a UI sans
Bimodal radius scale100 captured 16px values for surface chrome against 97 captured 8px values for controls, with the 12px CTA radius scoped to one action

Live at vimeo.com

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

vimeo.com

Explore Vimeo

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Vimeo design system FAQ

Common questions about Vimeo'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.

Vimeo — official site

Vimeo's marketing surface — the all-in-one video platform for creators, teams, and enterprises that this file extracts.

The DESIGN.md specification

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

Use Vimeo 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 --:--:--→