# USM · Design system migration spec

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

> A perfect example of high-end Swiss modernism applied to web design, where the UI system completely defers to the product it showcases.

## 1. Identity DNA

If design has a Bauhaus architect, this system would be its furniture showroom. Every element exists within a strict, modular framework where Swiss precision meets modernist restraint, creating a digital environment as calculated and purposeful as the product system it serves.

**One-liner:** A premium, grid-based modular furniture system rooted in Swiss modernism.
**Keywords:** modular · Swiss · modernist · system · precision
**Analogy:** The Bauhaus architect of furniture

## 2. Color

The color strategy is one of deliberate absence. A strict monochrome canvas of pure white and deep black is designed to recede entirely, letting the colorful modular product photography command full attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--bg-quiet` | `#E8E8E8` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#373A40` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Strict monochrome canvas that lets the colorful modular product photography command full attention.

The principle is clear: the interface is a gallery wall, not the artwork itself.

## 3. Typography

The typographic voice is that of a **grotesque-sans** family, likely Helvetica or a close relative. It speaks with a clean, neutral authority, using mostly regular and light weights to maintain a sophisticated, understated presence.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero product headlines |
| h1 | 40px | 1.2 | 400 | -0.5px | Section headers |
| body | 16px | 1.5 | 400 | 0.5px | Body copy and navigation |

**Type rules:**
- All-caps used sparingly for utility text
- Generous letter-spacing (0.5px) on standard weight text
- High contrast (black on white) maintained strictly

## 4. Spacing

Generous whitespace defines the rhythm, establishing a luxury feel through sheer spatial generosity.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 120 px
- **Rhythm:** Generous, generous whitespace defines the luxury feel.

## 5. Surfaces

Depth is communicated through a single, precise shadow rather than heavy layering. Borders are absent; structural lines are instead defined by the geometry of the product itself.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 5px 50px 0px
- **Borders:** No visible UI borders; structural lines are defined by the product geometry.

## 6. Layout

The skeletal layout is a strict rigid grid system, intersected by full-bleed photography. Massive whitespace and sharp, zero-radius edges create a high-end, architectural framework.

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

**Skeleton:** Full-bleed photography intersected by a strict rigid grid system.

## 7. Motion & Interaction

Motion is minimal and purposeful, guided by a philosophy of understated performance over spectacle. Simple opacity fades and smooth width transitions guide the user without distraction.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Simple opacity fades
  - Smooth width transitions

- **Hover:** Subtle opacity shifts or simple text underlines.
- **Click:** Immediate visual feedback
- **Transition:** Smooth opacity and visibility transitions (0.25s-0.3s)
- **Keyboard:** Standard focus outlines

## 8. Voice & Don'ts

The editorial voice is sophisticated, precise, and deliberately understated. Headlines are short, declarative, and factual, while calls to action are direct and action-oriented.

- **Tone:** Sophisticated, precise, and understated.
- **Headline style:** Short, declarative, and purely factual.
- **CTA style:** Direct and action-oriented (e.g., 'Take a Look').
- **Avoid:** Exclamation marks / Marketing superlatives / Overly casual language

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp, 90-degree angles on buttons and elements.
- ❌ Don't use drop shadows on primary UI elements — screenshot shows a flat, shadowless interface.
- ❌ Don't use decorative backgrounds — screenshot shows clean white space (#FFFFFF) surrounding core components.
- ❌ Don't use mixed font families — screenshot shows a consistent Helvetica/Arial grotesque stack throughout.
- ❌ Don't use heavy font weights — screenshot shows a dominance of 400 weight and light 300 weights.
- ❌ Don't use colorful accents — screenshot shows a strict black-and-white UI allowing product colors to shine.

This system deliberately rejects marketing superlatives, rounded corners, decorative backgrounds, and colorful UI accents to maintain its modernist purity.

## System Prompt (paste into AI tool)

```
This is a premium, modernist e-commerce platform for modular Swiss furniture. It relies on a stark, high-contrast monochrome UI (white #FFFFFF and black #000000) to act as a neutral canvas for vibrant product photography. The typography is exclusively a grotesque-sans family (Helvetica/Arial) using mostly regular (400) and light (300) weights with generous letter-spacing (0.5px). The layout follows a strict grid system with extensive whitespace (120px padding) and sharp, zero-pixel border radii. Do not use rounded corners, drop shadows, mixed fonts, or colorful UI accents. Never use heavy font weights or marketing superlatives; maintain a precise, understated, and highly structured visual voice.
```
