--- version: alpha name: Vimeo website: "https://vimeo.com" description: >- A dark-canvas video-platform marketing surface anchored on Vimeo Cyan ("#17d5ff"), a saturated electric blue that lives only on the primary Join CTA and the play-button overlay rather than coloring atmosphere or section fills. The page floor is "#0a0e12" near-black with a faint blue cast, lifted by a single charcoal surface ("#141a20") used for cards, the global nav, and pricing tiles. Body copy is "#fafcfd" off-white running ABCRepro at modest weights — display sits at 72px weight 500 with aggressive -3.6px negative tracking, while body holds at 16px weight 400 with -0.48px. The corner-radius scale is bimodal — 100 captured 16px occurrences for surface cards against 97 captured 8px values for buttons and chips, with the 12px CTA radius scoped exclusively to the primary action. seo: title: "Vimeo Design System for React — Cyan (#17d5ff), ABCRepro, 21 components" metaDescription: "Vimeo's design system as a DESIGN.md file. Cyan #17d5ff, ABCRepro sans, 22 colors, 21 components. For React, Next.js, and AI tools." highlights: - "Single accent voltage — Vimeo Cyan (#17d5ff) appears 45 times, scoped to the Join CTA and play-button primary against an otherwise monochrome dark canvas" - "Surface ladder over shadows — three 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 tracking — confidence by typographic compression rather than the 700+ weight enterprise video tools default to" - "ABCRepro as the only typeface — 17 type signatures, every one in the same family, where most marketing pages mix a display serif with a UI sans" - "Bimodal radius scale — 100 captured 16px values for surface chrome against 97 captured 8px values for controls, with the 12px CTA radius scoped to one action" tags: - "Music, Video & Streaming" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://vimeo.com" title: "Vimeo — official site" description: "Vimeo's marketing surface — the all-in-one video platform for creators, teams, and enterprises that this file extracts." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Vimeo's primary brand color?" answer: >- 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. - id: "dark-mode" title: "Does Vimeo's design system have a light mode?" answer: >- 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. - id: "typography" title: "What typography does Vimeo use, and what should I use if ABCRepro isn't available?" answer: >- 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. - id: "negative-tracking" title: "Why does Vimeo use aggressive negative letter-spacing on display type?" answer: >- 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. - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React video platform?" answer: >- 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. - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: >- 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. colors: primary: "#17d5ff" primary-hover: "#13b1d4" primary-pressed: "#02464f" canvas: "#0a0e12" surface-1: "#141a20" surface-elevated: "#23313b" ink: "#fafcfd" ink-muted: "#a9b2bc" ink-secondary: "#4c5864" ink-tertiary: "#3d4751" hairline: "#dfe4ea" hairline-dark: "#23313b" inverse-canvas: "#fafcfd" inverse-ink: "#0a0e12" pricing-prominent: "#000000" accordion-strikeout: "#333333" bokeh-pink: "#ffaacc" bokeh-warm: "#887766" semantic-link: "#13b1d4" semantic-error: "#550000" semantic-success: "#225522" shadow-tint: "#222222" typography: display-hero: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 72px fontWeight: 500 lineHeight: 1.0 letterSpacing: "-3.6px" display-lg: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 500 lineHeight: 1.0 letterSpacing: "-1.6px" heading-md: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.1 letterSpacing: "-0.96px" subhead: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.1 letterSpacing: "-0.86px" lead: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.35 letterSpacing: "-0.54px" body-lead: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.58 letterSpacing: "-0.54px" body-md: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.3 letterSpacing: "-0.48px" body-strong: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.48px" body-sm: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.42px" caption: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: "-0.36px" label: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.33 letterSpacing: "normal" button: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: "normal" nav-link: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: "normal" eyebrow: fontFamily: "ABCRepro, InterTight, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: "-0.42px" rounded: xs: "4px" sm: "6px" md: "8px" lg: "12px" xl: "16px" pill: "9999px" full: "9999px" spacing: xxs: "4px" xs: "8px" sm: "10px" md: "16px" base: "20px" lg: "24px" xl: "40px" section: "56px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: "12px 16px" height: 48px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.canvas}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: "12px 16px" button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.lg}" button-secondary: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: "12px 16px" button-inverse: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: "12px 16px" play-button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: "8px" play-button-overlay: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" opacity: "0.6" generic-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "20px" pricing-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "24px" border: "0" pricing-card-prominent: backgroundColor: "{colors.pricing-prominent}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "24px" comparison-table-heading: backgroundColor: "{colors.hairline}" textColor: "{colors.canvas}" typography: "{typography.body-strong}" rounded: "{rounded.md}" padding: "8px 16px" accordion-collapsed: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "16px 20px" accordion-expanded: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "16px 20px" tab-selected: backgroundColor: "{colors.accordion-strikeout}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "8px 16px" tab-default: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "8px 16px" tag-chip: backgroundColor: "{colors.accordion-strikeout}" textColor: "{colors.ink}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: "4px 10px" carousel-nav-button: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "8px" text-input: backgroundColor: "{colors.ink}" textColor: "{colors.ink-tertiary}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "10px 12px" border: "0" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.xs}" height: 64px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: "56px 20px" featured-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "20px" --- ## Overview Vimeo's marketing canvas is the strictest single-accent dark surface in the streaming category — `{colors.canvas}` is "#0a0e12", a near-black with a faint blue cast at OKLCH lightness 0.16, never the flat "#000000" true black most video platforms reach for. On top sits a one-step charcoal surface `{colors.surface-1}` "#141a20" carrying every card, the global nav, accordion expanded panels, and the pricing tiles. The body palette runs through a graded warm-gray ladder — `{colors.ink-tertiary}` "#3d4751", `{colors.ink-secondary}` "#4c5864", `{colors.ink-muted}` "#a9b2bc" — that handles secondary text, focus outlines, and tooltip icons. **Electric scarcity**: the single chromatic accent is Vimeo Cyan `{colors.primary}` "#17d5ff" — used 45 times across the captured page on the primary Join CTA, the chroma play-button background, and the carousel-nav sub-content marker. The hover state steps to `{colors.primary-hover}` "#13b1d4" (the vimeo-blue-58 token), with `{colors.primary-pressed}` "#02464f" reserved for pressed and disabled tiers. Vimeo avoids a second chromatic accent on the dark canvas — the only semantic colors are `{colors.semantic-link}` "#13b1d4" for inline links and `{colors.semantic-error}` "#550000" for error states that do not appear on the public surface. **Compression as voice**: where most streaming platforms inflate display to weight 700 with a tight 1.0 line-height, Vimeo holds hero at weight 500 with -3.6px negative tracking at 72px — confidence by typographic pull rather than weight. Display scales from 72px hero down through 40px h2 (-1.6px), 24px h3 (-0.96px), 22px subhead, 18px lead, 16px body (-0.48px), 14px secondary, and 12px caption. Every tier resolves to ABCRepro with InterTight, Helvetica, and Arial as documented fallbacks. The page rhythm is **dense feature cards** — the platform-grid section stacks six `{colors.surface-1}` panels with `{rounded.xl}` 16px corners, each carrying a 24px headline plus a single-line description and a short customer-logo strip. Pricing tiles step up to `{colors.pricing-prominent}` "#000000" for the prominent plan, with `{rounded.xl}` corners against the dark canvas. Where Linear puts product screenshots in the foreground, Vimeo leads with use-case imagery framed in dark panels. **Key Characteristics:** - **Dark-canvas single-accent system** — `{colors.canvas}` "#0a0e12" with one cyan voltage at `{colors.primary}` "#17d5ff". - **One typeface family** — ABCRepro across 17 type signatures, with InterTight as the documented fallback. - Display tracking pulls aggressively negative (-3.6px at 72px); body holds at -0.48px. - Bimodal radius scale — 100 captured 16px values for surface cards against 97 captured 8px for controls. - Cards use `{rounded.xl}` 16px corners with no drop shadows — surface lift handles hierarchy. - The 12px CTA radius is scoped to the primary Join action alone. ## Colors - **Vimeo Cyan (`#17d5ff`)** — frequency 45. Used as bg (22), text (10), border (10), gradient (3). Reserved for the primary Join CTA background, the chroma play-button primary, and the carousel-nav sub-content marker — Vimeo's load-bearing brand voltage and the only chromatic on the dark canvas. - **Canvas Near-Black (`#0a0e12`)** — frequency 1314. Used as text (636), border (634), gradient (41), bg (1). The page floor and global-nav background, with a faint blue cast at OKLCH hue 248 — never pure black, never gray. - **Surface Charcoal (`#141a20`)** — frequency 1256. Used as text (641), border (607), bg (8). The one-step lift above canvas, mapped to `--colors-pricing-card`, `--colors-generic-card-background-dark`, and `--colors-accordion-expanded-background`. - **Off-White Ink (`#fafcfd`)** — frequency 722. Used as text (349), border (321), bg (29), gradient (23). The primary body and headline color on dark sections, also the canvas for the customer-logo strip and the testimonial grid bands. - **Warm Gray Tertiary (`#3d4751`)** — frequency 219. Used as gradient (77), text (71), border (70). The form-input text and focus-outline token, mapped to `--colors-chroma-alpha-neutral-600-*` with four alpha tiers. - **Warm Gray Secondary (`#4c5864`)** — frequency 196. Used as gradient (70), text (62), border (62). The body-paragraph color on dark cards, mapped to `--colors-chroma-text-body-secondary` and `--colors-chroma-tooltip-icon`. - **Strikeout Charcoal (`#333333`)** — frequency 82. Used as gradient (81), shadow (1). The card-strikeout, tag-background, and pricing-card-border token — never appears as a primary surface, only as a darker chip against `{colors.surface-1}`. - **Ink Muted (`#a9b2bc`)** — frequency 78. Used as gradient (32), text (23), border (23). The secondary-content color on dark surfaces, mapped to `--colors-pricing-sub-content` and `--colors-comparison-table-content`. - **Hairline Light (`#dfe4ea`)** — frequency 57. Used as bg (45), gradient (12). The light-section hairline and comparison-table top-heading background — the warmest gray in the structural ladder at OKLCH hue 253. - **Border Pricing (`#23313b`)** — frequency 10. Used as text (5), border (5). The hairline that separates dark pricing tiles from the canvas, mapped to `--colors-ebony-gray`. ## Typography ABCRepro is the only typeface on the page — every one of the 17 captured type signatures resolves to the same family, with InterTight, Helvetica, and Arial documented as fallbacks. The display scale runs from 72px weight 500 (hero h2 with -3.6px tracking) through 40px h2 (-1.6px), 24px h3 (-0.96px), 22px subhead (-0.86px), 18px lead (-0.54px), 16px body weight 400 (-0.48px), 14px secondary weight 500 (-0.42px), and 12px caption weight 400 (-0.36px). The button label and nav link both hold at 16px weight 400 with `normal` letter-spacing — the only tiers that release the negative tracking. **Weight as restraint**: Vimeo holds display at weight 500 across every tier. Unlike the convention of dialing fintech and enterprise headlines to 700, the brand trusts negative letter-spacing — pulling tracking to 5% of font size at the top of the ramp — to compress headlines optically. The hero `{typography.display-hero}` at 72px / 72px line-height feels denser than a weight-700 setting at the same point because the letters sit tighter against each other. ## Layout Section spacing runs on a base unit visible across the captured padding values — 8px at 200 occurrences (the dominant gap), 16px at 41, 20px at 20, 40px at 12, 56px at 8. The hero and pricing sections lean on `{spacing.section}` 56px vertical rhythm, while card interiors hold at `{spacing.base}` 20px padding. The platform-grid section uses a three-column grid of `{rounded.xl}` 16px cards, with the comparison-table section dropping to a two-column split. The global nav holds 64px tall against `{colors.canvas}`. ## Elevation & Depth Vimeo carries hierarchy through surface lift rather than drop shadows — `{colors.surface-1}` "#141a20" sits as the only step above `{colors.canvas}` "#0a0e12", with `{colors.surface-elevated}` "#23313b" reserved as the hairline divider for dark pricing tiles. The captured shadow values are minimal: 1314 occurrences of `{colors.canvas}` appear in shadow context with only 2 actual shadow tints, and the structural tokens log zero shadows on the cyan brand. **Shadow-as-hairline**: where most streaming dashboards reach for a 0 4px 12px rgba blur to separate cards, Vimeo trusts a one-step charcoal lift and a 16px corner radius to do the work. ## Shapes 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 scoped exclusively to the primary Join action. The 9999px pill geometry surfaces 25 times, reserved for the play-button primary, the carousel-nav buttons, the tab indicators, and the tag chips. The 4px tier (3 occurrences) is rare — it appears only on the smallest content chrome. **The CTA discipline**: Vimeo's primary button radius is neither pill nor card-corner — the 12px value is unique to the Join action and the chroma close-modal primary, marking the brand-voltage CTA against every other rounded surface. ## Components The 21 component definitions cover the full marketing chrome. `{components.button-primary}` is the cyan Join CTA at 48px tall with `{rounded.lg}` 12px corners, `{spacing.sm}` 10px × `{spacing.md}` 16px padding, and `{typography.button}` 16px weight 400. The `{components.play-button-primary}` is the round cyan player overlay — pill geometry, `{colors.canvas}` icon. `{components.pricing-card}` and `{components.pricing-card-prominent}` are the two pricing-tile variants: charcoal `{colors.surface-1}` for default plans, `{colors.pricing-prominent}` true black for the featured tier. `{components.accordion-collapsed}` and `{components.accordion-expanded}` swap canvas for surface lift at 16px × 20px padding. `{components.tab-selected}` and `{components.tab-default}` use pill geometry against the `{colors.accordion-strikeout}` "#333333" track. `{components.top-nav}` holds at 64px tall against `{colors.canvas}` with `{typography.nav-link}` 16px weight 400 navigation. ## Do's and Don'ts **Do** scope `{colors.primary}` "#17d5ff" to the primary Join CTA, play-button primary, and carousel-nav sub-content marker — those are the three roles the brand voltage carries in the captured page. Use `{colors.primary-hover}` "#13b1d4" for hover states. **Do** pair display tiers with the documented negative letter-spacing — the -3.6px at 72px and -0.96px at 24px are load-bearing for Vimeo's voice. Stripping the negative tracking softens the brand and pushes the page toward generic SaaS. **Do** lift cards with `{colors.surface-1}` "#141a20" against `{colors.canvas}` "#0a0e12" — the one-step charcoal handles every card, pricing tile, and accordion panel. The hierarchy is one lift, not three. **Don't** use `{colors.primary}` "#17d5ff" as a section background or atmospheric fill — the cyan appears 22 times as bg, exclusively on the play-button and CTA surfaces (48px and 60px wide). Painting a hero band cyan reads as a generic streaming startup, not as Vimeo. **Don't** mix in a second chromatic accent on the dark canvas — the bokeh tokens (`{colors.bokeh-pink}` "#ffaacc", `{colors.bokeh-warm}` "#887766") exist in the declared scale but live in gradient definitions for product imagery, never on marketing chrome. Additional bokeh ladders (warm beige and lime ranges) surface only inside gradient stops. **Don't** use `{rounded.lg}` 12px on secondary buttons — the 12px corner is scoped to the primary Join action and the chroma close-modal primary alone. Secondary controls drop to `{rounded.md}` 8px, and pills go to `{rounded.pill}` 9999px. **Don't** weight headlines above 500 — the hero, h2, h3, and subhead all hold at weight 500. Stepping to 600 or 700 breaks the typographic compression principle and pushes the page toward enterprise-video aesthetics rather than the editorial-film posture Vimeo carries. **Don't** use `{colors.surface-elevated}` "#23313b" as a card background — it is a hairline-only token (10 occurrences, 5 as text and 5 as border, mapped to `--colors-ebony-gray`). For card surfaces, use `{colors.surface-1}` "#141a20" instead. ## Known Gaps - Form-input styling is partial — the captured page does not surface a text-input field on the first scroll, so `{components.text-input}` infers values from `--colors-form-input-text` and `--colors-form-input-background` rather than measuring a live control. - The bokeh and chroma gradient tokens (warm-pink and beige ladders at "#ffaacc" and "#887766") exist as declared CSS variables and surface in gradient definitions, but never appear as flat fills on the captured marketing page. - 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 and pressed values come straight from Vimeo's canonical `--colors-vimeo-blue-58` ("#13b1d4") and `--colors-vimeo-blue-80` ("#02464f") CSS variables. - Dark mode is the default and only mode documented — the alternating light-canvas bands ("#fafcfd" surface) handle inverse sections but the spec does not ship a separate light-theme component set.