North star · Keep the dark canvas and oversized centered message quiet enough that the real product interface becomes the hero’s visual proof.
The page builds its identity from a near-black brown canvas (#161412), restrained white and muted-gray text, and a small but highly visible orange accent (#ff4700). The header keeps the logo and navigation on one horizontal line; the hero shifts attention to an enormous, centered headline in bold Helvetica Neue, followed by a quiet supporting sentence. A compact outlined announcement link sits above the headline, while the orange pill-shaped signup button is the primary color signal. The calendar interface is presented as a centered product image rather than surrounded by decorative UI, with the phone overlapping the desktop preview to suggest a connected product. Generous vertical breathing room separates the header, announcement, copy, and showcase. A subtly darker footer closes the page with understated utility links. The effect is focused and product-led: typography and the real interface carry the visual story, while color stays disciplined.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Midnight Umber表层 · Deep Soot主文字 · Clean Signal次要文字 · Soft Silver强调 · Cron Ember
文字
背景
对比度
WCAG
#ffffff Clean Signal
#161412 Midnight Umber
18.37:1
AAA
#ffffff Clean Signal
#0f0d0a Deep Soot
19.4:1
AAA
#cccccc Soft Silver
#161412 Midnight Umber
11.44:1
AAA
#cccccc Soft Silver
#0f0d0a Deep Soot
12.08:1
AAA
#ff4700 Cron Ember
#161412 Midnight Umber
5.38:1
AA
#ff4700 Cron Ember
#0f0d0a Deep Soot
5.69:1
AA
字体
字号阶梯：Custom（比例约 3.282，正文 13px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Helvetica Neue
系统字体 · 字重 400 / 500 / 700 · 占比 100%
免费替代：Inter
All page typography, from display headline and navigation to body copy and links.
角色
示例
字号
字重
行高
字距
特大标题
Oversized, bold centered hero headline.
Cron
140px
700
0.9
-0.021em
一级标题
Measured heading style for supporting hero-level heading text.
The quick brown fox 敏捷的狐狸
22px
400
1.7
0
正文
Compact supporting copy describing the calendar.
The quick brown fox 敏捷的狐狸
13px
500
1.5
0
按钮
Signup CTA label.
The quick brown fox 敏捷的狐狸
22px
500
1
0
导航
Header navigation labels.
The quick brown fox 敏捷的狐狸
22px
500
1.7
0
链接
Announcement link above the hero headline.
The quick brown fox 敏捷的狐狸
15px
400
1
0.01em
间距与布局
基准单位 4px · 密度：宽松
140px版块间距
—元素间距
—卡片内边距
1000px内容最大宽度
1px
12px
20px
24px
40px
80px
140px
Use a centered content composition within the measured 1000px page maximum, with a horizontal header and a single-column hero. Center-align the announcement, headline, supporting copy, and product showcase. Preserve the spacious section rhythm, measured at 140px, rather than adding extra cards or columns. The navigation remains visually light, and the footer becomes a separate, darker horizontal band. Keep the overall density low: each major element should have room to read independently.
圆角与层次
按钮 · 9999px
链接 · 4px
xl · button
inset · link
The page is mostly flat, with contrast between the main canvas and the darker footer doing the structural work. The announcement link has a subtle orange inset edge and glow; the orange signup pill carries a broad, soft glow. The product image supplies its own layered depth through the overlapping phone mockup.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
Place the orange Cron mark at the left and muted-light links at the right, ending with a filled orange signup pill.
Announcement link
A compact, centered outlined link reading “Cron is now Notion Calendar →,” with a subtle orange inset edge and glow.
Hero headline
Use an exceptionally large, bold white centered statement, followed by one line of muted supporting copy.
Product showcase
Center the dark desktop calendar preview beneath the hero copy and overlap it with a foreground mobile calendar mockup.
Signup button
Use the measured #ff4700 fill, white label, fully rounded pill shape, and restrained orange glow.
Footer links
Set privacy, terms, web app, and download links quietly on the deeper #0f0d0a footer band.
Imagery · The hero uses a product screenshot of Cron’s dark calendar interface, framed as a wide desktop view with a mobile phone layered in front. Keep the image centered below the copy and let its interface details provide color and texture. It is product imagery, not a decorative illustration; avoid adding unrelated photography, gradients, or visual effects that compete with it.
Reserve #ff4700 for brand marks and primary actions.
Keep the headline oversized, bold, and centered.
Show the product interface as the main visual proof.
Separate the footer with the measured darker surface.
Leave generous space between hero elements.
✕ 不该做
Do not introduce unmeasured palette colors.
Do not add gradients or decorative background patterns.
Do not crowd the spacious single-column hero.
Do not turn product imagery into generic illustration.
Do not make every link an orange CTA.
Do not add cards, borders, or shadows without a clear role.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Cron’s restrained, product-led visual style. Use Midnight Umber (#161412) as the main canvas, Clean Signal (#ffffff) for the primary headline, and Soft Silver (#cccccc) for supporting text. Reserve Cron Ember (#ff4700) for the logo and a prominent pill-shaped primary action; use Deep Soot (#0f0d0a) for a distinct footer band. Set typography in Helvetica Neue or a close sans-serif substitute, with a very large, bold, tightly tracked display heading and calm supporting text. Keep the navigation horizontal and the main content centered in a spacious single column. Present a real product interface as the visual centerpiece, not decorative stock imagery. Keep surfaces mostly flat, adding only subtle orange glow to the primary action.
