North star · Let one cinematic full-bleed image carry the page, and keep every signup element quiet, centered, and easy to find.
The page is built around a full-bleed night landscape: a star-filled sky, dark mountain silhouettes, and their reflection make the hero image the dominant visual surface. A small white announcement strip and thin teal rule cap the top, while the centered DREPUTE wordmark and large Playfair Display “Launching Soon” headline sit directly over the image in pale text. The lower newsletter area shifts to a near-black canvas, with a centered serif heading, quiet supporting copy, and a simple horizontal email form. Source Sans Pro and GD Sherpa keep utility text compact; Montserrat appears in uppercase, widely tracked display labels. Whitespace and measured section spacing preserve a calm, uncluttered rhythm rather than adding cards or decorative modules. White buttons and fine borders supply the functional contrast, while teal is reserved for the narrow divider rather than spread across the page.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
表层色
中性色
页面底色 · Midnight Canvas表层 · Paper White主文字 · Quiet Silver次要文字 · Button Ink弱文字 · Frost White描边 · Signal Teal
Top announcement, wordmark navigation, and the uppercase signup button.
Aa 设计
GD Sherpa
网络字体 · 字重 400 · 占比 34%
免费替代：Inter
Body copy, supporting signup text, and the secondary announcement CTA.
Aa 设计
Playfair Display
网络字体 · 字重 400 · 占比 11%
免费替代：Playfair Display
Large centered launch headline and newsletter title.
Aa 设计
Montserrat
网络字体 · 字重 700 · 占比 3%
免费替代：Montserrat
Measured uppercase display and eyebrow role; use for compact, tracked labels if present.
角色
示例
字号
字重
行高
字距
特大标题
Large editorial launch or subscription heading.
Drepute
62px
400
1.2
0
一级标题
Centered “Launching Soon” hero headline.
Drepute
44px
400
1.25
0
二级标题
Uppercase tracked section or eyebrow labels.
The quick brown fox 敏捷的狐狸
26px
700
1.2
0.154em
正文
Short supporting copy beneath the newsletter heading.
The quick brown fox 敏捷的狐狸
14px
400
normal
0
按钮
Signup and announcement CTA labels.
The quick brown fox 敏捷的狐狸
14px
400
normal
0
眉题
Compact uppercase label above a section heading, when needed.
The quick brown fox 敏捷的狐狸
26px
700
1.2
0.154em
间距与布局
基准单位 8px · 密度：适中
56px版块间距
24px元素间距
—卡片内边距
1112px内容最大宽度
2px
4px
7px
8px
16px
23px
24px
32px
56px
A narrow full-width announcement bar precedes a full-bleed hero; the wordmark and launch headline are centered over the image. The page then transitions into a dark newsletter/footer band with a centered heading and horizontally aligned email field and signup button. The measured content max width is 1112px, with comfortable density, a 56px section gap, and 24px element gap. Preserve generous open space around the hero title and signup form.
圆角与层次
按钮 · 4px
输入框 · 4px
md · other
The layout is mostly flat: no card grid or prominent layered panels. The hero relies on the photograph itself for depth, while white form controls and fine borders distinguish interactive elements. A measured medium shadow exists but is not a defining visual motif; avoid introducing conspicuous elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement strip
Compact white top bar with small dark promotional copy, a bordered “Start for free” action, and a thin #00a4a6 divider underneath.
Wordmark
Centered DREPUTE label near the top of the hero, rendered in uppercase sans-serif and bright text over the dark image.
Launch hero
Full-bleed night landscape with a large, centered Playfair Display “Launching Soon” heading in pale text.
Newsletter form
Centered signup block in the dark lower band; pair brief supporting copy with a horizontal email field and white signup button.
Email input
Simple field with a 1px white border, 4px radius, and subdued #bfbfbf text; avoid a filled card-like container.
Footer credits
Small, low-contrast copyright and provider credits aligned near the bottom of the dark page.
Imagery · Use cinematic landscape photography or video as the hero’s full-bleed background. The reference shows a starry night sky over dark mountain silhouettes reflected in still water; keep the image low-key and naturally textured so pale type stays readable. No illustration or 3D treatment defines the brand. The bright top announcement strip and dark lower signup band frame the photograph rather than competing with it.
Use a full-bleed, low-key landscape as the main visual.
Center the wordmark and launch headline over the hero image.
Keep the hero title in an editorial serif face.
Use #161616 for the newsletter and footer canvas.
Reserve #00a4a6 for the thin top divider.
Make the email field and signup action a clear horizontal pair.
✕ 不该做
Do not add bright gradients over the night imagery.
Do not introduce colorful card grids or decorative illustrations.
Do not spread teal across buttons or large background areas.
Do not crowd the centered hero title with extra copy.
Do not use heavy shadows to create artificial depth.
Do not replace the restrained form with a multi-step flow.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Create a new page in Drepute’s restrained, cinematic launch style. Lead with a full-bleed night landscape—starry sky, dark silhouettes, reflective water—and place a centered wordmark and spacious Playfair Display headline over it. Use Paper White (#ffffff) for a compact announcement strip and signup action, with Signal Teal (#00a4a6) only as a fine divider. Transition into a Midnight Canvas (#161616) newsletter/footer area with centered serif heading, subdued supporting copy, and a simple horizontal email form. Use Source Sans Pro or Source Sans 3 for utility labels and GD Sherpa-like sans-serif for body text; keep the interface flat, low-density, and uncluttered. Maintain measured comfortable spacing and a 1112px content maximum where content needs a constrained width. Avoid cards, gradients, and extra accent colors.
