Pirsch Analytics

Pirsch 以明亮、宽松的页面呈现注重隐私的网站分析产品，重点突出清晰的文字和温暖的产品卡片。克制的配色让数据面板预览、客户评价和薄荷绿试用按钮成为视觉焦点。

North star · Keep the canvas bright and spacious, using warm product panels and mint only to guide attention toward meaningful actions.

The page uses pure white as its dominant canvas, with warm off-white panels separating product stories and testimonial cards from the surrounding space. Black headings and controls establish sharp contrast, while muted gray supports explanatory copy without competing with the message. Mint green marks the main trial actions and selected dashboard details; soft yellow appears sparingly in a secondary CTA and small product-interface highlights. DM Sans supplies a modern, humanist sans-serif voice: headings are medium weight, large, and centered in major feature sections, while body text remains calm and readable. A centered hero gives way to repeated feature modules, card grids, and broad vertical pauses. Product imagery is primarily interface content, framed inside warm, generously rounded panels rather than treated as decorative photography. The overall effect is orderly and approachable, with color and spacing guiding the eye instead of heavy borders or shadows.

配色

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

字体

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

间距与布局

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

Use a centered page frame with a measured maximum width of 1200px and a spacious, low-density rhythm. The hero is centered with a two-column product presentation below; subsequent sections alternate between centered headings, multi-column card grids, and broad feature panels. The measured section gap is 192px, with 32px element gaps and 48px card padding. Align most content centrally, reserving left alignment for card copy and footer navigation. Let white space clearly separate feature chapters.

圆角与层次

The visual system is mostly flat: warm card fills separate content from the white canvas, while strong outlines and deep shadows are absent. Rounded card corners provide the main sense of containment. Keep layering limited to dashboard screenshots within panels and subtle interface highlights; do not add heavy shadows or decorative borders.

组件

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

Imagery · Use product-interface previews as the main visual material: dashboard charts, filters, tables, and analytics panels shown inside warm, softly rounded frames. Small customer portraits appear in trust and testimonial areas; logos form a restrained customer strip. Supporting illustrations are simple, diagrammatic interface details rather than realistic 3D or cinematic imagery. Keep screenshots legible and avoid letting mockup colors redefine the site palette.

页面版块

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

首页

首屏产品首屏

Centered headline and supporting copy above paired actions, trust proof, and a wide dashboard preview.

品牌墙客户品牌

A compact, centered row of customer logos following the product preview.

功能网格快速上手

Centered section heading above an asymmetric grid of warm product and privacy cards.

功能网格关键洞察

Centered title and copy above two side-by-side cards with analytics examples.

功能网格高级分析

Centered section introduction followed by a three-column grid of feature cards.

功能网格团队协作

Centered heading above a wide lead card and two smaller supporting cards.

功能网格自定义体验

Centered introduction above a two-column arrangement of text cards and dashboard previews.

用户评价客户评价

Centered heading and intro above a three-column grid of repeated review cards.

行动号召免费试用

Centered brand mark, headline, short explanatory copy, and a single mint action.

页脚页脚导航

Three-column footer with brand and language control on the left and grouped link lists on the right.

定价页 · 原网页 ↗

价格方案套餐定价

Centered pricing introduction above a page-view slider and billing toggle, followed by three side-by-side plan cards.

品牌墙客户标识

A compact, centered strip of customer logos arranged in two rows.

对比表功能对比

Centered section heading above a long, three-plan comparison matrix with feature labels on the left and plan columns to the right.

常见问题常见问题

Centered heading and support note above a narrow, vertically stacked list of expandable questions.

行动号召免费试用

Centered closing call to action with a brand mark, headline, short supporting copy, and a primary button.

页脚页脚导航

Three-column footer with company details and language selector on the left, and grouped navigation links in the remaining columns.

该做与不该做

给 AI 的提示词

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