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

# Raus · Design System

> A quiet, editorial escape into nature

**Theme:** light · **Industry:** travel · **Source:** https://www.raus.life/ · **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._

Raus pairs a warm ivory canvas and deep forest-green identity with restrained editorial typography. Spacious photo-led storytelling, compact booking controls, and rounded accents make cabin discovery feel calm and approachable.

## North star

Keep the warm ivory canvas and generous breathing room dominant, then use forest green and rounded, high-contrast booking accents sparingly.

## Overview

The page is anchored by a warm ivory canvas (#fdf9ed), which remains continuous across the long scroll instead of dividing content with strong background bands. A deep green identity appears in the oversized Raus wordmark and introductory line; ink-dark text carries navigation and body copy, while orange, pale blue, and yellow are reserved for booking, newsletter, and search accents. The typography contrasts light, close-set serif display headings with a clean sans-serif for navigation, controls, and supporting copy. Layout is intentionally spacious: the header and short hero sit above offset cabin photographs and a floating search bar, followed by a broad white feature panel, a three-column journal feed, and a dense multi-column footer. Photography supplies the natural color and sense of place. Rounded controls and cards soften the otherwise flat, quiet composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Quiet Ink | `#23212c` | `--color-quiet-ink` | neutral | Primary navigation, body text, dark booking controls, and thin outlines. |
| Cabin Ivory | `#fdf9ed` | `--color-cabin-ivory` | brand | Dominant page canvas and continuous background across the homepage sections. |
| Campfire Orange | `#dd5000` | `--color-campfire-orange` | accent | Primary booking CTA and occasional highlighted text, including footer details. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Journal cards and the broad cabin-discovery feature surface. |
| Sky Wash | `#a6dfff` | `--color-sky-wash` | accent | Newsletter CTA and a secondary surface accent; use as a small, distinct color block. |
| Marigold Search | `#fcbd1c` | `--color-marigold-search` | semantic | Search and booking interface surface; also appears in the circular stay prompt. |
| Forest Emblem | `#006434` | `--color-forest-emblem` | brand | Raus wordmark and the introductory hero line, reinforcing the nature-led identity. |

### Semantic aliases

`--color-canvas` → `#fdf9ed` (Cabin Ivory) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#a6dfff` (Sky Wash) · `--color-text` → `#23212c` (Quiet Ink) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-border` → `#23212c` (Quiet Ink) · `--color-accent` → `#dd5000` (Campfire Orange) · `--color-accent-2` → `#a6dfff` (Sky Wash) · `--color-accent-3` → `#006434` (Forest Emblem) · `--color-on-accent` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#23212c` | `#fdf9ed` | 15.05:1 | AAA |
| `#23212c` | `#ffffff` | 15.84:1 | AAA |
| `#23212c` | `#a6dfff` | 11.03:1 | AAA |
| `#ffffff` | `#fdf9ed` | 1.05:1 | fail |
| `#ffffff` | `#a6dfff` | 1.44:1 | fail |
| `#dd5000` | `#fdf9ed` | 3.82:1 | AA-large |
| `#dd5000` | `#ffffff` | 4.02:1 | AA-large |
| `#dd5000` | `#a6dfff` | 2.8:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neue-haas-unica | `--font-body` | webfont | 400, 300 | Sans-serif for navigation, body copy, labels, and interface controls. | Inter |
| fonts | `--font-display` | webfont | 300 | Light serif display face for the main hero and large section headings. | Cormorant Garamond |

- **neue-haas-unica:** Use regular and light weights; compact tracking is common, with uppercase reserved for small labels.
- **fonts:** Use a light editorial weight, close leading, and subtly tightened tracking; keep headings in sentence case.

### Type scale — Minor Third (ratio ≈ 1.221, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 300 | 0.95 | -0.02em | — | fonts | Main hero statement beneath the Raus wordmark. |
| h2 | 36px | 300 | 1 | -0.015em | — | fonts | Large section headings, including cabin discovery and journal. |
| h3 | 28px | 300 | 1.07 | -0.015em | — | fonts | Editorial card titles and smaller feature headings. |
| h4 | 22px | 400 | 1.18 | -0.01em | — | neue-haas-unica | Supporting section titles and prominent interface copy. |
| body | 18px | 400 | 1.22 | -0.01em | — | neue-haas-unica | Introductory copy, descriptions, and general supporting text. |
| caption | 14px | 400 | 1.29 | -0.01em | uppercase | neue-haas-unica | Uppercase labels, category markers, and small metadata. |
| nav | 22px | 400 | 1.18 | -0.01em | — | neue-haas-unica | Primary header navigation links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 12, 16, 20, 24, 26, 40, 48, 192 px.
- Section rhythm 96px · element gap 4px · card padding 20px · max content width 1428px.

Use a spacious, single-column page flow with a measured maximum content width of 1428px. Keep the header and introductory statement aligned to the left, then let the hero photography overlap and offset around a floating booking bar. The cabin feature has a broad white surface; the journal becomes a three-column feed, and the footer organizes links in two columns. The measured section gap is 96px, with generous open canvas between the image-led hero and later content.

## Shape & elevation

- Radius: button `12px` · card `20px` · nav `20px` · xs `4px` · sm `12px` · md `20px` · lg `72px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: no measured shadows or gradients establish hierarchy. Separate content with whitespace and occasional white surfaces rather than borders. Rounded cards and controls provide the main dimensional cues; layer the booking/search bar over the hero photographs, while keeping outlines and other decoration restrained.

## Imagery

Use natural, documentary-style cabin and landscape photography rather than decorative illustration. In the hero, offset two rectangular photographs with rounded corners and let the wide search bar cross in front. The imagery is richly green and warm, providing the page’s environmental color variation against ivory. Journal cards use smaller photographs and concise editorial titles; retain clear image crops and avoid heavy overlays.

## Components

### Primary booking CTA

Use Campfire Orange (#dd5000), white text, a 12px radius, and Neue Haas Unica at 18px; label example: “Book now!”

### Cabin discovery CTA

Use Quiet Ink (#23212c) with white 22px sans-serif text, a 20px radius, and 20px horizontal padding.

### Newsletter CTA

Use Sky Wash (#a6dfff) with Campfire Orange (#dd5000) text, 22px sans-serif type, and a 20px radius.

### Journal card

White (#ffffff) surface with Quiet Ink (#23212c) text, 20px radius and padding; pair an uppercase category label with a light editorial title.

### Booking search bar

Place a wide Marigold Search (#fcbd1c) rounded bar across the hero imagery, with region, arrival/departure, guests, and a dark search action.

### Header navigation

Quiet Ink (#23212c) sans-serif links in a single horizontal row, with a compact uppercase language selector at the end.

### Measured component styles

- **Primary button** (“Book now!”): background #dd5000 · text #ffffff · radius 12px · padding 0px 10px · 400 18px neue-haas-unica
- **Secondary button** (“Sign up for Newsletter”): background #a6dfff · text #dd5000 · radius 20px · padding 0px 20px · 400 22px neue-haas-unica
- **Link** (“PERSPECTIVES Anne-Christin shares: her t”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px neue-haas-unica
- **Input** (“en de”): transparent background · text #23212c · radius 0px · padding 0px 16px 0px 6px · 400 14px neue-haas-unica · uppercase
- **Card** (“PERSPECTIVES Anne-Christin shares: her t”): background #ffffff · text #23212c · radius 20px · padding 20px · 400 16px neue-haas-unica
- **Navigation item** (“Book a cabin”): transparent background · text #23212c · radius 0px · padding 0px · 400 22px neue-haas-unica

## Do

- Keep Cabin Ivory (#fdf9ed) as the dominant canvas.
- Use Forest Emblem (#006434) for the wordmark and nature-led introduction.
- Set large statements in the light editorial serif.
- Use photography to carry the sense of place.
- Give sections generous breathing room.
- Keep functional accents rounded and easy to scan.

## Don't

- Do not introduce unmeasured colors into the interface palette.
- Do not split the page into many high-contrast color bands.
- Do not crowd the hero with extra copy or controls.
- Do not add heavy shadows or decorative gradients.
- Do not make every element a pill or rounded card.
- Do not let the journal cards overpower their photography and titles.

## Agent prompt

Build a new travel page in Raus’s quiet, nature-led editorial style. Use Cabin Ivory (#fdf9ed) as the continuous canvas and Quiet Ink (#23212c) for navigation and body copy. Make the wordmark and select introductory text Forest Emblem (#006434). Pair a light editorial serif for major headings with a clean sans-serif for controls, labels, and navigation. Use offset cabin or landscape photography as the visual anchor, with a Marigold Search (#fcbd1c) booking bar layered across it. Reserve Campfire Orange (#dd5000) for the primary booking action and Sky Wash (#a6dfff) for a secondary CTA. Keep content spacious, section transitions subtle, and surfaces mostly flat; use measured rounded cards and buttons without adding shadows or invented palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned wordmark and short introductory heading beneath a slim horizontal navigation. | primary navigation, language selector | oversized green wordmark, ivory canvas, light display heading |
| 2 | product-showcase | Two offset photographs with captions and a floating horizontal search bar. | region selection, date selection, guest selection, search action | overlapping photography, marigold search bar, rounded image corners |
| 3 | feature-split | Broad white feature panel with a heading and compact dark CTA. | cabin discovery link | white rounded surface, editorial serif heading, dark rounded CTA |
| 4 | content-feed | Left-aligned section heading above a three-column editorial card feed. | article cards, view all link | white cards, uppercase category labels, serif story titles |
| 5 | footer | Two-column lower-page composition with newsletter content, brand mark, and grouped site links. | newsletter signup, grouped footer navigation, social and payment links | large green wordmark, sky-blue newsletter CTA, compact link groups |

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