BYD 首页以克制的黑白导航和内容承托电影感十足的整幅汽车摄影。宽松的车型与品牌使命版块之后，是实用的联系表单和紧凑的深色页脚。
North star · Keep the interface monochrome and spacious so large, cinematic vehicle photography remains the page’s focal point.
The page uses a restrained monochrome system so the vehicles and their environments carry the strongest colour. A nearly black header frames the white BYD mark and navigation; below it, a full-width hero photograph fills the viewport, with centered white model text and subtle carousel controls. The canvas is white, with pale blue-gray gradients behind isolated vehicle imagery and a clean, editorial mission split further down. Montserrat is used throughout, combining centered, medium-weight model headings with compact navigation, small utility links, and light form labels. The layout alternates between immersive full-bleed imagery and broad white content areas: a centered car showcase, a two-column mission feature, then a two-column contact form and lifestyle image. Comfortable section spacing and thin gray input rules keep the page open rather than card-heavy. Buttons are small, rectangular outlines or solid black controls, while the footer reverses to charcoal with muted links.
All page typography, including model headings, navigation, body copy, form controls, buttons, and footer links.
角色
示例
字号
字重
行高
字距
一级标题
Centered model name over the full-bleed hero image.
BYD
36px
500
1.11
0
二级标题
Major brand mission or feature heading.
BYD
32px
600
1.22
0
三级标题
Supporting section and product headings.
BYD
28px
500
1.4
0
四级标题
Compact subsection and form-area headings.
The quick brown fox 敏捷的狐狸
20px
600
1.3
0
正文
Mission copy, product descriptions, and form text.
The quick brown fox 敏捷的狐狸
16px
500
1.38
0
辅助文字
Small labels and supporting media text.
The quick brown fox 敏捷的狐狸
14px
500
1
0
按钮
Short action labels on outlined and solid buttons.
The quick brown fox 敏捷的狐狸
13px
400
1.69
0
导航
Primary header navigation and site-level links.
The quick brown fox 敏捷的狐狸
14px
500
1
0
链接
Compact footer and legal links.
The quick brown fox 敏捷的狐狸
12px
400
normal
-0.017em
间距与布局
基准单位 2px · 密度：适中
60px版块间距
8px元素间距
—卡片内边距
1312px内容最大宽度
1px
4px
6px
8px
10px
12px
16px
21px
24px
25px
30px
32px
40px
48px
50px
60px
A wide, comfortable-density page uses a measured maximum content width of 1312px, with the first vehicle carousel running full bleed. The header places the logo at left, navigation centrally, and global controls at right. Below the hero, a centered product display transitions to a two-column mission feature, then a two-column contact area. Sections are separated by generous vertical breathing room rather than cards; the footer returns to a three-column dark layout.
圆角与层次
按钮 · 4px
图片 · 12px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat, with no measured shadow system. Use thin gray input rules, simple outlined controls, and clean section boundaries. Layer white model text and subtle carousel controls over hero photography; reserve the strongest surface contrast for the dark header and footer.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
Dark horizontal bar with the white BYD mark, centered primary links, and compact global controls aligned at the right.
Hero carousel
Full-bleed vehicle photography with centered white model naming, discreet previous/next controls, and a small slide indicator.
Product showcase
Centered BYD HAN imagery on a pale blue-gray gradient, paired with a restrained outlined Explore action.
Mission feature
Two-column layout with a mission image on one side and heading, short copy, and an outlined Learn More action on the other.
Contact form
Two-column contact area with compact labels and thin gray input rules beside a large lifestyle photograph; submit uses a solid near-black button.
Footer
Charcoal three-column link area with muted legal and company links and a subtle copyright line.
Imagery · Photography is the primary visual expression: full-width vehicle scenes in the hero, a clean isolated sedan in the product showcase, and a lifestyle image beside the contact form. Keep images large and crisp, with natural environments and restrained overlays. Product photography supplies the page’s vivid blues and greens; the interface itself remains monochrome.
Keep vehicle photography large and visually dominant.
Use monochrome navigation and content surfaces.
Set all interface typography in Montserrat.
Use pale blue-gray gradients only behind product content.
Keep controls simple, compact, and rectangular.
Use generous whitespace between major sections.
✕ 不该做
Do not introduce a bright interface accent colour.
Do not turn content sections into a dense card grid.
Do not add heavy shadows or decorative effects.
Do not compete with photography using oversized copy.
Do not make footer links as prominent as primary navigation.
Do not apply the pale gradient across every section.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new BYD-style automotive page with a restrained monochrome interface and cinematic vehicle photography. Use Gallery White (#ffffff) as the main canvas, Header Black (#000000) and Graphite Ink (#252728) for dark navigation and footer surfaces, and Cool Rule (#c2c8d3) for fine form borders. Set all text in Montserrat, with compact navigation and medium-weight headings. Create a full-bleed image hero with centered white model text, then alternate a centered product display, a spacious two-column mission feature, and a contact form paired with lifestyle photography. Use Mist Blue (#d9dee6) and Cloud Tint (#f5f7fa) only for a subtle product backdrop. Keep buttons small and rectangular, prefer outlined actions with a solid near-black submit, avoid cards and shadows, and finish with a compact charcoal footer.
