---
title: "BelArosa Chalet — Home design system"
variant: extended
source: https://www.belarosa-chalet.ch/en
captured_at: 2026-10-12
theme: light
industry: travel
generator: Design DNA (https://four.wiralomi.com/style/belarosa-chalet-ch)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# BelArosa Chalet — Home · Design System

> Quiet alpine luxury, shaped by space and nature

**Theme:** light · **Industry:** travel · **Source:** https://www.belarosa-chalet.ch/en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

BelArosa Chalet pairs an expansive, restrained editorial layout with cinematic mountain and chalet imagery. Warm stone neutrals, deep alpine teal, elegant serif headlines, and fine outlined controls create a private, understated luxury mood.

## North star

Let alpine photography and generous quiet space lead; keep every interface detail restrained, precise, and warm.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Alpine Teal | `#193741` | `--color-alpine-teal` | brand | Core ink for headings, body text, dark section backgrounds, and selected outlined controls. |
| Warm Stone | `#ebe7e1` | `--color-warm-stone` | surface | Dominant page canvas across the long-form chalet, cuisine, wellness, and family sections. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Bright gallery interlude, selected text, and the lighter end of a subtle cream gradient. |
| Border Teal | `#234049` | `--color-border-teal` | semantic | Fine outlines on pill links and muted teal interface details. |
| Mist Slate | `#8c9ba0` | `--color-mist-slate` | neutral | Secondary copy and small uppercase navigation or eyebrow labels. |
| Vanilla Haze | `#fbf3e7` | `--color-vanilla-haze` | surface | Pale cream tint at the warm end of the subtle white-to-cream section gradient. |
| Weathered Stone | `#bcb9b4` | `--color-weathered-stone` | neutral | Secondary neutral section surface; use sparingly among the dominant warm stone canvas. |
| Night Fjord | `#152f37` | `--color-night-fjord` | brand | Deep inverse section surface, close to the core alpine teal. |
| Ash Taupe | `#b0ada9` | `--color-ash-taupe` | neutral | Minor supporting neutral in incidental interface details, not a defining page surface. |
| Chalet Gold | `#eac486` | `--color-chalet-gold` | accent | Sparse warm accent in small text or decorative marks, including the chalet identity. |

### Semantic aliases

`--color-canvas` → `#ebe7e1` (Warm Stone) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#bcb9b4` (Weathered Stone) · `--color-surface-3` → `#193741` (Alpine Teal) · `--color-surface-4` → `#152f37` (Night Fjord) · `--color-text` → `#193741` (Alpine Teal) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#8c9ba0` (Mist Slate) · `--color-border` → `#234049` (Border Teal) · `--color-accent` → `#eac486` (Chalet Gold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#193741` | `#ebe7e1` | 10.25:1 | AAA |
| `#193741` | `#ffffff` | 12.62:1 | AAA |
| `#193741` | `#bcb9b4` | 6.45:1 | AA |
| `#ffffff` | `#ebe7e1` | 1.23:1 | fail |
| `#ffffff` | `#bcb9b4` | 1.96:1 | fail |
| `#ffffff` | `#193741` | 12.62:1 | AAA |
| `#8c9ba0` | `#ebe7e1` | 2.33:1 | fail |
| `#8c9ba0` | `#ffffff` | 2.87:1 | fail |
| `#8c9ba0` | `#bcb9b4` | 1.47:1 | fail |
| `#8c9ba0` | `#193741` | 4.39:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgb(251, 243, 231))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Avenir LT Pro Roman | `--font-body` | webfont | 400 | Body copy, small navigation labels, eyebrows, captions, and outlined link controls. | Montserrat |
| ITC Giovanni Std Bold | `--font-display` | webfont | 700 | Display headlines and section headings. | Cormorant Garamond |

