Dub

Dub以克制的黑白界面、宽松的产品展示和清晰的模块化内容，呈现链接归因平台。细腻边框、灰阶文字与少量功能色共同突出产品界面和客户案例。

North star · Keep the page quiet and white so product UI, customer proof, and a few functional color cues carry the story.

The page is built on a predominantly white canvas, with pale gray bands used selectively to separate major feature areas and a near-black closing CTA for contrast. Ink-dark headings and muted gray body copy establish a clear reading hierarchy; violet, blue, green, and orange appear sparingly as product-status or category cues, not as a broad decorative brand wash. The hero centers a concise headline and supporting copy above paired actions, then transitions into a large dashboard demonstration. Inter and Satoshi keep the typography clean and modern, while GeistMono is reserved for code-like material. A centered, constrained content frame organizes long-form sections into alternating product descriptions, interface mockups, customer proof, and integrations. Thin neutral borders define cards and section edges; subtle shadows add limited depth. Generous whitespace and repeated modular layouts make a long page feel orderly rather than dense.

配色

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

字体

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

间距与布局

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

A centered content frame capped at the measured 1078px supports a long vertical SaaS narrative. The hero is centered, while most feature sections shift to left-aligned copy paired with broad product demonstrations. The page alternates white and pale-gray bands, with customer logos, testimonials, and feature modules used as pauses between product stories. Comfortable density and substantial section breathing room keep the page scannable; modular columns appear in showcase, integration, and customer-proof areas.

圆角与层次

The overall treatment is flat, relying on white space and thin gray borders rather than pronounced depth. Cards use subtle hairline shadows where needed to lift controls or interface panels from their backgrounds. Keep stacking restrained: pale surfaces, outlines, and the near-black CTA provide most of the separation.

组件

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

Imagery · Product imagery is primarily interface mockups: dashboards, analytics charts, link lists, partner payouts, and API flows. They sit inside pale, clean panels with fine outlines and are framed as evidence of the product rather than decorative illustrations. Customer logos and small portraits add social proof. Integration marks and small colorful status indicators are contained within these demonstrations; avoid introducing unrelated photography or oversized illustration.

页面版块

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

首页

首屏首页主视觉

Centered announcement pill, headline, supporting copy, paired CTAs, and product demo.

功能网格核心产品

Three product categories arranged around a broad showcase area.

品牌墙客户品牌墙

Four-column row of customer logos on white.

图文交替产品价值

Copy-led central narrative with small product visuals to either side.

产品展示短链接功能

Left-aligned feature introduction above a wide link-management interface.

产品展示数据分析

Feature copy followed by a broad analytics visualization and supporting details.

集成生态工具集成

Copy on the left and a field of integration marks on the right.

产品展示合作伙伴增长

Section introduction followed by a wide partner payout and dashboard demonstration.

数据亮点平台规模

Centered pale-gray band with explanatory copy and stacked platform metrics.

产品展示企业级 API

Feature introduction above an API workflow diagram and technical details.

用户评价客户评价

Centered heading and introduction above a modular logo-and-quote grid.

时间线产品更新

Introductory copy on the left and a dated release list on the right.

行动号召转化行动

Centered CTA content on a near-black band, followed by the footer.

该做与不该做

给 AI 的提示词

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

相似风格

Dock

dock.us

明亮开阔的营收软件体验

浅色SaaS

Dropbox

dropbox.com

舒展留白，以亮蓝点亮效率

浅色SaaS

Slab

slab.com

以清晰编辑感呈现团队知识

浅色效率工具

Coda

coda.io

以温暖编辑感呈现协作办公

浅色效率工具

Supahub

supahub.com

清爽反馈工作台，点亮紫色渐变

浅色SaaS

Basedash

basedash.com

以克制色彩呈现真实产品界面

浅色SaaS