# Raus Life · Design system migration spec

> Source: https://www.raus.life  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a premium, consumer-facing brand that balances modern minimalism with a warm, inviting personality.

## 1. Identity DNA

Raus Life operates as a premium digital concierge for nature retreats, a system built on the analogy of a well-appointed cabin: every element is chosen with intention, every surface considered. The design language translates this physical sense of retreat into a digital space, where modern minimalism and organic warmth coexist without compromise.

**One-liner:** Premium cabin booking platform with a calm, nature-inspired aesthetic.
**Keywords:** retreat · cabin · escape · nature · restful
**Analogy:** A premium digital concierge for nature retreats, blending modern minimalism with organic warmth.

## 2. Color

The color system is grounded in a palette of deep charcoal, crisp white, and forest green, creating a sophisticated yet restful atmosphere. A warm orange serves solely as a promotional accent, ensuring the primary experience remains calm and focused.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#23212c` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--bg-quiet` | `#fdf9ed` | quiet area |
| `--ink` | `#23212c` | body text |
| `--ink-soft` | `#23212c` | secondary text |
| `--muted` | `#006434` | placeholder |
| `--accent` | `#dd5000` | single accent |
| `--line` | `rgba(35,33,44,1)` | divider |

**Color principle:** Grounded elegance using deep charcoals, crisp whites, and earthy forest greens.

The palette follows a principle of grounded elegance, using earthy tones and stark neutrals to build a premium, nature-inspired foundation.

## 3. Typography

The typographic voice is set by a clean, geometric grotesque-sans-serif, engineered for modern clarity. A key rule is the application of negative letter-spacing to display and heading sizes, forging a compact, confident silhouette against the generous layout.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -0.54px | Brand logo and large hero headlines |
| h1 | 36px | 1.0 | 400 | -0.22px | Section headers |
| body-lg | 22px | 1.18 | 400 | -0.22px | Subheadings and prominent body text |
| body | 18px | 1.22 | 400 | -0.18px | Standard paragraph text |
| body-sm | 16px | 1.15 | 400 | -0.14px | Small body text and labels |

**Type rules:**
- Use negative letter-spacing for all display and heading sizes to create a compact, modern feel.
- Keep body text at 400 weight for a clean, approachable readability.
- Use uppercase text sparingly, primarily for labels and tags.

## 4. Spacing

All layout and component sizing derives from a consistent 4px base grid, establishing a steady visual rhythm. This modular system is paired with generous padding in primary containers to ensure content breathes.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous padding in primary containers.

## 5. Surfaces

Surfaces are defined by a deliberate use of depth and boundary. Thin 1px borders using the primary ink color provide subtle delineation, while a single, deep shadow value is reserved for key floating elements like modals, maintaining a predominantly flat and clean field.

- **Radius:** sm 4px · md 12px · lg 20px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
- **Borders:** Thin 1px borders using the primary ink color, often used as bottom borders on interactive elements.

## 6. Layout

The layout skeleton employs full-width sections that anchor expansive photographic backgrounds, creating immediate atmospheric impact. Within these sections, a constrained central content area ensures readability and focus, establishing a clear visual hierarchy through controlled white space.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width sections with a constrained central content area.

## 7. Motion & Interaction

The motion philosophy is one of subtle enhancement, used sparingly to support the calm atmosphere rather than distract from it. All transitions are standardized to a fluid 0.2s, applying smooth opacity and transform animations to elements like overlays and modals for a seamless, unobtrusive response.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for overlays and modals.

- **Hover:** Subtle background color shifts or underline reveals.
- **Click:** Immediate visual feedback with transition states.
- **Transition:** All properties transition over 0.2s for a fluid feel.
- **Keyboard:** Standard focus outlines or color shifts for accessibility.

## 8. Voice & Don'ts

The editorial voice is inviting, calm, and sophisticated, using short, evocative phrases that focus on the feeling of the experience rather than feature lists. CTAs are direct and action-oriented, often pairing clear language with simple arrows for guidance.

- **Tone:** Inviting, calm, and sophisticated.
- **Headline style:** Short, evocative phrases focusing on the feeling of the experience.
- **CTA style:** Direct and action-oriented, often using arrows.
- **Avoid:** Loud, high-energy copy. / Overly technical jargon. / Aggressive sales tactics.

### Don'ts
- ❌ Don't use bright, neon colors — screenshot shows a palette of deep charcoal, forest green, and warm orange.
- ❌ Don't use rounded, bubbly fonts — screenshot shows a clean, geometric grotesque sans-serif.
- ❌ Don't use heavy drop shadows — screenshot shows a flat design with a single deep shadow for the cookie modal.
- ❌ Don't use cluttered layouts — screenshot shows generous white space and a clear visual hierarchy.
- ❌ Don't use sharp, square corners — screenshot shows rounded corners up to 20px for cards and 99px for buttons.
- ❌ Don't use complex gradients — screenshot shows mostly solid color fills and simple linear fades.

The system deliberately avoids loud, high-energy copy, aggressive sales tactics, and technical jargon to preserve its restful, premium character.

## System Prompt (paste into AI tool)

```
Design a calm, premium cabin booking platform. The palette is anchored by deep charcoal (#23212c) and crisp white (#ffffff), with a forest green (#006434) for primary actions and a warm orange (#dd5000) for promotional accents. Typography is a clean, modern grotesque-sans with tight letter-spacing on display text. Layouts are spacious with a 4px grid and generous padding. Use rounded, pill-shaped buttons and cards with soft shadows. Avoid loud colors, busy layouts, and sharp corners to maintain a restful, nature-inspired aesthetic.
```