The Beams 首页以近乎纯黑白的界面，搭配超大重叠文字与具有电影感的工业空间影像。简洁导航和克制的订阅区围绕沉浸式主视觉展开，不与之争抢注意力。
North star · Keep the interface rigorously black and white, and let oversized typography and industrial footage provide all the drama.
The interface is built on a strict two-colour foundation: White Canvas (#ffffff) fills the page, while Black Ink (#000000) carries nearly all text, navigation, and fine rules. The screenshot’s greys and dark tones belong primarily to the industrial video, rather than an expanded UI palette. Neue Haas-style sans serif typography is used at regular weight throughout; the hero enlarges and repeatedly overlays its message to create a dense, kinetic typographic image. In contrast, navigation, body copy, and newsletter details remain small and restrained. The layout begins with a slim, ruled header, then gives the hero generous white space before a full-width video. Supporting copy sits in a simple two-column row, followed by a newsletter block with a large left-aligned heading and compact form details. Sections feel flat and unadorned: hairlines define boundaries, while imagery supplies depth and atmosphere.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
页面底色 · White Canvas主文字 · Black Ink描边 · Black Ink
文字
背景
对比度
WCAG
#000000 Black Ink
#ffffff White Canvas
21:1
AAA
字体
字号阶梯：Custom（比例约 1.703，正文 19px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
NeueHaas-web
网络字体 · 字重 400 · 占比 100%
免费替代：Inter
Display, headings, navigation, body copy, buttons, and links
角色
示例
字号
字重
行高
字距
特大标题
Oversized repeated hero statement
The Beams
160px
400
0.9
-0.03em
一级标题
Primary hero heading
The Beams
95px
400
0.9
-0.03em
二级标题
Newsletter heading and major section titles
The Beams
38px
400
1
0
三级标题
Supporting section headings
The Beams
28.5px
400
1
0
正文
Introductory and newsletter copy
The quick brown fox 敏捷的狐狸
19px
400
1
0
按钮
Prominent signup and sound controls
The Beams
28.5px
400
1
0
导航
Header navigation and brand labels
The quick brown fox 敏捷的狐狸
19px
400
1.95
0
链接
Inline policy and footer links
The quick brown fox 敏捷的狐狸
19px
400
1
0
间距与布局
基准单位 1px · 密度：适中
48px版块间距
19px元素间距
—卡片内边距
1402px内容最大宽度
6px
10px
11px
13px
15px
19px
40px
46px
48px
57px
135px
190px
A centered, narrow header row spans the viewport, with the BEAMS label at left, venue descriptor centered, and a plus control at right. The measured page maximum width is 1402px. The hero is a large white typographic field above a full-bleed video; beneath it, introductory copy aligns into two columns. A generous section break leads to a single-column newsletter area. The overall density is comfortable, with strong contrast between expansive media and compact utility content.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is flat, with no measured shadows, gradients, or rounded component corners. Thin black hairlines separate the header and newsletter/footer content. Use alignment, white space, full-width media, and stark tonal contrast to establish layers rather than cards or raised surfaces.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Slim header navigation
A white, full-width header with a fine black bottom rule, brand label at left, centered venue descriptor, and plus control at right.
Typographic hero
A spacious white hero field with a large, tightly tracked statement repeated in overlapping lines as the dominant visual.
Industrial video
Full-width, dark venue footage with compact sound controls at lower left and an outlined uppercase SIGN UP control toward the right.
Introductory copy
Two short statements arranged as a simple two-column row directly after the video.
Newsletter form
A large left-aligned Subscribe heading paired with compact explanatory copy, an email input, and a sign-up link.
Footer details
Small social, contact, legal, and brand details organized in a compact row beneath a fine divider.
Imagery · A full-bleed video presents a dim, raw industrial interior. Its near-black setting and subdued details contrast with the bright typographic field above. Small sound controls sit over the footage, with a signup link positioned toward the right. Treat this footage as atmospheric venue imagery; the measured grey and charcoal tones are not additional interface palette colours.
Use White Canvas (#ffffff) as the dominant page surface.
Set core text and rules in Black Ink (#000000).
Make the hero statement unusually large and visually layered.
Use full-bleed industrial footage as the main atmospheric image.
Keep navigation and newsletter details compact and quiet.
Separate major areas with fine rules and generous open space.
✕ 不该做
Do not introduce unmeasured accent colours into the interface.
Do not add gradients, shadows, or rounded card styling.
Do not place the hero inside a boxed or elevated card.
Do not let supporting copy compete with the hero typography.
Do not treat video colours as the brand palette.
Do not overcrowd the header or newsletter form.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in The Beams visual style using White Canvas (#ffffff) for the dominant surface and Black Ink (#000000) for typography, links, navigation, and hairline rules. Use a clean regular-weight sans serif close to Neue Haas Grotesk, with restrained tracking for utility text and tightly tracked, oversized display type for the primary statement. Create a slim, ruled header, an expansive white hero, and a full-bleed industrial venue video or image. Keep supporting copy in simple aligned columns and make forms compact and unboxed. Use generous open space, flat surfaces, and crisp alignment; avoid decorative colour, gradients, shadows, and rounded cards. Let the contrast between blank white space, dense black typography, and dark venue imagery carry the identity.
