# &Tradition · Design system migration spec

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

> This site is an excellent example of translating a high-end physical brand identity into a restrained, elegant digital experience.

## 1. Identity DNA

The design system for &Tradition operates like a curated gallery, where each digital element serves as a plinth or a wall color, its sole purpose being to frame and present the furniture with clarity. The identity is built on a deliberate restraint, borrowing the quiet authority of a museum's architecture to create an environment where craft can speak for itself.

**One-liner:** Premium Scandinavian furniture brand with an editorial, gallery-like digital presence.
**Keywords:** furniture · design · tradition · craft · aesthetic
**Analogy:** A curated gallery of timeless furniture pieces.

## 2. Color

The color system is built upon a foundation of warm, muted neutrals like #EDECE8 and #F6F6F6, chosen not for vibrancy but for their ability to recede and provide a calm, gallery-like stage. The dark ink of #282828 provides the necessary typographic contrast without the harshness of pure black.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EDECE8` | main background |
| `--bg-soft` | `#F6F6F6` | card background |
| `--bg-quiet` | `#CFD3BC` | quiet area |
| `--ink` | `#282828` | body text |
| `--ink-soft` | `#454545` | secondary text |
| `--muted` | `#5D5D5D` | placeholder |
| `--line` | `rgba(40,40,40,0.1)` | divider |

**Color principle:** Warm, neutral backgrounds that provide a calm, gallery-like stage for high-quality photography.

Every color decision serves the principle of supporting the photography, never competing with it.

## 3. Typography

The typographic voice establishes a dialogue between two distinct categories: a transitional serif for editorial gravitas and a geometric sans for functional clarity. This duality allows the system to shift between poetic headline statements and clean, navigational text while maintaining a consistent sense of refined openness.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.2 | 400 | -0.5px | Primary hero and section headings |
| body | 14px | 1.4 | 400 | 0px | Body copy and navigation |

**Type rules:**
- Use geometric sans for all UI elements, navigation, and body text.
- Use transitional serif for major editorial headings and feature titles.
- Maintain a clean, open typographic feel with generous spacing.

## 4. Spacing

Spacing follows a strict 8px baseline grid, creating a predictable and generous vertical rhythm that gives the layout its characteristic breathability.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px baseline grid with generous vertical rhythm.

## 5. Surfaces

Surfaces are defined by their subtlety, using barely-there shadows and fine borders to suggest depth and separation. The effect is of layered, matte materials rather than digital UI, with a single pixel border in rgba(40,40,40,0.1) acting as the primary delineator between content blocks.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 0px 2px 0px
- **Borders:** 1px solid rgba(40,40,40,0.1)

## 6. Layout

The layout skeleton is an asymmetric editorial grid, designed to create dynamic visual tension by alternating large-scale imagery with blocks of text. This structure avoids rigid uniformity, instead guiding the eye through a paced, narrative sequence of product and story.

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

**Skeleton:** Asymmetric editorial grid, alternating large imagery with text.

## 7. Motion & Interaction

Motion philosophy is one of quiet assistance; animations are functional and brief, existing only to confirm an interaction or guide a focus. All transitions, from hover states to overlay reveals, use a deliberate 0.15s to 0.2s duration to feel smooth but not theatrical.

- **Durations:** micro 150ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity and color transitions on hover.
  - Smooth transitions for opening overlays.

- **Hover:** Subtle color change or underline for links and buttons.
- **Click:** Immediate visual feedback.
- **Transition:** All transitions use a 0.15s to 0.2s duration.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is refined and poetic, favoring descriptive, evocative language for headlines that mirrors the craftsmanship of the products. CTAs are minimal and functional, often simple underlined text links that avoid aggressive marketing calls to action.

- **Tone:** Refined, poetic, and descriptive.
- **Headline style:** Evocative and thematic, often using transitional serif.
- **CTA style:** Minimal and functional, often just a 'Read more' link.
- **Avoid:** Aggressive marketing language / Flashy or cluttered visual elements / Loud, saturated color palettes / Overly complex navigation structures

### Don'ts
- ❌ Don't use neon or highly saturated primary colors — screenshot shows muted, earthy tones.
- ❌ Don't use rounded, bubbly UI elements — screenshot shows sharp, rectangular forms.
- ❌ Don't clutter the interface with many small icons — screenshot shows a very clean, sparse layout.
- ❌ Don't use a heavy, bold sans-serif for all text — screenshot shows a mix of serif and sans-serif.
- ❌ Don't use dark mode as the primary theme — screenshot shows a light, warm, off-white background.
- ❌ Don't use aggressive drop shadows — screenshot shows extremely subtle, minimal shadow effects.

The system deliberately avoids visual noise and aggressive sales language, committing instead to a sparse, contemplative interface that trusts the product imagery to do the convincing.

## System Prompt (paste into AI tool)

```
This design DNA is for a premium, editorial furniture brand like &Tradition. Positioning is high-end and curated. Key colors are warm neutrals like #EDECE8 and #F6F6F6, with dark ink #282828. Typography mixes a transitional-serif for display with a geometric-sans for body. Critical donts: avoid using neon colors, avoid bubbly or highly rounded UI, and never clutter the interface with too many small icons. The overall feel is calm, refined, and gallery-like.
```