North star · Let alpine photography and generous quiet space lead; keep every interface detail restrained, precise, and warm.
The visual identity balances a warm stone canvas (#ebe7e1) with deep alpine teal (#193741), using white and pale cream to punctuate long editorial sections. Most page content sits on the beige ground; a white gallery interlude and dark teal experience section create clear shifts without adding visual clutter. Large, refined Giovanni serif headlines carry the emotional message, while Avenir Roman supports body copy, uppercase eyebrows, and navigation. The layout favors centered statements, generous uninterrupted space, occasional split image-and-copy sections, and a single centered chalet showcase. Full-bleed video and large photographic panels establish place and mood; images are treated as the primary color and texture rather than as decoration. Controls remain quiet: pill-shaped outlined links, fine teal borders, and restrained gold details. Keep the page flat and spacious, letting typography, architecture, and landscape carry the luxury signal.
Body copy, small navigation labels, eyebrows, captions, and outlined link controls.
Aa 设计
ITC Giovanni Std Bold
网络字体 · 字重 700 · 占比 14%
免费替代：Cormorant Garamond
Display headlines and section headings.
角色
示例
字号
字重
行高
字距
特大标题
Oversized editorial statement headlines, especially over hero imagery.
BelArosa Chalet
64px
700
1.1
0
一级标题
Primary page or section headline, set in the distinctive serif.
BelArosa Chalet
28px
700
1.4
0
二级标题
Section and chalet titles; keep the serif character prominent.
The quick brown fox 敏捷的狐狸
24px
700
1
0
正文
Descriptive chalet, dining, wellness, and destination copy.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
辅助文字
Small uppercase labels and photo or navigation details.
The quick brown fox 敏捷的狐狸
12px
400
1
0.167em
眉题
Tracked uppercase section identifiers such as CUISINE and WELLNESS.
The quick brown fox 敏捷的狐狸
12px
400
1
0.167em
间距与布局
基准单位 8px · 密度：宽松
240px版块间距
240px元素间距
—卡片内边距
720px内容最大宽度
2px
4px
8px
16px
20px
24px
32px
48px
64px
80px
160px
Build a long, spacious editorial scroll on a centered content frame, with measured page max width of 720px for constrained content. The hero and destination imagery can extend edge to edge, while most sections keep a single-column, centered composition. Alternate these with occasional two-column image-and-copy blocks and a compact chalet showcase. Preserve the measured base spacing rhythm and unusually generous section separation; do not compress the broad quiet intervals. The gallery changes to white, then the experience section returns to deep teal.
圆角与层次
按钮 · 9999px
链接 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page reads as flat and architectural: measured shadows are absent, and the main controls rely on fine outlines rather than raised surfaces. Images provide depth through their own lighting and framing. Use clean boundaries between beige, white, and deep teal sections, with only restrained tonal transitions such as the measured white-to-cream gradient.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Hero
Full-bleed video or photography with a darkened treatment, small tracked uppercase eyebrow, centered white serif headline, and a discreet scroll cue.
Outlined pill link
Transparent fill, thin #234049 border, Avenir Roman 16px label, and fully rounded ends; used for editorial actions such as “Our philosophy.”
Chalet showcase
A centered property image with a serif chalet title and compact uppercase discovery link layered over the image.
Section eyebrow
Small uppercase Avenir Roman label with generous tracking, typically placed above a serif section heading.
Image-led split
Two-column editorial block pairing a prominent photograph with a section label, serif heading, body copy, and a restrained link.
Gallery
Bright white image section with a centered uppercase identifier, serif heading, broad photo grid, and a subtle outlined “Go to gallery” control.
Experience band
Dark #193741 destination section with full-bleed imagery, centered white heading, and concise exploration links.
Imagery · Use cinematic video and photography of Arosa, alpine peaks, chalet architecture, warm timber interiors, dining, and wellness. Hero media fills the viewport behind centered white serif type, with a darkened image treatment supporting contrast. Later photos sit within broad quiet beige fields, sometimes as a centered chalet card or split editorial image. Avoid illustration-led styling; the landscape and interiors supply the texture and color.
Reserve #193741 for text, deep section bands, and strong contrast.
Let full-bleed alpine imagery define the hero mood.
Pair Giovanni-style serif headlines with clean Avenir-like sans copy.
Keep uppercase eyebrows small, tracked, and understated.
Leave generous open space between editorial sections.
✕ 不该做
Do not introduce bright, saturated interface colors.
Do not crowd the generous section intervals with extra content.
Do not add heavy shadows or raised-card styling.
Do not use filled, oversized CTAs where outlined links fit.
Do not apply decorative illustration styles over the photography.
Do not replace the calm editorial hierarchy with dense grids.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Create a new page in the BelArosa Chalet visual style: a quiet, premium alpine editorial experience rather than a conventional booking storefront. Use Warm Stone (#ebe7e1) as the main canvas, Alpine Teal (#193741) for text and occasional dark bands, Gallery White (#ffffff) for a clean gallery interlude, and Chalet Gold (#eac486) only as a sparse detail. Pair elegant, high-contrast serif headlines with a clean Avenir-like sans for copy and tracked uppercase labels. Organize content in a long, spacious scroll with full-bleed landscape or chalet photography, centered statements, and occasional image-and-copy splits. Keep controls transparent and finely outlined in teal, with pill ends for editorial links. Avoid shadows, dense cards, loud color, and cramped spacing; use the imagery, contrast, and generous negative space to communicate understated luxury.
