Liveblocks

Liveblocks以近乎纯黑的画布、克制的字体和细腻的分隔线，呈现实时协作平台。产品示例、代码预览、客户背书与宽松的区块留白，让页面专业而不显拥挤。

North star · Keep the page quiet and black-led, letting white actions and real product interfaces provide the contrast and proof.

The page is built around an almost uninterrupted black canvas, with white type and restrained gray copy doing most of the visual work. White primary buttons stand out as the clearest calls to action; borders are subtle and cards largely remain dark, so content feels integrated rather than boxed in. The Suisse sans-serif family gives headings and body text a clean, contemporary voice, with medium-weight, tightly tracked display headlines and lighter supporting copy. JetBrains Mono is reserved for code-like content. A centered hero gives way to customer logos, a product-example strip, feature sections, a developer demo, trust proof, and a closing CTA. Broad vertical gaps keep this long page calm. Bright interface screenshots and small collaboration badges introduce color, but remain contained within product visuals rather than redefining the brand palette.

配色

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

字体

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

间距与布局

基准单位 8px · 密度：宽松

The page uses a centered, relatively narrow content measure, with full-width black section bands and product media that can extend wider than the text. Sections align mostly to a consistent left edge for feature storytelling; the hero and closing CTA are centered. Two-column feature layouts and compact grids alternate with product demonstrations. Vertical spacing is generous and creates a deliberate, spacious rhythm across the long page, while borders divide dense card content without adding heavy containers.

圆角与层次

The interface favors flat layers over cast shadows. Thin charcoal hairlines define card boundaries and separate grid cells against black; dark panels use restrained contrast. Small inset or radial gradient treatments add depth to selected media and CTA areas, while buttons rely on a solid white fill rather than prominent shadow.

组件

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

Imagery · Product interfaces are the main visual evidence: bright collaboration tools, message panes, code previews, and customer-story panels appear within dark frames. The hero uses a blurred, low-contrast product scene that fades into the black canvas. Logo marks and small cursor or collaborator badges add detail. Keep imagery crisp enough to read as software, but avoid letting colorful mockups overwhelm the monochrome page.

页面版块

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

首页

首屏实时协作主视觉

Centered hero copy over a full-bleed, dark product scene.

品牌墙客户品牌背书

Centered introduction with customer logos arranged in two rows.

其他产品价值引言

Single centered statement with generous black space around it.

图集协作产品示例

Wide horizontal strip of multiple interface previews.

功能网格实时协作基础

Left-aligned section introduction followed by a two-column feature grid.

功能网格智能应用能力

Introductory copy above a wider feature panel and supporting grid cells.

产品展示开发者体验

Section copy and actions above a large two-part product demo.

用户评价规模与信任证明

Section introduction above a wide testimonial card with proof grids.

页脚行动号召与页脚

Centered closing CTA above a dense, multi-column footer.

该做与不该做

给 AI 的提示词

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

相似风格

Better Stack

betterstack.com

深色底蕴，产品界面成为主角

深色开发者工具

Studio.Design

studio.design

素净画布，创意出彩

浅色设计工具

Linear

linear.app

深色克制，精工呈现

深色开发者工具

Tinybird

tinybird.co

暗色画布，亮色信号，开发者优先

深色开发者工具

Artboard Studio

artboard.studio

清爽画布，呈现鲜活样机

浅色设计工具

Subframe

subframe.com

为设计与代码留一方画布

浅色开发者工具