North star · Let cinematic vehicle imagery lead, and use restrained typography, stark contrast, and minimal controls to keep attention on the car.
The visual strategy balances a Gallery White (#ffffff) canvas and near-black sections with cinematic full-bleed vehicle imagery. Ink (#000000) anchors the footer and dark product configurator; Carbon (#181818) provides a softer dark surface. Pale text creates contrast over media, while the two measured gold accents distinguish model exploration from configuration actions. LamboType carries the system across navigation, headings, body copy, and buttons: headings are uppercase and tightly composed, with an especially condensed display treatment for the hero model name. The page moves from a dramatic video hero into a spacious white model carousel, then a dealer locator image band and a dark configuration showcase. Generous measured section spacing gives the imagery room, while model tabs, restrained rules, and simple square-corner controls keep navigation legible. Photography and rendered vehicle imagery dominate; interface chrome stays quiet and flat.
Site-wide display, headings, navigation, body copy, captions, and buttons.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase hero model name.
Lamborghini
120px
400
0.92
0
一级标题
Primary feature and model-section headlines.
Lamborghini
80px
400
1.13
0
二级标题
Section titles and prominent feature headings.
Lamborghini
40px
400
1.15
0
三级标题
Model names and compact subsection headings.
The quick brown fox 敏捷的狐狸
27px
400
1.37
0
正文
Standard descriptions, explanatory copy, and supporting content.
The quick brown fox 敏捷的狐狸
16px
400
1.63
0
辅助文字
Vehicle disclaimers and fine-print details.
The quick brown fox 敏捷的狐狸
12px
400
1.83
0
按钮
Uppercase CTA labels and action controls.
The quick brown fox 敏捷的狐狸
16px
400
1.63
0
导航
Uppercase main navigation and model tabs.
The quick brown fox 敏捷的狐狸
16px
400
1.63
0
间距与布局
基准单位 8px · 密度：适中
80px版块间距
24px元素间距
—卡片内边距
1296px内容最大宽度
4px
8px
12px
16px
24px
32px
40px
48px
80px
The page uses broad full-bleed media bands alternating with a white model carousel and a dark configurator. Measured page max width is 1296px, with a comfortable density and an 8px base spacing unit. Sections are separated by a measured 80px rhythm and elements commonly use 24px gaps. The hero aligns copy to the lower left and places its CTA opposite; model content is centered, while the configuration section aligns copy left beside the vehicle. The footer shifts to a compact two-column information layout.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is largely flat, with no measured shadow system or rounded component radii. Strong contrast between white and dark sections provides depth, while full-bleed media and dark overlays create layering. Thin gray borders and understated underlines separate tabs and utility controls without adding card-like elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Hero navigation
Minimal overlay navigation with menu at left, centered brand mark, and search icon at right; use light controls over dark media.
Cinematic hero
Full-bleed video with lower-left uppercase campaign copy and a white rectangular Discover More action.
Model carousel
White model showcase with centered vehicle imagery, adjacent carousel controls, model tabs, and a fine-print disclaimer.
Model actions
Square-corner CTAs pair Antique Gold (#917300) exploration with Signal Gold (#ffc000) configuration emphasis where measured.
Dealer locator band
Full-width location photography with a large light heading and a compact white Find Your Dealer control.
Configuration showcase
Dark Carbon and Obsidian feature band with vehicle tabs, oversized model title, configuration actions, and a vehicle render.
Footer
Black two-column utility and social links followed by fine-print legal copy and a centered brand mark.
Imagery · Large cinematic video and photographic or rendered vehicle imagery carry the page. The hero crops close to the car and applies a darkened, cool-toned treatment so white type remains clear. Model presentation isolates side-profile vehicles against white, while the dealer locator uses a full-width real-world setting. The configurator places a high-detail vehicle render against a nearly black field.
Use cinematic vehicle media as the primary visual anchor.
Alternate bright discovery areas with near-black feature sections.
Keep headings uppercase and visually assertive.
Reserve gold accents for meaningful model actions.
Use square-corner, low-chrome controls.
Give full-width imagery and section transitions room to breathe.
✕ 不该做
Do not add rounded cards or decorative shadows.
Do not let interface controls compete with the vehicle imagery.
Do not introduce unmeasured brand colors.
Do not use playful or casual typography.
Do not compress the page into a dense card grid.
Do not place dark text over dark media without contrast.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new luxury automotive page using Lamborghini’s restrained, cinematic visual language. Use Gallery White (#ffffff) for open discovery areas, Obsidian (#000000) and Carbon (#181818) for dark feature sections, and Mist White (#f5f5f5) for reversed text. Keep Antique Gold (#917300) and Signal Gold (#ffc000) reserved for prominent vehicle actions. Use a condensed display-style sans such as Barlow Condensed to approximate LamboType; set large headings in uppercase and keep body text simple. Lead with full-bleed vehicle photography or video, then alternate spacious light sections and dark product showcases. Align copy with clear editorial intent, keep controls square and quiet, and use fine borders rather than shadows. Prioritize the vehicle, preserve generous section breathing room, and avoid decorative UI.
