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

# Walden · Design System

> Quiet products, grounded in nature.

**Theme:** light · **Industry:** ecommerce · **Source:** https://walden.us/ · **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._

Walden’s homepage pairs immersive nature photography with a restrained, gallery-like presentation of meditation products. A white canvas, understated typography, and image-led category sections keep the experience calm and tactile.

## North star

Let immersive, natural product photography lead, while the interface stays quiet, white, and typographically restrained.

## Overview

Walden’s visual strategy balances a quiet storefront interface with highly atmospheric product imagery. The measured palette is led by pure white (#ffffff), used for the page canvas and the broad space between category displays; near-black (#030302) and black (#000000) carry most interface text, while warm stone (#d3cec5) appears in fine borders. The homepage hero overlays its forest scene with small, centered white copy and a transparent navigation layer. Below, generous image-led bands and compact three-image groupings behave like editorial product galleries rather than conventional boxed cards. Graphik is the single measured typeface, set at regular weight with modest line heights and no conspicuous tracking or uppercase treatment. Product imagery supplies the page’s richer greens, muted blues, charcoal, and warm neutrals; these belong to the photographs, not the measured interface palette. Spacing separates categories clearly, while hairline rules and simple controls keep the merchandising understated.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation text over imagery, and light text on dark image captions. |
| Warm Stone | `#d3cec5` | `--color-warm-stone` | neutral | Subtle input and navigation hairlines; a restrained warm neutral rather than a section fill. |
| Soft Ink | `#030302` | `--color-soft-ink` | brand | Primary dark interface color for footer, links, headings, and the filled CTA. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Dark navigation and heading text; secondary to the near-black interface color. |
| Slate Text | `#3f3f3f` | `--color-slate-text` | neutral | Occasional subdued heading, navigation, and footer text. |
| Smoked Plum | `#3e3839` | `--color-smoked-plum` | neutral | Sparse background detail; not a defining interface color or section band. |
| Ash Gray | `#686867` | `--color-ash-gray` | neutral | Minor footer text, used for low-emphasis supporting information. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Pure Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#030302` (Soft Ink) · `--color-border` → `#d3cec5` (Warm Stone)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#030302` | `#ffffff` | 20.63:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik | `--font-body` | webfont | 400 | Measured site-wide sans serif for navigation, headings, body copy, links, and captions. | Inter |

- **Graphik:** Regular weight throughout; measured roles use modest line heights, neutral tracking, and natural casing.

### Type scale — Major Third (ratio ≈ 1.286, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 18px | 400 | 1.1 | 0 | — | Graphik | Hero statement and prominent section heading text. |
| body | 14px | 400 | 1.1 | 0 | — | Graphik | Supporting copy and general storefront content. |
| caption | 10px | 400 | 1 | 0 | — | Graphik | Small labels over product and category images. |
| nav | 14px | 400 | 1 | 0 | — | Graphik | Header navigation and utility links. |
| link | 14px | 400 | 1.4 | 0 | — | Graphik | Product names and calls to action. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 10, 11, 12, 16, 20, 24, 30, 40, 60 px.
- Section rhythm 60px · element gap 5px · card padding — · max content width 1360px.

A comfortable, image-led storefront sits within a measured maximum page width of 1360px. The full-bleed hero contrasts with the aligned content sections below, where large category photographs alternate with compact three-column image groupings. Sections follow a clear vertical rhythm, with a measured 60px section gap and restrained space around labels. Most content is left-aligned; hero copy is centered over the image. The page feels spacious without adding decorative framing or dense interface panels.

## Shape & elevation

- Radius: button `2px` · nav `9999px` · xs `2px` · pill `9999px`
- Shadow `inset` (nav, link): `rgb(211, 206, 197) 0px 0px 0px 1px inset`
- Shadow `inset-2` (button): `rgb(3, 3, 2) 0px 0px 0px 1px inset`
- Shadow `hairline` (input): `rgb(211, 206, 197) 0px 1px 0px 0px`
- Motion: standard transition `0.125s ease-in-out` on interactive elements.

The page is mostly flat: white canvas, broad photographs, and very little card framing. Warm Stone (#d3cec5) appears in fine rules, including the understated input divider. Measured inset shadows are limited to controls and links; avoid adding prominent drop shadows or layered panels.

## Imagery

Large photographic scenes carry the brand: a forest-set hero, a meditating person, and carefully staged incense, cushions, benches, and gongs. Images use broad, rectangular crops and natural or studio lighting, with small captions placed over or beneath the photography. The forest greens and other vivid tones are photographic content, not additional measured interface colors.

## Components

### Overlay storefront navigation

Compact Graphik navigation over the hero image, with the wordmark, category links, service links, currency, and utility icons.

### Announcement strip

A narrow, dark notice band above the navigation with a single centered fulfillment message in small, light text.

### Hero image and copy

Full-bleed forest photography with a centered short statement and shop link near the lower part of the image.

### Image-led category feature

A small category label precedes a wide lifestyle image, followed by a compact row of three product-category images with captions.

### Product image gallery

Large rectangular product photographs alternate with three-image groupings; image captions remain small and unobtrusive.

### Newsletter and footer

A simple email entry row with a hairline divider, followed by compact columns of store, support, and policy links.

### Measured component styles

- **Primary button**: background #030302 · text #ffffff · radius 2px · padding 16px 24px · 400 14px Graphik · shadow rgb(3, 3, 2) 0px 0px 0px 1px inset
- **Link** (“The Original Cushion”): transparent background · text #030303 · radius 0px · padding 0px · 400 14px Graphik
- **Input**: transparent background · text #030302 · radius 0px · padding 12px 0px · 400 20px Graphik · shadow rgb(211, 206, 197) 0px 1px 0px 0px
- **Navigation item** (“Shop Seating Aroma Home Body Live Concie”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Graphik

## Do

- Use Gallery White (#ffffff) as the primary page canvas.
- Give category photography the visual emphasis.
- Keep navigation and captions compact and understated.
- Use Soft Ink (#030302) for prominent interface text and filled CTAs.
- Separate product categories with generous white space.
- Use Warm Stone (#d3cec5) for quiet hairlines.

## Don't

- Do not treat photographic greens as interface palette colors.
- Do not add gradients or decorative color bands.
- Do not wrap every image in a card.
- Do not use heavy shadows or raised panels.
- Do not introduce bold, oversized typography.
- Do not crowd the image-led category sections.

## Agent prompt

Build a calm, image-led ecommerce page in Walden’s visual style. Use Gallery White (#ffffff) as the canvas, Soft Ink (#030302) for primary text and filled actions, and Warm Stone (#d3cec5) only for subtle dividers and borders. Set a restrained Graphik-like sans serif in regular weight; keep navigation, captions, and labels compact. Organize the page into broad photographic category features with generous white space and occasional three-image product groupings. Make photography feel natural, tactile, and editorial, with wide crops and small unobtrusive captions. Keep the header quiet and overlay it on a full-bleed hero where appropriate. Favor flat layouts, hairlines, and simple controls; avoid decorative panels, prominent shadows, bright interface accents, and dense copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed forest image with transparent overlay navigation and centered lower-page copy. | Shop best sellers link, Persistent utility navigation | Announcement strip, Image overlay, White navigation text |
| 2 | feature-grid | Category label, wide lifestyle image, then three side-by-side product images. | Category browsing, Product image links | Wide image feature, Three-image row, Small image captions |
| 3 | product-showcase | One large product image followed by a three-image product grouping. | Browse by product, Image-led discovery | Editorial product photography, Compact captions |
| 4 | product-showcase | Large gong feature followed by a row of three smaller product images. | Explore sound products, Browse related items | Large product image, Three-column image row |
| 5 | footer | Email entry row above a compact multi-column set of footer links. | Email signup, Support and policy navigation | Hairline divider, Minimal form row, Small link columns |

## Source CSS custom properties (selected)

```css
--hover-shadow-color: rgba(3 3 2 / 1.0);
--hover-transition-duration: 0.25s;
--color-background: rgba(255 255 255 / 1.0);
--color-foreground: rgba(3 3 2 / 0.76);
--color-foreground-heading: rgba(3 3 2 / 1.0);
--color-primary: rgba(3 3 2 / 1.0);
--color-primary-hover: rgba(3 3 2 / 1.0);
--color-border: rgba(211 206 197 / 1.0);
--color-shadow: rgba(3 3 2 / 1.0);
--color-primary-button-text: rgba(255 255 255 / 1.0);
--color-primary-button-background: rgba(3 3 2 / 1.0);
--color-primary-button-border: rgba(3 3 2 / 1.0);
--color-primary-button-hover-text: rgba(255 255 255 / 1.0);
--color-primary-button-hover-background: rgba(45 45 45 / 1.0);
--color-primary-button-hover-border: rgba(3 3 2 / 1.0);
--color-secondary-button-text: rgba(3 3 2 / 1.0);
--color-secondary-button-background: rgba(0 0 0 / 0.0);
--color-secondary-button-border: rgba(211 206 197 / 1.0);
--color-secondary-button-hover-text: rgba(3 3 2 / 1.0);
--color-secondary-button-hover-background: rgba(0 0 0 / 0.0);
--color-secondary-button-hover-border: rgba(3 3 2 / 1.0);
--color-input-background: rgba(211 206 197 / 0.09);
--color-input-text: rgba(3 3 2 / 1.0);
--color-input-border: rgba(211 206 197 / 1.0);
--color-input-hover-background: rgba(245 245 245 / 1.0);
--color-variant-background: rgba(0 0 0 / 0.0);
--color-variant-border: rgba(3 3 2 / 0.11);
--color-variant-text: rgba(0 0 0 / 1.0);
--color-variant-hover-background: rgba(245 245 245 / 1.0);
--color-variant-hover-text: rgba(0 0 0 / 1.0);
--color-variant-hover-border: rgba(230 230 230 / 1.0);
--color-selected-variant-background: rgba(0 0 0 / 0.0);
--color-selected-variant-border: rgba(3 3 2 / 1.0);
--color-selected-variant-text: rgba(3 3 2 / 1.0);
--color-selected-variant-hover-background: rgba(26 26 26 / 1.0);
--color-selected-variant-hover-text: rgba(255 255 255 / 1.0);
--color-selected-variant-hover-border: rgba(26 26 26 / 1.0);
--input-disabled-background-color: rgb(from rgba(3 3 2 / 0.76) r g b / 10%);
--input-disabled-border-color: rgb(from rgba(3 3 2 / 0.76) r g b / 5%);
--input-disabled-text-color: rgb(from rgba(3 3 2 / 0.76) r g b / 50%);
```

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