North star · Let one immersive, warm-glowing visual command the dark canvas while keeping the central sign-up action unmistakably simple.
The visual strategy is built around contrast: a near-black #010304 canvas gives the glowing particle globe room to dominate, while a centered, dark #0e1011 card holds the actual task. White headings establish hierarchy; muted gray copy stays legible without competing with the artwork. Inter is used throughout, with compact bold headings and small, restrained form text. A single-column composition keeps attention on the waitlist rather than introducing secondary content or navigation. The orange gradient from #eb6200 to #ff7817 is reserved for the primary action, creating a bright focal point and warm echo of the globe. Inputs use a subtly lighter dark surface, while fine borders and soft shadows separate the form from the background without making it feel like a bright panel. Generous space around the centered content lets the large atmospheric image feel immersive.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Abyss Black表层 · Shadow Panel表层 2 · Input Slate主文字 · Pure Light次要文字 · Soft Alloy弱文字 · Dusk Gray描边 · Graphite Line强调 · Ember Orange强调 2 · Signal Flame
All page text, including heading, helper copy, input, and button.
角色
示例
字号
字重
行高
字距
一级标题
Waitlist card heading, bold and compact.
The quick brown fox 敏捷的狐狸
20px
700
1.15
-0.02em
正文
Form instructions and consent copy.
The quick brown fox 敏捷的狐狸
14px
400
1.6
0.01em
辅助文字
Small supporting and footer text.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0.01em
按钮
Primary submit label, medium weight.
The quick brown fox 敏捷的狐狸
13px
500
1
0.02em
间距与布局
基准单位 2px · 密度：适中
—版块间距
8px元素间距
24px卡片内边距
760px内容最大宽度
1px
6px
8px
12px
14px
16px
22px
24px
26px
Use a single, centered composition with the waitlist card as the only functional focal point. Keep the content column restrained, guided by the measured 760px page maximum, while the globe artwork can occupy a broad area behind it. Align the logo, form, and card to the same center axis. The page is visually sparse rather than section-heavy: preserve ample dark negative space around the form, with compact internal form spacing and no competing content bands.
圆角与层次
按钮 · 8px
输入框 · 8px
卡片 · 16px
inset · other
xl · card
md · button
The waitlist card is separated from the background with a restrained dark shadow and subtle border, not a bright outline. The input sits on a slightly lighter surface within the card. The orange button receives the clearest elevation through its glow; keep other elements comparatively flat so the globe remains the dominant atmospheric layer.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Centered waitlist card
Dark #0e1011 panel with a fine border, 16px radius, measured 24px padding, and deep soft shadow.
Email input
Single email field on #1c1e1f with white text, muted placeholder, and rounded 8px corners.
Primary submit button
Full-width orange gradient from #eb6200 to #ff7817, white medium-weight label, rounded 8px corners, and orange glow.
Consent checkbox
Small checkbox aligned beside muted, compact consent copy below the email field.
Brand mark
White GTE logo centered above the card, visually distinct from the warm particle globe.
Particle globe backdrop
Large dark 3D globe of glowing orange-gold particles, framed as atmospheric background rather than a content panel.
Imagery · A large, atmospheric globe formed from golden-orange particles fills the background behind the centered content. It reads as luminous 3D or motion artwork rather than a flat illustration; preserve its dark surroundings, bright scattered points, and warm bloom. Keep the GTE mark and form visibly layered in front, and avoid adding unrelated photography or decorative illustrations.
Keep the canvas near-black and visually uninterrupted.
Center the logo and waitlist card over the globe.
Reserve orange gradient for the primary action.
Use white for key labels and muted gray for supporting copy.
Maintain clear contrast between card, input, and canvas.
Let the particle globe remain the main atmospheric image.
✕ 不该做
Do not add bright section bands or a light page background.
Do not let supporting text compete with the heading or CTA.
Do not introduce extra accent colors beyond the measured palette.
Do not flatten the globe into a generic static icon.
Do not add dense navigation or unrelated content blocks.
Do not use heavy borders around every form element.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in the GTE visual style using an Abyss Black canvas (#010304) and a large, atmospheric particle-globe image behind the main content. Center the logo and a compact Shadow Panel card (#0e1011) on one vertical axis, with generous negative space around them. Use Inter throughout: bold white headings, muted gray supporting text, and restrained small form labels. Give inputs the Input Slate surface (#1c1e1f), rounded corners, and clear placeholder contrast. Make the primary action a warm gradient from Ember Orange (#eb6200) to Signal Flame (#ff7817), with a soft glow. Use fine borders and deep, subtle shadows only to separate layers. Keep the page sparse, focused, and cinematic; avoid extra navigation, competing accents, or bright content bands.
