North star · Let cinematic photography carry the emotion while a quiet, spacious interface keeps vehicle and service information clear.
The visual system balances a quiet interface with image-led storytelling. White is the primary canvas for the vehicle hero, specifications, and service features; pale sage (#f2f3ed) marks the sustainability and brand-discovery sections. Black (#000000) creates a distinct, immersive band for NIO House and lifestyle content, while text and navigation reverse to white on dark imagery. BlueSkyStandard is used throughout in a clean sans-serif voice, with light-weight headings, compact navigation, and restrained body copy. Full-bleed vehicle photography opens the page, followed by a centered model showcase and broad image panels. Later features alternate generous white space with structured image-and-copy layouts. Buttons are understated, square-cornered outlines rather than filled promotional blocks. Hairline borders and minimal elevation preserve the editorial feel; spacing is generous between major stories but denser in the specification area and footer. Warm desert tones in the hero and other photographic colors belong to media, not the interface palette.
Site-wide navigation, headings, body copy, captions, and buttons.
角色
示例
字号
字重
行高
字距
一级标题
Primary page or story heading, often paired with a large image.
NIO
28px
400
1.3
0
二级标题
Section headings and prominent story titles.
The quick brown fox 敏捷的狐狸
20px
300
1.3
0
三级标题
Subheads within service and feature content.
The quick brown fox 敏捷的狐狸
18px
700
1.6
0
正文
Supporting descriptions and explanatory copy.
The quick brown fox 敏捷的狐狸
14px
400
1.3
0
辅助文字
Small image captions and secondary details.
The quick brown fox 敏捷的狐狸
12px
400
1.58
0
按钮
Short action labels in understated outlined controls.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0
导航
Compact top navigation labels.
The quick brown fox 敏捷的狐狸
12px
400
3.67
0
间距与布局
基准单位 4px · 密度：适中
80px版块间距
12px元素间距
—卡片内边距
1280px内容最大宽度
4px
6px
8px
10px
11px
12px
14px
16px
18px
20px
22px
36px
40px
60px
80px
The page alternates full-bleed media and contained content. The measured page max width is 1280px, with a 12-column model showcase and later two- and three-column feature arrangements. Centered headings introduce the model and brand-discovery areas; service stories align copy beside imagery. Major sections have generous vertical separation, while model specifications and the five-column footer are comparatively dense. Keep image blocks broad and let text sit in calm, uncluttered zones.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The measured interface is mostly flat, with no defined shadow system or radius scale. Outlined buttons and restrained hairline borders provide the main component edges. Use image placement and the transition between white, sage, and black section bands for depth; avoid adding card shadows or decorative effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Compact BlueSkyStandard navigation over the hero image, using white labels and restrained spacing.
Vehicle hero
Full-bleed vehicle media with white model lockup, a small outlined Learn more control, and thin slide indicators.
Vehicle selector
Centered model-exploration section with specifications, seating options, and navigation controls in a dense grid.
Outline CTA
Square-cornered, unfilled action control with a thin white or #111111 border depending on its background.
Brand story panel
Image-led panel on #f2f3ed, pairing centered messaging with a broad landscape image.
Service feature
Open white layout with copy and a large adjacent photograph; content is separated by whitespace rather than card elevation.
Community feature
Black section with a large NIO House image, centered white copy, and minimal outlined action.
Footer navigation
White, multi-column link directory with compact text, region and language selection, and small utility links.
Imagery · Photography and video dominate: cinematic electric vehicles in landscape settings open the page, while later images show cars, charging infrastructure, service facilities, and NIO Houses. Use broad, landscape-oriented crops, full-bleed media where the story calls for immersion, and contained paired imagery in feature sections. The warm desert palette in the hero and vivid colors in promotional artwork are photographic content, not interface colors.
Use #ffffff as the dominant canvas and preserve generous breathing room.
Reserve #f2f3ed for soft brand-story and discovery bands.
Use #000000 for the community feature and high-contrast text.
Let full-width automotive photography lead major stories.
Keep headings, navigation, and captions restrained and sans-serif.
Use thin square-cornered outline buttons instead of filled promotional CTAs.
✕ 不该做
Do not treat warm hero-image colors as interface palette colors.
Do not add shadows or rounded card styling absent from the measured system.
Do not fill every section with copy or decorative UI.
Do not make buttons visually heavier than the photography.
Do not carry the black community treatment across the entire page.
Do not use oversized, dense navigation or excessive text decoration.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new NIO-style page with cinematic electric-vehicle photography and a calm editorial interface. Use Gallery White (#ffffff) as the main canvas, Sage Mist (#f2f3ed) for selected story bands, and Night Ink (#000000) for text and a distinct dark community section. Keep the interface flat: no invented shadows or rounded cards. Use BlueSkyStandard or a close sans-serif substitute, restrained headings, compact navigation, and short supporting copy. Structure content with broad image-led sections, paired copy-and-photo features, and generous whitespace; use contained grids for specifications and directories. Buttons should be small, square-cornered outlines in white or #111111 as contrast requires. Treat warm landscape hues and promotional artwork colors as image content, not brand UI colors.
