Attio

Attio以克制的白灰界面、醒目的编辑式标题和清晰的CRM产品画面，建立专业而现代的品牌印象。宽松浅色内容逐步过渡到近黑色产品叙事，兼顾亲和力与技术感。

North star · Keep the page quiet and spacious so precise typography and believable product UI do the persuasive work.

The page relies on a bright white canvas, dark charcoal typography, and pale gray section bands to keep the experience calm and highly legible. A restrained palette of greens, blues, violet, coral, and yellow appears mainly in status indicators and product-interface details rather than as broad brand fills. The hero centers a large headline above concise supporting copy and compact paired CTAs, then gives the CRM interface ample room to demonstrate the product. Inter and Inter Display carry navigation, body copy, and most headings; a distinctive serif display face gives the hero a subtle editorial contrast. Layouts alternate centered introductions with left-aligned feature narratives and broad product panels. Generous section breaks prevent a long page from feeling crowded. Fine borders and subtle shadows separate cards and interface layers, while the near-black lower sequence creates a clear change of pace without abandoning the site’s minimal, structured visual language.

配色

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

字体

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

间距与布局

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

Use a centered content frame capped by the measured 1390px maximum, with broad margins and a spacious overall rhythm. The hero is centered; feature storytelling shifts to left-aligned headings alongside product panels and multi-column interface examples. Use alternating pale section bands to organize the long scroll, then reserve the near-black lower sections as a distinct chapter. Keep card and control spacing compact within product mockups while allowing generous gaps between major page sections. Maintain clear separation between text and dense interface visuals.

圆角与层次

The page is mostly flat, relying on white and pale gray bands, fine borders, and carefully separated panels. Use restrained shadows to lift product mockups and cards from their backgrounds without creating a floating-card-heavy feel. In the dark sections, thin dividers and subtle layered graphics preserve structure against the near-black surface.

组件

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

Imagery · Imagery is primarily product UI: CRM dashboards, pipeline cards, workflow diagrams, account details, and analytics presented as crisp interface mockups. Place these inside broad, pale media panels with subtle edges, keeping text and controls legible even when the panel is scaled down. The hero product view is large and centered beneath the intro. There is no strong photographic direction; color mostly comes from small UI indicators and product data.

页面版块

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

首页

首屏首页主视觉

Centered headline and copy above CTAs; a large CRM dashboard visual sits below.

品牌墙客户品牌墙

A light horizontal band with customer marks arranged across multiple columns.

功能网格产品功能展示

Long pale section with a feature introduction, side navigation, and sequential product panels.

行动号召即刻开始

Single centered message and CTA on a pale background.

产品展示客户资料界面

Three-column product detail composition on a pale canvas.

功能网格深色产品叙事

Full-width near-black section with divided panels and centered integration content.

页脚页尾区域

Minimal white closing region across the page width.

该做与不该做

给 AI 的提示词

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

相似风格

Customer.io

customer.io

留白铺陈，深青落笔，产品实力直观呈现

浅色SaaS

Ortto

ortto.com

编辑感排版与清晰的产品界面

浅色SaaS

Ditto

dittowords.com

以清晰视觉系统构建产品文案

浅色SaaS

Aira

aira.app

以编辑感和深色产品叙事呈现数据智能

浅色AI

Atlassian

atlassian.com

清晰协作，以醒目蓝色点睛

浅色SaaS

Amie

amie.so

清爽工作界面，蓝色智能行动

浅色AI