# Ferm Living · Design system migration spec

> Source: https://fermliving.com  ·  Curated by OpenDesign  ·  en

> The site effectively uses high-quality editorial photography and generous whitespace to elevate a standard e-commerce experience into a sophisticated lifestyle brand.

## 1. Identity DNA

The design system for Ferm Living operates like a quiet gallery for living objects. Every structural choice is made to frame the curated collection, allowing the quality of materials and photography to speak with minimal visual interference.

**One-liner:** A premium home goods and furniture retailer focusing on curated, lifestyle-driven editorial layouts.
**Keywords:** Scandinavian · Minimalist · Home Goods · Furniture · Ceremonial
**Analogy:** A quiet gallery for living objects

## 2. Color

The chromatic foundation is deliberately austere, built on a dialogue between warm off-whites and deep charcoal. This restraint ensures the palette acts as a neutral stage for the products themselves.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFEFA` | main background |
| `--bg-soft` | `#F7F5EF` | card background |
| `--ink` | `#383838` | body text |
| `--ink-soft` | `#545454` | secondary text |
| `--muted` | `#444444` | placeholder |
| `--muted-soft` | `#6A5A4B` | weak hint |
| `--line` | `rgba(56, 56, 56, 1)` | divider |

**Color principle:** A restrained palette of warm off-whites and deep charcoals, relying on high-quality photography for visual richness and contrast.

The guiding principle is subtraction; color is used only to support hierarchy and legibility, never to compete with the curated imagery.

## 3. Typography

The typographic voice pairs a high-contrast transitional serif for commanding display headlines with a clean geometric sans-serif for body copy. This duality establishes a tone of sophisticated clarity, separating promotional text from functional interface.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | 0px | Hero headlines |
| heading | 32px | 1.2 | 400 | 0px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Primary text |
| small | 13px | 1.4 | 400 | 0px | Captions and metadata |

**Type rules:**
- Use a high-contrast transitional serif for large display headlines
- Use a clean geometric sans-serif for body copy and UI elements
- Maintain a generous line-height for readability in long-form text

## 4. Spacing

Spatial rhythm is governed by a generous 24px base unit, creating consistent and airy margins throughout the grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous and spacious, relying heavily on the 24px base unit for alignment.

## 5. Surfaces

Depth is suggested through carefully controlled shadow, not borders. Elements appear to float above the surface via large, soft blur shadows, while structural borders are almost entirely absent to preserve a flat, serene plane.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 30px 70px 0px rgba(0, 0, 0, 0.3)
- **Borders:** 1px solid rgb(56, 56, 56) for buttons, very minimal overall use of borders

## 6. Layout

The layout skeleton alternates between full-width photographic hero blocks and clean, wide-margin product grids. This structure prioritizes lifestyle storytelling above the transactional catalog.

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

**Skeleton:** Full-width photographic hero blocks interspersed with clean, wide-margin product grids.

## 7. Motion & Interaction

Motion is employed with deliberate subtlety, using smooth opacity and transform transitions to acknowledge user interaction. The system favors quiet, functional feedback over decorative animation.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions on hover states
  - Subtle fade-ins for page load elements

- **Hover:** Subtle color or opacity change on text and button borders
- **Click:** Immediate feedback with transition to new state
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Standard focus outlines on interactive elements

## 8. Voice & Don'ts

The editorial voice is sophisticated, serene, and understatedly confident. Language is kept short and evocative, avoiding aggressive promotion in favor of a calm, curated tone.

- **Tone:** Sophisticated, serene, and understatedly confident.
- **Headline style:** Short, evocative, and image-focused.
- **CTA style:** Simple and direct, often using uppercase text in bordered boxes.
- **Avoid:** Aggressive promotional language or bright, clashing colors / Cluttered layouts or excessive visual noise / Complex gradients or heavy drop shadows

### Don'ts
- ❌ Don't use a bright neon accent — screenshot shows a muted, earthy palette instead.
- ❌ Don't use heavy drop shadows on UI elements — screenshot shows only deep, large blur shadows on modals.
- ❌ Don't use a complex gradient background — screenshot shows solid, warm off-white tones instead.
- ❌ Don't use a playful or rounded sans-serif — screenshot shows clean geometric sans and high-contrast serifs.
- ❌ Don't use a dense, cluttered grid — screenshot shows generous whitespace and large photographic blocks.
- ❌ Don't use bold or italicized display text — screenshot shows clean, regular-weight typography.

The system deliberately rejects bright neon accents, complex gradients, and cluttered layouts to maintain its core principle of serene minimalism.

## System Prompt (paste into AI tool)

```
Ferm Living is a premium home goods and furniture e-commerce site that blends editorial photography with a minimalist Scandinavian aesthetic. The core palette relies on warm off-white backgrounds (#FFFEFA, #F7F5EF) contrasted against deep charcoal text (#383838). Typography pairs a sophisticated transitional serif for high-impact display headlines with a clean, geometric sans-serif for body copy and UI elements. Critical design constraints: never use bright, high-chroma accent colors; avoid heavy drop shadows on standard UI components; and maintain generous whitespace. Layouts are built on wide-margin grids with full-bleed lifestyle photography to drive emotional connection, requiring a restrained and elegant visual system.
```
