# Artek · Design system migration spec

> Source: https://www.artek.fi  ·  Curated by OpenDesign  ·  en

> A great example of restrained, premium design where the product photography takes center stage.

## 1. Identity DNA

The Artek system is structured like a clean, high-end furniture catalog: the interface itself is a quiet frame, meticulously crafted to showcase the objects and stories within. It operates on a principle of restrained Scandinavian modernism, where every element serves a deliberate purpose and the digital space feels as considered as a physical gallery.

**One-liner:** A refined furniture brand website emphasizing photographic storytelling and restrained, classic typography.
**Keywords:** Scandinavian · Furniture · Design · Heritage · Minimalist
**Analogy:** A clean, high-end furniture catalog

## 2. Color

The palette is strictly monochromatic, built on a foundation of black, white, and subtle grays like #F7F7F7 and #EAEAEA. This deliberate absence of chromatic color ensures the interface never competes with the warmth and character provided by high-quality product photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--bg-quiet` | `#EAEAEA` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#919191` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** A monochromatic UI palette with strong reliance on high-quality photography to provide warmth and depth.

The governing principle is that the UI provides neutral structure, allowing the photography to define the emotional tone.

## 3. Typography

The typographic voice is quiet and authoritative, set in the geometric sans-serif Artek Futura. The scale is reserved for essential hierarchy: primary hero headlines, section headlines, primary body text, and navigation metadata, with no decorative serif faces permitted.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 400 | -0.5px | Primary hero headlines |
| heading | 26px | 1.3 | 400 | 0px | Section headlines |
| body | 18px | 1.2 | 400 | 0px | Primary body text |
| small | 14px | 1.5 | 400 | 0px | Navigation and metadata |

## 4. Spacing

The spatial rhythm is defined by generous whitespace, often established through consistent padding blocks like 45px.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace, often defined by padding blocks like 45px.

## 5. Surfaces

Surfaces are defined by their flatness and clarity, with a complete avoidance of heavy drop shadows. Depth is suggested through minimal, precise borders—typically a 1px solid black line for outlines or underlines.

- **Radius:** sm 0px · md 0px · lg 15px · pill 999px
- **Borders:** Minimal, typically 1px solid black for outlines or underlines.

## 6. Layout

The layout skeleton alternates between large, full-bleed photographic sections and structured grid layouts for text and metadata. This creates a powerful editorial rhythm, placing immersive visual storytelling directly alongside clear, organized information.

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

**Skeleton:** Large, full-width photographic sections interspersed with structured grid layouts for text.

## 7. Motion & Interaction

Motion is professional and understated, applied uniformly through transition properties on all elements. The philosophy is functional feedback via smooth fade-ins and subtle transitions, never for mere decoration.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-ins and subtle transitions for UI elements.

- **Hover:** Subtle color changes or opacity shifts.
- **Click:** Immediate feedback.
- **Transition:** All elements have a transition property applied.
- **Keyboard:** Standard navigation focus states.

## 8. Voice & Don'ts

The editorial voice is elegant and direct, matching the typographic tone. Headlines are short and prominent, while calls to action are understated—often realized as underlined text or a simple minimalist button.

- **Tone:** Quiet, authoritative, and elegant.
- **Headline style:** Short, direct, and typographically prominent.
- **CTA style:** Understated, often just underlined text or a simple button.
- **Avoid:** Excessive decoration / Bright colors / Playful language

### Don'ts
- ❌ Don't use high-chroma colors — the screenshot shows a strict monochromatic palette.
- ❌ Don't use heavy drop shadows — the screenshot shows flat, clean surfaces.
- ❌ Don't use decorative serif fonts — the screenshot shows geometric sans-serif typography.
- ❌ Don't clutter the layout with small, dense text blocks — the screenshot shows generous spacing.
- ❌ Don't use loud, colorful buttons — the screenshot shows minimal outline buttons.
- ❌ Don't use dark mode — the screenshot shows predominantly light backgrounds.

The system deliberately avoids high-chroma colors, heavy shadows, decorative typography, cluttered layouts, and playful language to maintain its refined, classic character.

## System Prompt (paste into AI tool)

```
Artek is a premium Finnish furniture brand. Its website features a refined, editorial aesthetic with a focus on high-quality photography. The design relies on a clean geometric sans-serif typeface (Artek Futura). The color palette is strictly monochromatic, using black, white, and neutral grays (#F7F7F7, #EAEAEA), allowing the product photography to provide warmth and character. Key hex values include #FFFFFF for main backgrounds and #000000 for primary text. Do not use excessive decoration or bright colors; avoid heavy shadows or playful typography; do not clutter the layout.
```