# Article · Design system migration spec

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

> This site is a prime example of modern, photography-driven e-commerce that uses a minimal UI to let the product shine.

## 1. Identity DNA

The design system operates as a curated catalog for modern living, where the interface itself recedes to let the furniture take center stage. Like a well-organized showroom, it establishes a clear, neutral backdrop—a structural framework that supports the objects without competing with them.

**One-liner:** A clean, photographic e-commerce platform for modern furniture and home decor.
**Keywords:** Furniture · Modern · Lifestyle · Direct-to-consumer
**Analogy:** A curated catalog for modern living

## 2. Color

The palette is built on a high-contrast neutral foundation of white and dark gray, creating a gallery-like canvas. A single, vibrant coral accent provides strategic punctuation, while the true color richness is delegated to the photographic imagery.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#2E2E2E` | body text |
| `--ink-soft` | `#424242` | secondary text |
| `--muted` | `#626262` | placeholder |
| `--accent` | `#FF6458` | single accent |
| `--line` | `rgba(46, 46, 46, 1)` | divider |

**Color principle:** A high-contrast neutral base with photographic color and a vibrant coral accent.

The governing principle is restraint, using color sparingly to direct attention, not to decorate.

## 3. Typography

Typography adopts a clean, geometric sans-serif category voice, establishing a modern and direct tone. Bold weights and tight tracking for headlines command attention, while regular-weight body text with comfortable line height ensures effortless readability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 700 | -1px | Hero headlines |
| h1 | 32px | 1.2 | 700 | 0px | Section headings |
| body | 16px | 1.3 | 400 | 0px | General text |
| small | 14px | 1.2 | 400 | 0px | Product names |

**Type rules:**
- Use uppercase for buttons and navigation links
- Headlines use tight tracking and bold weight
- Body text uses regular weight with comfortable line height

## 4. Spacing

A consistent 4px grid establishes the underlying rhythm, providing predictable structure to every element on the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous spacing between sections.

## 5. Surfaces

Depth is communicated through a restrained, three-tier shadow system, from subtle lifts to dramatic casts. Borders are minimal and functional—a single, dark solid line defines edges without adding visual weight.

- **Radius:** sm 4px · md 8px · lg 50px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.08) 0px 4px 8px 0px
  - rgba(0, 0, 0, 0.04) 0px 16px 16px 0px
  - rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
- **Borders:** 1px solid #2E2E2E

## 6. Layout

The layout skeleton begins with expansive, full-bleed hero imagery that sets an aspirational tone. This is followed by structured grids for product display, creating a clear path from inspiration to selection.

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

**Skeleton:** Full-width hero images followed by structured grids for products.

## 7. Motion & Interaction

Motion philosophy is one of minimal, functional feedback. Transitions are short and smooth, serving to acknowledge interaction and guide focus without becoming a spectacle.

- **Durations:** micro 100ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth background-color transitions on hover
  - Opacity fade for subtle UI state changes

- **Hover:** Subtle color change or underline appearance
- **Click:** Immediate visual feedback, often via color shift
- **Transition:** All transitions at 0.1s to 0.3s ease-in-out
- **Keyboard:** Standard focus outlines on interactive elements

## 8. Voice & Don'ts

The editorial voice is helpful, aspirational, and direct—punchy headlines lead, while CTAs are clear, imperative, and set in uppercase for clarity. The system actively avoids dense text blocks, aggressive sales language, and unnecessary filler.

- **Tone:** Helpful, aspirational, and direct
- **Headline style:** Punchy and benefit-oriented
- **CTA style:** Clear, imperative, and uppercase
- **Avoid:** Overly technical jargon / Aggressive sales language / Unnecessary filler words

### Don'ts
- ❌ Don't use rounded rectangles — screenshot shows pill-shaped buttons instead.
- ❌ Don't use a bright, clashing accent palette — screenshot shows a restrained neutral base with one coral accent.
- ❌ Don't use complex shadows on cards — screenshot shows minimal, flat photography.
- ❌ Don't use serif fonts — screenshot shows exclusively sans-serif typography.
- ❌ Don't use dense text blocks — screenshot shows generous whitespace and short copy.
- ❌ Don't use dark backgrounds for the main layout — screenshot shows primarily white and off-white backgrounds.

What is deliberately omitted is as defining as what is included: no serifs, no rounded rectangles, no complex shadows, and no dark backgrounds for the main layout.

## System Prompt (paste into AI tool)

```
This is a modern e-commerce design for a furniture brand, focusing on large lifestyle photography and clean typography. The layout uses a white background with dark gray text (#2E2E2E) and a vibrant coral accent (#FF6458). Typography is a geometric sans-serif category, using bold weights for headlines and regular for body text. Critical constraints: avoid using serif fonts, never use rounded rectangles for buttons, and avoid dense text blocks that would clutter the photographic-heavy layout. The design prioritizes whitespace and clear visual hierarchy to let the product images stand out.
```