North star · Let cinematic industrial imagery and light editorial type dominate the dark canvas, using yellow only for high-priority signals.
The visual identity is built on a near-black canvas, with off-white text and a vivid signal yellow reserved for the primary contact action and a prominent statement panel. Dark charcoal bands distinguish content without introducing decorative gradients or strong borders; the light testimonial section creates a deliberate, high-contrast pause. Univers Next Pro carries the page in light weights, using large, tightly tracked headlines and compact supporting copy. ABC Monument Grotesk Mono adds a technical voice to small labels and buttons. The layout is spacious and editorial: full-bleed equipment footage leads the page, while later sections use asymmetric two-column arrangements and selective card treatments. Industrial product photography is darkened and cinematic, letting metal surfaces emerge from shadow. The restrained interface keeps attention on power infrastructure, with yellow functioning as a precise signal rather than a general-purpose decoration.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Deep Grid表层 · Signal Chalk表层 2 · Carbon Band表层 3 · Graphite Tile主文字 · Signal Chalk次要文字 · Carbon Band弱文字 · Deep Grid
Technical labels, CTA text, and small uppercase markers
角色
示例
字号
字重
行高
字距
特大标题
Oversized display statements and prominent hero-scale messaging.
ON.energy
64px
300
1.13
-0.04em
一级标题
Primary page headline and major section headline.
ON.energy
48px
300
1.17
-0.04em
二级标题
Section headlines, including expertise and testimonial titles.
ON.energy
36px
300
1.17
-0.04em
三级标题
Feature titles and smaller content headings.
The quick brown fox 敏捷的狐狸
24px
300
1.17
-0.04em
正文
Introductory statements and feature descriptions.
The quick brown fox 敏捷的狐狸
20px
300
1.2
-0.02em
辅助文字
Supporting details and compact secondary copy.
The quick brown fox 敏捷的狐狸
16px
300
1.38
-0.02em
按钮
Compact monospace CTA labels.
The quick brown fox 敏捷的狐狸
12px
600
1
0
导航
Large display-style navigation labels where present.
ON.energy
64px
300
1.13
-0.04em
代码
Small uppercase technical labels and eyebrow markers.
const style = 1;
12px
400
1.67
-0.04em
间距与布局
基准单位 4px · 密度：宽松
120px版块间距
20px元素间距
—卡片内边距
1429px内容最大宽度
4px
6px
7px
9px
12px
14px
15px
16px
17px
20px
24px
32px
36px
40px
60px
80px
Use a spacious, full-width editorial composition within the measured 1429px page maximum. The opening is a full-bleed, two-column media hero with headline and supporting copy positioned over the equipment image; navigation runs across the top. Later content switches between single-column statements, asymmetric two-column feature areas, and a four-column testimonial layout. Preserve the measured 120px section rhythm and 20px element rhythm where relevant. Keep alignment mostly flush-left and avoid dense grids; the long dark stretches are intentional breathing space.
圆角与层次
按钮 · 6px
导航 · 6px
链接 · 16px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is mostly flat: large color fields and full-bleed media provide structure rather than shadows. Use subtle, dark interface surfaces for navigation and feature tiles, with small corner rounding where measured. Avoid adding decorative borders, glows, or drop shadows; the yellow CTA and contrasting section backgrounds provide the hierarchy.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
A compact horizontal row over the hero, with dark translucent-looking menu tiles, small sans-serif labels, and a bright yellow contact action.
Media hero
Full-bleed industrial equipment imagery with a large light-weight headline at left and brief supporting copy near the lower edge.
Yellow product callout
Rounded vivid-yellow panel combining a small monospace eyebrow, concise product description, and equipment thumbnail.
Statement panel
A large yellow section with dark, left-aligned explanatory copy and substantial empty space around the text.
Testimonial block
Pale surface with a section heading at left, quote and attribution at right, plus compact navigation or action controls.
Expertise feature tile
Charcoal feature area pairing a light heading and explanatory copy with a rounded darker card, image, and small yellow marker.
Imagery · Lead with full-bleed video or photography of large-scale electrical equipment, framed close enough to make metal cabinets and infrastructure feel monumental. Use a dark, cinematic treatment with hard highlights and deep shadows; overlay restrained white type. Keep product imagery inside the yellow hero card compact and secondary. Later feature cards may use small facility photographs. The measured palette's varied greys in imagery should not be treated as additional brand colours.
Reserve #fff313 for primary actions and select statement surfaces.
Set headlines in light-weight, tightly tracked sans-serif type.
Let industrial media fill the hero and retain its dramatic shadows.
Use pale testimonial sections as deliberate contrast breaks.
Keep technical monospace labels small and purposeful.
✕ 不该做
Do not add gradients or decorative shadows.
Do not turn every section into a card grid.
Do not use yellow as a general text or background color everywhere.
Do not brighten or flatten the industrial photography.
Do not introduce unmeasured palette colors as brand colors.
Do not crowd the layout with extra borders or ornamental UI.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new ON.energy page in the same industrial editorial style. Use Deep Grid (#000000) as the dominant canvas, Signal Chalk (#eeeeee) for light text, and Carbon Band (#202020) or Graphite Tile (#323232) for restrained dark surfaces. Apply Volt Yellow (#fff313) sparingly to the primary CTA and one high-priority statement or product callout. Use a light geometric sans-serif similar to Univers Next Pro for headlines and body, with tight tracking on large headings; use a compact monospace similar to ABC Monument Grotesk Mono for small technical labels and button text. Compose wide, spacious sections with asymmetrical alignment, cinematic full-bleed infrastructure imagery, and limited card treatments. Use a pale block only as a purposeful contrast section. Keep the interface flat and quiet, without gradients, decorative shadows, or invented palette colors.
