Signal

Signal 以明亮清爽的页面、鲜明蓝色点缀和亲切的产品视觉呈现隐私优先的品牌气质。页面从宽阔的首屏延伸至清晰的功能介绍、富有表现力的插画和深色页脚。

North star · Use generous white space and clear, human product storytelling, with Signal blue reserved for meaningful interaction.

The page builds its identity around a white canvas and a large periwinkle-blue hero band, giving the product a friendly, open feel without diluting the privacy message. Near-black headings establish strong hierarchy; muted charcoal supports readable body copy, while Signal blue is reserved for interactive emphasis such as CTA text and outlined donation controls. Inter supplies a compact, modern sans-serif voice, with heavy display headings and regular-weight supporting text. The layout moves between centered introductions and two-column feature sections, then gathers benefits into a soft-gray card grid. Product screenshots and illustrations sit prominently beside concise copy: imagery feels expressive and human, but remains contained in rounded media panels. Generous whitespace separates the major content bands, while the dark plum footer creates a clear visual endpoint. Keep decorative color variation inside illustrations rather than expanding the site palette.

配色

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

字体

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

间距与布局

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

The measured content uses a wide page frame, with a two-column hero and feature splits that balance concise copy against product media. The opening hero aligns text to the left and lets oversized phone imagery occupy the opposite side. Centered section introductions lead into alternating feature content, while the benefits sit in a two-column card grid. Major bands are separated by generous vertical breathing room; the overall density is comfortable rather than compressed. Keep the desktop composition balanced and let columns stack cleanly on smaller screens.

圆角与层次

The page is mostly flat: color bands and whitespace do the structural work. Feature cards use soft, restrained shadows rather than heavy outlines, with rounded corners on cards and media. Keep layering intentional, especially where the hero phones overlap the blue band and the following white section.

组件

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

Imagery · Use authentic app screenshots on tilted phone mockups for the hero, with clear interface detail and dark device frames. Supporting feature sections mix friendly illustrations and human product imagery, contained in rounded panels with calm, solid backdrops. Keep artwork colorful where needed, but treat those illustration colors as content rather than extending the core palette.

页面版块

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

首页

首屏产品首屏

Two-column hero beneath the header; left-aligned copy and CTA beside overlapping phone mockups.

图文交替隐私与安全

Centered section introduction followed by a two-column feature: copy at left, large media panel at right.

功能网格功能卡片

Pale-gray section band with a two-column, two-row grid of white feature cards.

图文交替无广告追踪

Left-aligned copy beside a large rounded illustration panel.

图文交替人人可用

Large illustration at left and copy with an outlined donation CTA at right.

页脚页脚导航

Full-width dark band with legal text and several compact link columns.

该做与不该做

给 AI 的提示词

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