Vimeo DESIGN.md

Professional video platform with a clean editorial aesthetic — white-first surfaces, rich blue accents, and creator-focused UI patterns.

1. Visual Theme & Atmosphere

Vimeo is the professional's video platform — where filmmakers, agencies, and creative teams host and share high-quality work. The design is clean, editorial, and image-forward. White and light surfaces create a gallery-like feel that lets video thumbnails breathe. A rich blue accent signals interactivity and brand confidence. The UI is polished without being flashy, striking a balance between tool and creative showcase.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Helvetica Neue', 'Arial', -apple-system, sans-serif;
--font-display: 'Graphik', 'Helvetica Neue', sans-serif;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 15px;
--font-size-md: 17px;
--font-size-lg: 22px;
--font-size-xl: 28px;
--font-size-2xl: 36px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-base: 1.6;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #1AB7EA;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #0E9AC5; }

/* Video Thumbnail Card */
.video-card {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
.video-card__thumbnail {
  aspect-ratio: 16/9;
  background: #17181F;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.video-card__duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}
.video-card__info {
  padding: 10px 0;
}
.video-card__title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
  margin-bottom: 4px;
}
.video-card__meta {
  font-size: 13px;
  color: #A0A0A0;
}

/* Video Player */
.player {
  background: #17181F;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16/9;
  position: relative;
}
.player__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.player__progress {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  cursor: pointer;
}
.player__progress-fill {
  height: 100%;
  background: #1AB7EA;
  border-radius: 2px;
}

/* Avatar */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #E0E0E0;
}

/* Pro Badge */
.pro-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  background: #1AB7EA;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.shadow-player { box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.shadow-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.18); }

7. Do's and Don'ts

Do:

• Keep the background white — Vimeo is a gallery, not an app
• Show duration as an overlay on the bottom-right of every thumbnail
• Use sky blue only for the progress bar, CTAs, and pro badges
• Present video grids with consistent 16:9 thumbnails

Don't:

• Don't use dark backgrounds in the main content area (only in the player)
• Don't clip video thumbnails to non-16:9 ratios
• Don't add busy hover animations — a subtle play icon overlay is enough

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Vimeo — professional video hosting and sharing.
Use a white/light background as the primary surface — this is a video gallery, not an app.
Sky blue (#1AB7EA) is the accent: progress bars, primary buttons, pro badges.
Video thumbnails are always 16:9, with a dark background and a small duration badge in the corner.
The video player itself is black (#17181F) with a blue progress bar.
Typography is Helvetica Neue at 15px base, generous line height.
Tone is editorial, clean, and creator-professional.