Vimeo

Vimeo以明亮克制的界面搭配电影感视频，并用深色区块清晰划分内容。紧凑导航、居中主文案和醒目的青色按钮，引导访客浏览内容丰富的首页。

North star · Keep the interface quiet and legible so cinematic video carries the emotion, while cyan marks the next action.

The page balances a pale near-white canvas with alternating ink-dark feature bands, letting large video frames supply most of the atmosphere and color. Cyan is reserved for high-intent actions and small highlights, while near-black text and muted slate copy keep the interface legible without competing with the footage. ABCRepro drives a consistent typographic voice: compact navigation and supporting copy, with centered, tightly tracked headlines that feel direct rather than ornamental. The layout moves from a full-width rounded hero into logo proof, a soft enterprise introduction, a dark three-column feature grid, and further alternating feature, testimonial, security, and creator-story sections. Comfortable gaps and generous section breathing room offset dense lower-page content. Photography and video are framed as product evidence, not decoration; cards and media use rounded corners, with little reliance on shadow. Dark bands provide contrast and structure across the long scroll.

配色

点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。

字体

字号阶梯：Major Third（比例约 1.257，正文 16px）。示例用免费替代字体渲染，数值为实测。

间距与布局

基准单位 8px · 密度：适中

A wide desktop canvas is organized around a measured 1376px page maximum, with centered hero and trust content followed by mixed one-, two-, three-, and four-column sections. The hero is a prominent full-bleed video inside a rounded frame. A comfortable rhythm separates alternating light and dark bands, while internal cards and copy remain compact enough to support a long landing page. Align section headings to the center for broad introductions and to the left for detail-heavy enterprise content.

圆角与层次

The page is predominantly flat: contrast between light and dark section bands creates hierarchy instead of pronounced shadows. Media and cards are separated through rounded corners and tonal surfaces; measured card borders use near-black. A floating video prompt sits above the hero footage on a pale panel, providing the clearest layered element.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。

Imagery · Use cinematic product and creator video as the dominant visual material, including a large hero frame and smaller media previews inside feature cards. Photography and video show real people, workspaces, interfaces, and community stories rather than abstract illustration. Apply a dark overlay behind white hero copy when footage is busy. Keep media cropped and rounded, and treat varied colors inside thumbnails as image content rather than interface palette.

页面版块

共 11 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。

首页

首屏视频平台主视觉

Centered copy over a large rounded, full-bleed video; floating video prompt at lower right.

品牌墙客户品牌墙

Centered trust statement above a single horizontal row of customer logos.

行动号召企业定制方案

Centered heading and supporting copy with a single demo-request action.

功能网格平台核心功能

Dark full-width band with centered heading and six feature cards in three columns.

图文交替适用不同团队

Light section with heading and CTA above a portrait media card beside a stacked audience list.

用户评价客户评价

Pale gray horizontal band with a row of compact review cards.

图文交替视频AI功能

Dark section with left-aligned copy and an accordion-style feature list beside video preview.

图文交替企业安全能力

Light enterprise copy and credentials above a wide rounded video.

图集创作者作品社区

Dark full-width section with left-aligned introduction and a broad multi-column thumbnail gallery.

内容列表产品最新动态

Centered title above two light-toned release cards in a two-column layout.

页脚页脚导航

Light footer with an upper support and signup area followed by multiple columns of grouped links.

该做与不该做

给 AI 的提示词

想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。