# Varierfurniture · Design system migration spec

> Source: https://www.varierfurniture.com/en_gb  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in 'less is more', providing a perfect example of high-end, restrained Scandinavian web design.

## 1. Identity DNA

The design language of Varier Furniture operates like a quiet Scandinavian showroom, where every element is given room to breathe and nothing competes for attention. Its identity is built on a foundation of extreme restraint, where the absence of color and ornament becomes the primary expressive gesture.

**One-liner:** A premium furniture brand site defined by extreme restraint, monochrome palette, and generous breathing room.
**Keywords:** minimalist · Scandinavian · furniture · ergonomic · premium
**Analogy:** A quiet Scandinavian showroom with abundant white space and restrained typography.

## 2. Color

The palette is a strict monochrome sequence, moving from pure white through a controlled range of warm grays to a deep charcoal ink. This chromatic austerity ensures that the product itself, when present, remains the sole focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#CFCFCF` | card background |
| `--ink` | `#494949` | body text |
| `--ink-soft` | `#696969` | secondary text |
| `--muted` | `#9C9C9C` | placeholder |
| `--line` | `rgba(156,156,156,1)` | divider |

**Color principle:** Strict monochrome palette using white, black, and a controlled range of warm grays.

The governing principle is absolute chromatic neutrality, rejecting any high-chroma accents in favor of tonal harmony.

## 3. Typography

Typography is handled with a single geometric sans-serif voice, maintaining a regular weight and generous letter-spacing across all hierarchical levels. This uniformity creates a calm, consistent textual rhythm that prioritizes legibility over dramatic contrast.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -0.5px | Large hero headlines (e.g., 'Page not found') |
| h1 | 24px | 1.45 | 400 | 0.4px | Subheadings and cookie text |
| body | 16px | 1.45 | 400 | 0.18px | Standard body text and navigation |

**Type rules:**
- Geometric sans-serif used for all text levels
- Light or regular weight (400) used consistently across all elements
- Generous letter-spacing applied to all text for legibility and elegance

## 4. Spacing

Vertical rhythm is established through significant, deliberate padding around primary content blocks, creating generous breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with significant padding around main content blocks (78px to 109px vertical padding).

## 5. Surfaces

Depth is conveyed sparingly, primarily through subtle, soft box-shadows applied only to specific interactive elements like a chat widget. Borders are minimal, using a muted gray line to define controls without visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 8px 10px -6px
  - rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
- **Borders:** 1px solid border using muted gray (#9C9C9C) for buttons and outlines

## 6. Layout

The structural skeleton is a centered, single-column layout that aligns content to the vertical axis of the viewport. This formal simplicity, combined with vast whitespace, frames each piece of content with museum-like focus.

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

**Skeleton:** Centered single-column layout with strict alignment to the middle of the viewport.

## 7. Motion & Interaction

Motion is employed with professional understatement, limited to smooth, predictable transitions on interactive states. The philosophy is functional feedback, using standard easing curves to confirm user actions without theatrical flourish.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background-color and color transitions on interactive elements
  - Transform transitions for hover states

- **Hover:** Subtle background-color or color transitions (0.15s-0.25s) on buttons and navigation links.
- **Click:** Standard pointer cursor for interactive elements.
- **Transition:** Smooth 150ms to 250ms transitions on color, background, and box-shadow.
- **Keyboard:** Not explicitly visible, but standard focusable elements are likely present.

## 8. Voice & Don'ts

The editorial voice is calm, professional, and direct, mirroring the visual restraint. Headlines are short and clear, while calls to action are polite and action-oriented, free from marketing embellishment.

- **Tone:** Calm, professional, and direct.
- **Headline style:** Short, clear, and completely devoid of marketing fluff.
- **CTA style:** Action-oriented and polite (e.g., 'Back to homepage', 'Accept cookies').
- **Avoid:** Bright or saturated colors / Excessive punctuation or emojis / Dense text blocks / Loud or aggressive typography

### Don'ts
- ❌ Don't use bright, saturated colors — screenshot shows a strict monochrome palette of white, black, and grays.
- ❌ Don't use heavy font weights — screenshot shows consistent use of regular (400) weight for all text.
- ❌ Don't create dense, cramped layouts — screenshot shows generous whitespace and padding (78px-109px vertical).
- ❌ Don't use sharp, square corners on primary buttons — screenshot shows pill-shaped (999px) buttons.
- ❌ Don't use drop shadows everywhere — screenshot shows shadows are only present on a specific chat widget and minimal interactive states.
- ❌ Don't add unnecessary decorative elements — screenshot shows a very clean, minimalist interface with no illustrations.

The system deliberately excludes decorative illustrations, saturated color, typographic heaviness, and dense text blocks to preserve its serene, premium character.

## System Prompt (paste into AI tool)

```
Design a premium, Scandinavian-inspired furniture website characterized by extreme restraint and calmness. Use a strict monochrome palette consisting of a pure white background (#FFFFFF), dark gray ink (#494949), medium muted grays (#696969, #9C9C9C), and a light gray surface (#CFCFCF). There should be no high-chroma accent colors. Use a clean geometric-sans typeface for all display and body text, maintaining a regular (400) weight and generous letter-spacing. The layout must be centered, minimalist, and feature vast amounts of whitespace, especially around headlines. Critical donts: never use bright or saturated colors, never use bold or heavy font weights, and never create dense or cramped content blocks.
```