Cultured Code — Things

Things 以宁静、留白充足的页面呈现个人任务管理工具，产品界面与简洁文案相互衬托。浅灰分区、深色文字、蓝色链接，以及大量用户和媒体评价，共同营造出精致而亲和的观感。

North star · Let spacious, quiet layouts and clear product imagery lead; use blue only as a deliberate point of interaction.

The page uses a restrained palette anchored by white and pale blue-gray, with dark charcoal text providing clear contrast and saturated blue reserved for links and the newsletter button. Broad background bands distinguish major sections without making the page feel boxed in. System sans-serif typography keeps the experience familiar: bold, compact headings introduce sections, while centered explanatory copy remains readable and understated. The layout alternates centered product introductions with large device imagery, a compact platform grid, and two-column testimonial and editorial collections. Generous whitespace gives each block room to breathe, while a consistent content width keeps long sections controlled. Product imagery carries most of the visual personality: crisp app screens and devices are presented with soft shadows against quiet backgrounds. Flat cards, subtle borders, and restrained elevation support the content rather than competing with it.

配色

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

字体

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

间距与布局

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

A centered content system uses a measured maximum width of 900px, with a comfortable rather than dense rhythm. The hero aligns its logo, title, copy, and video link centrally, then transitions into full-bleed product media. Later sections alternate white and pale gray bands, using centered introductions above product displays or two-column collections. The platform area uses a four-column grid; reviews and editorial cards use two columns. Section gaps are generous, while card padding and element spacing stay consistent.

圆角与层次

Most section and testimonial surfaces stay flat, with pale background bands doing the structural work. Product media and selected social-style cards use soft, low-contrast shadows to suggest depth. Inputs and footer structure use fine gray borders or rules; keep outlines and elevation understated rather than adding heavy card frames.

组件

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

Imagery · Product imagery is the main visual anchor: app screens appear on Mac, iPhone, tablet, and Watch devices, often grouped into polished showcase compositions. The hero includes a video link and large product media. Review and press sections rely on small cards, logos, and award graphics. Device imagery may include vivid blue and other colors; treat those as product artwork, not as additional page-brand colors.

页面版块

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

首页

首屏产品介绍

Centered hero content on a pale gray band, followed by full-bleed product media.

图文交替简单强大

Centered section introduction above a large multi-device product showcase.

商品网格获取应用

Centered heading and copy above four platform columns on a white section.

用户评价用户评价

Centered introduction and social links above a two-column review collection on pale gray.

用户评价区媒体评价

Centered editorial introduction followed by two columns of review and award cards on white.

邮件订阅邮件订阅

Centered copy and subscription form on a pale gray band.

页脚页脚导航

Four compact link groups on pale gray, separated from the newsletter by a fine divider.

该做与不该做

给 AI 的提示词

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