North star · Let warm empty space and one compelling yacht photograph carry the page, with typography as the only strong interface ornament.
The visual identity is built around a warm, continuous sand canvas, with deep blue-black text providing crisp contrast and very little decorative chrome. The opening is image-led: a large yacht-at-sea photograph sits inside an organic, curved silhouette, while the centered wordmark and compact navigation keep the frame composed. Voyage, a literary display face, gives the French headline an elegant editorial character; GT Pressura Mono handles navigation, captions, and uppercase action labels with a technical, maritime edge. Content sections remain spacious and centered, allowing headings and yacht imagery to feel deliberately paced rather than crowded. Product and service areas use image-led groupings, not heavy card UI. A dark footer creates the page’s strongest tonal shift. Screenshot blues belong chiefly to the photographed sea and sky, not to the measured brand palette; reproduce them through relevant imagery rather than inventing blue interface colors.
Navigation, body copy, captions, eyebrows, and action links.
Aa 设计
Voyage
网络字体 · 字重 400 · 占比 7%
免费替代：Cormorant Garamond
Display headline and editorial section headings.
Aa 设计
Times New Roman
系统字体 · 字重 400 · 占比 5%
免费替代：Cormorant Garamond
System fallback for serif text if the display webfont is unavailable.
角色
示例
字号
字重
行高
字距
特大标题
Oversized editorial title over the hero yacht photograph.
Miti Navi
72px
400
0.9
0
一级标题
Primary page or section heading in the display serif.
Miti Navi
46px
400
0.9
0
正文
Uppercase monospaced introductory copy and section text.
The quick brown fox 敏捷的狐狸
14px
400
1.4
0.071em
辅助文字
Small uppercase image and supporting-detail labels.
The quick brown fox 敏捷的狐狸
10px
400
1.4
0.1em
导航
Compact monospaced header navigation.
The quick brown fox 敏捷的狐狸
16px
400
1.4
0
链接
Tracked uppercase calls to action and text links.
The quick brown fox 敏捷的狐狸
12px
400
1.4
0.083em
眉题
Small uppercase section labels above headings.
The quick brown fox 敏捷的狐狸
14px
400
1.4
0.071em
代码
Monospaced utility or information text where needed.
const style = 1;
16px
400
1.4
0
间距与布局
基准单位 4px · 密度：适中
60px版块间距
—元素间距
—卡片内边距
1288px内容最大宽度
5px
10px
15px
16px
20px
24px
30px
32px
60px
Use a centered, wide desktop composition with a measured maximum content width of 1288px. The header distributes navigation to both sides of a centered wordmark. The hero is a large, nearly full-width image with its distinctive curved upper silhouette and text set over the open left side. Subsequent sections retain a single warm background and generous vertical breathing room; center the yacht-range heading, then use two-column yacht features and a three-column service grouping. Keep density comfortable and avoid enclosing every item in a card.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is mostly flat: measured shadows and gradients are absent, and the main content relies on spacing rather than card borders. Keep image and text planes clean with minimal layering. Use the dark footer as a strong background change, while preserving fine, understated rules beneath select hero labels or links.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Split header navigation
Compact GT Pressura Mono navigation, split left and right around a centered Miti Navi wordmark, with language choices near the center.
Organic hero image
Wide yacht photograph with a sculpted curved top edge, overlaid by a Voyage headline and a tracked uppercase text link.
Centered range introduction
A centered editorial heading introduces yacht sizes and a simple text-based discovery link on the warm canvas.
Yacht feature links
Image-led yacht entries arranged in two columns, with concise monospaced labels and understated text links.
Three-part service group
Three service areas—shipyard, yacht rental, and repair—presented as a spacious image-supported row with centered headings.
Dark information footer
Midnight Tide background with compact company address, contact, and social links in monospaced text.
Imagery · Prioritize authentic yacht and sailing photographs, especially wide sea-level views with clear sky and water. Frame the opening image in a large organic shape with text over a quiet area; use supporting yacht imagery in the range and service sections. The screenshot’s blues are photographic sea and sky tones, not additional interface palette colors. Avoid illustration-heavy or synthetic 3D treatment.
Use Sailcloth Sand #e8ded0 as the dominant content canvas.
Keep navigation and utility labels monospaced and visually compact.
Set major editorial headings in a graceful, regular-weight serif.
Give yacht photography generous space and a clear focal subject.
Use whitespace to separate sections instead of adding card chrome.
Reserve Midnight Tide #000e13 for strong text contrast and the footer.
✕ 不该做
Do not introduce bright interface colors absent from the measured palette.
Do not treat photographic sea blues as brand UI colors.
Do not crowd the hero with dense controls or boxed content.
Do not use heavy shadows, gradients, or rounded card systems.
Do not replace the editorial serif with a bold geometric display face.
Do not turn uppercase labels into widely spaced decorative headlines.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Miti Navi page with a calm maritime editorial identity. Use Sailcloth Sand (#e8ded0) as the broad canvas, Graphite Type (#232323) for secondary copy, Harbor Gray (#999999) for low-priority details, and Midnight Tide (#000e13) for primary ink and a dark footer. Set expressive headlines in a Voyage-like literary serif; use a GT Pressura Mono-like face for navigation, captions, and tracked uppercase links. Favor a spacious centered layout, split navigation around a centered wordmark, and a large yacht photograph with an organic curved frame. Organize content into restrained image-led groups with generous vertical breathing room. Keep surfaces flat and avoid shadows, gradients, decorative color blocks, or heavy cards. Treat ocean blues as photograph content rather than interface palette.
