# Walden Us · Design system migration spec

> Source: https://walden.us  ·  Curated by OpenDesign  ·  en

> Excellent example of premium wellness branding that balances luxury aesthetics with functional e-commerce patterns.

## 1. Identity DNA

Walden's design system functions like a luxury zen retreat for meditation products, where every element is placed with the same deliberateness as a stone in a rock garden. The identity is built on a foundation of restraint, using a muted palette and clean geometry to create an environment that prioritizes calm over commerce.

**One-liner:** High-end meditation and wellness brand with a calm, nature-focused design language.
**Keywords:** zen · premium · minimalist · meditation · nature-inspired
**Analogy:** A luxury zen retreat for meditation products

## 2. Color

The color system is a disciplined exercise in restraint, built from white, near-black, and warm grays. Nature photography is the sole source of chromatic variation, acting as the living element within the system's carefully constructed stillness.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EDEDEDE` | card background |
| `--bg-quiet` | `#F7F7F7` | quiet area |
| `--ink` | `#030302` | body text |
| `--ink-soft` | `rgba(3,3,2,0.76)` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `rgba(3,3,2,0.4)` | weak hint |
| `--line` | `rgba(3,3,2,0.15)` | divider |

**Color principle:** Muted, nature-inspired palette dominated by white, deep green, and warm grays

The principle is that color should be a quiet presence, never a shout, allowing content and photography to hold the visual weight.

## 3. Typography

Typography is split between two clean, geometric families: **Geist** for display headings and branding, and **Graphik** for body text and navigation. The choice of two modern, functional sans-serifs establishes a voice that is sophisticated but never decorative, with consistent letter spacing prioritizing readability.

- **Display:** geometric-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 500 | -0.5px | Modal headline WALDEN |
| h1 | 20px | 1.2 | 400 | 0 | Section headers |
| body | 14px | 1.4 | 400 | 0 | Primary body text and navigation |
| small | 12px | 1.2 | 400 | 0 | Fine print and labels |

**Type rules:**
- Use Graphik for body text and navigation
- Use Geist for display headings and branding
- Maintain consistent letter spacing for readability

## 4. Spacing

A consistent 4px base grid provides the foundational rhythm, with generous padding applied at every scale to enforce deliberate breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 px
- **Rhythm:** Consistent 4px base grid with generous padding for breathing room

## 5. Surfaces

Depth is communicated through subtle, carefully layered shadows and translucent inset borders rather than heavy outlines. The surface treatment aims to lift content gently off the page, creating a soft hierarchy without introducing visual noise.

- **Radius:** sm 2px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 4px 20px 0px rgba(3,3,2,0.15)
  - inset 0px 0px 0px 1px rgba(211,206,197,1)
  - 0px 0px 30px 0px rgba(0,0,0,0.15)
- **Borders:** Subtle 1px borders using rgba(3,3,2,0.76)

## 6. Layout

The layout skeleton opens with a full-width nature photography hero, centered by a modal overlay that commands focus. This transitions into a structured, grid-based product display below, maintaining clear spatial separation between sections.

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

**Skeleton:** Full-width image hero with centered modal overlay and structured product grid below

## 7. Motion & Interaction

Motion is used for calming, functional feedback rather than dramatic effect. All transitions are a consistent 0.125 seconds with ease-in-out curves, creating a seamless and peaceful browsing rhythm through fade transitions and subtle color shifts on interactive states.

- **Durations:** micro 125ms · small 200ms · medium 400ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Fade transitions for content visibility
  - Color and background-color transitions on hover

- **Hover:** Color transitions on text and background-color on interactive elements
- **Click:** Immediate visual feedback with background color change
- **Transition:** All 0.125s ease-in-out for smooth micro-interactions
- **Keyboard:** Focus states visible on interactive elements

## 8. Voice & Don'ts

The editorial voice is calm, welcoming, and sophisticated, using simple, direct statements and questions. Calls to action are framed as clear, experience-based choices rather than aggressive sales prompts.

- **Tone:** Calm, welcoming, and sophisticated
- **Headline style:** Simple, direct questions and statements
- **CTA style:** Clear, experience-based options rather than aggressive sales language
- **Avoid:** Aggressive sales language / Loud colors or busy patterns / Complex technical jargon / Dense text blocks / Overly casual tone

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows only white, gray, and dark green tones
- ❌ Don't use decorative fonts — screenshot shows clean geometric and grotesque sans-serifs
- ❌ Don't use rounded pill buttons everywhere — screenshot shows rectangular buttons with subtle rounding
- ❌ Don't create dense text layouts — screenshot shows generous white space and breathing room
- ❌ Don't use busy patterns — screenshot shows clean solid backgrounds with photography
- ❌ Don't use aggressive CTAs — screenshot shows calm, experience-based selection options

The system deliberately avoids loud colors, decorative type, dense layouts, and any pattern or language that might disrupt the serene, focused environment it constructs.

## System Prompt (paste into AI tool)

```
WALDEN is a premium meditation and wellness brand with a calm, nature-inspired design language. Key hex colors include white (#FFFFFF), near-black (#030302), and warm grays (#808080, #EDEDEDE). Typography uses geometric sans (Geist) for headings and grotesque sans (Graphik) for body text. The design emphasizes breathing room with generous padding and subtle borders. Critical donts: don't use bright accent colors (palette is muted), don't use decorative fonts (keep it clean and geometric), don't create dense layouts (maintain generous whitespace).
```