- **Avenir LT Pro Roman:** Roman regular weight; small labels use uppercase and conspicuously loose tracking. Body copy stays calm and readable.
- **ITC Giovanni Std Bold:** Bold serif forms contrast with the clean sans text; use sentence case for headline statements.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1.1 | 0 | — | ITC Giovanni Std Bold | Oversized editorial statement headlines, especially over hero imagery. |
| h1 | 28px | 700 | 1.4 | 0 | — | ITC Giovanni Std Bold | Primary page or section headline, set in the distinctive serif. |
| h2 | 24px | 700 | 1 | 0 | — | ITC Giovanni Std Bold | Section and chalet titles; keep the serif character prominent. |
| body | 16px | 400 | 1.5 | 0 | — | Avenir LT Pro Roman | Descriptive chalet, dining, wellness, and destination copy. |
| caption | 12px | 400 | 1 | 0.167em | uppercase | Avenir LT Pro Roman | Small uppercase labels and photo or navigation details. |
| eyebrow | 12px | 400 | 1 | 0.167em | uppercase | Avenir LT Pro Roman | Tracked uppercase section identifiers such as CUISINE and WELLNESS. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 16, 20, 24, 32, 48, 64, 80, 160 px.
- Section rhythm 240px · element gap 240px · card padding — · max content width 720px.

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.

## Shape & elevation

- Radius: button `9999px` · link `50%` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

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.

## 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.

## Components

### 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.

### Measured component styles

- **Primary button** (“Our philosophy”): transparent background · text #234049 · border 1px solid #234049 · radius 80px · padding 20px 32px · 400 16px Avenir LT Pro Roman
- **Link** (“PHILOSOPHY”): transparent background · text #8c9ba0 · radius 0px · padding 0px 20px · 400 12px Avenir LT Pro Roman · uppercase
- **Card**: background #193741 · text #193741 · radius 0px · padding 0px · 400 16px Avenir LT Pro Roman

## Do

- Use #ebe7e1 as the primary editorial canvas.
- 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.

## Don't

- 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.

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with centered text overlay and sparse corner navigation. | Scroll cue, Blog and news entry | Darkened cinematic media, Centered serif headline, Tracked eyebrow, Gold identity detail |
| 2 | feature-split | Centered editorial introduction with supporting image and copy. | Read seasonal story, Follow related links | Warm stone canvas, Centered serif heading, Editorial image |
| 3 | feature-split | Spacious single-column statement with supporting chalet imagery. | Explore philosophy | Uppercase eyebrow, Large serif statement, Image-led editorial treatment |
| 4 | product-showcase | Centered introduction followed by a featured chalet image and action links. | Discover individual chalets, Browse chalet options | Serif chalet titles, Image showcase, Outlined pill actions |
| 5 | feature-split | Two-column editorial block with image and text. | Explore dining philosophy | Uppercase eyebrow, Serif heading, Large photography |
| 6 | feature-split | Centered editorial content with supporting wellness imagery. | Explore wellness programme | Warm neutral canvas, Centered serif heading, Quiet image treatment |
| 7 | feature-split | Two-column image and copy arrangement. | Explore stays for groups | Uppercase eyebrow, Serif headline, Editorial photography |
| 8 | gallery | White gallery band with centered heading, broad image grid, and a quiet action. | Open gallery | Gallery White surface, Multi-image grid, Outlined pill link |
| 9 | feature-split | Dark, full-bleed destination band with centered title and two image-led pathways. | Explore experiences, Follow destination links | Deep teal background, Full-bleed landscape media, Centered white title |

## Source CSS custom properties (selected)

```css
--color--background: white;
--color--text: #193741;
--color--text-light: #8c9ba0;
--theme-light--text: #193741;
--color--header-text: rgba(255, 255, 255, 1);
--color: white;
--theme-light--background: white;
--theme-light--text-light: #8c9ba0;
--theme-light--header-text: rgba(255, 255, 255, 1);
--theme-dark--background: #193741;
--theme-dark--text: white;
--theme-dark--text-light: #8c9ba0;
--theme-dark--header-text: white;
--theme-beige--background: #ebe7e1;
--theme-beige--text: #193741;
--theme-beige--text-light: #8c9ba0;
--theme-beige--header-text: rgba(255, 255, 255, 1);
--fluid-header-color--header-fluid-text: rgba(255, 255, 255, 1);
--fluid-header-color--header-fluid-background: white;
--fluid-header-color--color: white;
--fluid-header-color--color-2: white;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/belarosa-chalet-ch