Slite

Slite 首页以温暖的米白底色、醒目的标题和橙色行动按钮呈现产品。产品界面图、宽松的版块节奏与柔和卡片，让 AI 知识库显得清晰易懂。

North star · Keep the warm canvas and spacious, editorial rhythm dominant; use bright accents only to mark actions or meaningful product status.

The page is built around a warm, nearly continuous off-white canvas (#fdf9f4), with white product surfaces and restrained hairlines providing contrast without creating hard section breaks. Dark charcoal headlines establish hierarchy; Garnett gives them a rounded editorial character, while UniversalSans carries navigation, body copy, labels, and product UI. The accent orange (#f67748) is reserved for the main CTA, selected badges, and a testimonial panel, so it draws attention without overwhelming the neutral palette. Soft blue is used sparingly for links and one testimonial card; red, green, and violet are mostly small status signals or UI details rather than core brand colours. Centered headings alternate with broad product demonstrations, compact feature cards, testimonials, and pricing. Screenshots and interface mockups are framed in pale panels with rounded corners and subtle shadows. The generous spacing keeps a long page readable and gives each product story room to land.

配色

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

字体

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

间距与布局

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

A centered page uses a measured maximum content width of 1200px, with broad margins and a spacious vertical rhythm. The hero and many section titles are centered; later product-context content includes left-aligned text beside interface imagery. Sections alternate between full-width storytelling and two-, three-, or four-column card arrangements. The density is intentionally low: whitespace separates ideas, while screenshots and mockups provide detail. Navigation is a single compact horizontal row.

圆角与层次

Most of the page stays flat against the warm canvas. Product screens and selected cards sit on white or near-white surfaces with subtle layered shadows; fine pale borders define pricing and interface edges. Avoid strong depth: the visual hierarchy comes from spacing, contrast, and mockup composition.

组件

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

Imagery · The visual centerpiece is product-interface imagery: large, layered knowledge-base and agent mockups show real-looking docs, search, and maintenance workflows. Small customer logos, trust marks, and integration icons support credibility. Screens are generally placed in pale rounded panels, with faint shadows and occasional hand-drawn decorative marks. Testimonials use flat coloured cards rather than photography-led layouts; portraits appear sparingly as small attribution details.

页面版块

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

首页

首屏知识保持准确

Centered headline and subcopy above CTA and trust marks, followed by a large product-interface mockup.

功能网格知识库核心能力

Centered section title followed by three equal feature cards with product imagery.

产品展示自动发现知识变化

Centered product story with surrounding integration marks, followed by use-case labels and wide interface panels.

产品展示企业级 AI 搜索

Centered title and query labels above a broad agent interface, integration logos, and three supporting cards.

集成生态连接常用 AI 工具

Left-aligned section title and copy paired with a connected row of tool panels and compact action chips.

功能网格安全与合规

Centered heading above four compact security and access features.

用户评价客户真实评价

Three quote cards in a row, followed by a brief customer proof line and link.

价格方案团队定价方案

Centered heading and pricing link above three horizontal plan cards.

行动号召开始使用 Slite

Single centered closing headline with two adjacent actions.

页脚页脚与资源

Multi-column footer with brand and ratings at left, link groups, then legal and locale rows.

该做与不该做

给 AI 的提示词

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

相似风格

STRUT

strut.so

暖调编辑感，荧光绿点睛

浅色AI

Scale AI

scale.com

以克制设计呈现可靠 AI

浅色AI

Glide

glideapps.com

克制黑白底色，呈现鲜活实用的软件

浅色SaaS

Plain

plain.com

留白衬底，亮绿点睛，产品居中

浅色AI

Grain

grain.com

以舒展留白讲述产品，用绿色点亮重点

浅色AI

Sprig

sprig.com

清爽编辑式排版，点缀暖调渐变

浅色AI