North star · Let expansive outdoor photography and confidently oversized type carry the story, while keeping the interface nearly monochrome and unornamented.
The page uses a quiet palette led by pure white (#ffffff), black (#000000), and warm off-white (#faf6ef), with a subtly distinct pale stone band (#f2efea) for the newsletter area. Color stays out of the way of the landscape photography; the dominant dark and earthy tones belong mainly to the trailer, vehicles, and outdoor scenes rather than interface decoration. F37Bolton carries the entire hierarchy, using regular-weight, tightly tracked display headlines against compact, calm body copy. The opening hero is a full-bleed landscape image with white overlay text, followed by broad white intervals and image-led product storytelling. Later sections alternate between centered feature cards, a wide media panel, editorial copy, a team photograph, and a restrained content carousel. Hairline borders and flat surfaces keep components crisp without adding visual weight. The overall rhythm is spacious and deliberate, letting the photography and oversized type supply the drama.
All page typography, from display headlines and navigation to body copy and links.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero and prominent editorial display headlines.
Lightship
76px
400
1
-0.05em
一级标题
Primary page and product-story headline.
Lightship
72px
400
1
-0.05em
二级标题
Major product, feature, and editorial section headings.
Lightship
64px
400
1
-0.05em
三级标题
Feature-card and secondary story headings.
Lightship
48px
400
1
-0.05em
四级标题
Smaller content headings and supporting feature titles.
Lightship
34px
400
1.2
-0.05em
正文
Paragraphs, product descriptions, and explanatory copy.
The quick brown fox 敏捷的狐狸
16px
400
1.25
0
辅助文字
Dates, image notes, and fine-print supporting labels.
The quick brown fox 敏捷的狐狸
14px
400
1.25
0
导航
Primary navigation and compact interface labels.
The quick brown fox 敏捷的狐狸
14px
400
1.25
0
链接
Prominent editorial story links and large text calls to action.
The quick brown fox 敏捷的狐狸
24px
400
1.25
-0.03em
间距与布局
基准单位 8px · 密度：宽松
150px版块间距
16px元素间距
—卡片内边距
—内容最大宽度
4px
8px
12px
16px
20px
24px
28px
40px
100px
124px
150px
200px
The page is a long, spacious sequence on a predominantly white canvas, with a full-bleed media-led opening followed by centered product imagery, feature cards, split editorial sections, a content carousel, newsletter band, and footer. Use broad horizontal compositions where photography leads, and narrow reading measures for copy; measured maximum width is unavailable, so preserve proportions rather than assume a fixed value. Alignment shifts intentionally between centered feature areas and left-aligned editorial blocks. Large section intervals contrast with compact text and navigation, producing a low-density, premium rhythm.
圆角与层次
按钮 · 50%
输入框 · 9999px
链接 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
Keep the interface predominantly flat: no measured shadows or gradients define the design. Separate areas through white space, changes between Gallery White, Canvas Linen, and Stone Haze, and occasional thin Quiet Line rules. Photography creates depth naturally; avoid elevated, heavily outlined UI cards or decorative effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement and navigation
Compact announcement strip above the hero, with centered delivery message and pill-shaped action; navigation overlays the opening image with light text.
Hero
Large landscape photograph with white, widely separated headline phrases, a transparent navigation layer, and a bottom hairline with scroll cue.
Product story cards
Image-led AE.1 sequence with generous white surroundings, simple rectangular photography, and concise black copy.
Technology carousel
Centered heading above a horizontal row of image-backed feature cards, with compact labels and understated carousel controls.
Editorial media panel
Broad photographic feature panel with centered white heading and a small action placed over the image.
Newsletter signup
Two-column section on Stone Haze, pairing editorial copy and rounded zip-code/email fields with a rectangular landscape image.
Footer
Open, white footer with brand statement, grouped text links, fine separators, and simple black brand marks.
Imagery · Use cinematic, natural-light photography of the trailer, tow vehicle, landscapes, campsites, interiors, and manufacturing team. Hero and feature imagery should feel immersive, with overlay copy kept legible over darker image areas. Product and editorial cards use straightforward rectangular crops; photography supplies most of the palette and visual texture. The measured page includes photographic assets rather than a defining illustration or 3D-rendered interface style.
Use the measured palette exactly and keep interface color restrained.
Let large outdoor photographs establish mood and scale.
Set display headlines in regular-weight F37Bolton with tight tracking.
Preserve broad whitespace around major product and editorial blocks.
Use white overlay text only when imagery provides sufficient contrast.
Keep borders and controls understated and functional.
✕ 不该做
Do not add bright accent colors absent from the measured palette.
Do not introduce gradients, shadows, or decorative elevation.
Do not compress the long-form section rhythm into a dense dashboard.
Do not cover product photography with unnecessary interface elements.
Do not use heavy, all-caps typography as the default.
Do not style image-derived earth tones as interface brand colors.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Create a new Lightship page using the measured visual language: an editorial, spacious automotive experience built around outdoor travel photography. Use Gallery White (#ffffff) as the primary canvas, Trail Ink (#000000) for type and key controls, Canvas Linen (#faf6ef) for warm cards, and Stone Haze (#f2efea) for a quiet newsletter or signup band. Use F37Bolton or a close sans-serif substitute, with regular-weight headlines, tight tracking, and compact supporting copy. Arrange content in broad image-led sections, punctuated by centered feature cards and narrow editorial text blocks. Keep components flat, with thin Quiet Line (#d9d9d9) separators and no shadows or gradients. Preserve generous breathing room, let photographs supply natural color, and use restrained overlays and simple controls.
