# Master & Dynamic · Design system migration spec

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

> A strong example of restrained premium e-commerce where typography precision and product photography carry the entire visual weight.

## 1. Identity DNA

The Master & Dynamic design system operates like a high-end gallery: the architecture is deliberately neutral, the lighting meticulously controlled, so that the objects within—meticulously crafted audio hardware—receive undivided attention. This is a system of restraint, where every decision in color, type, and spacing serves to frame the product, not compete with it.

**One-liner:** Master & Dynamic presents premium audio hardware through clean, image-driven e-commerce with a restrained, industrial aesthetic.
**Keywords:** premium · industrial · audio · craftsmanship · minimalist
**Analogy:** A high-end design gallery showcasing meticulously crafted audio hardware

## 2. Color

A strictly monochromatic palette of white, black, and neutral grays forms the entire chromatic language. This absence of accent color is a strategic choice, allowing the product photography to supply all visual warmth and focal interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#4A4A4A` | body text |
| `--muted` | `#4A4A4A` | placeholder |
| `--line` | `rgba(74, 74, 74, 0.12)` | divider |

**Color principle:** Minimalist black, white, and gray palette that lets high-quality product photography drive the visual experience

The governing principle is absolute minimalism in support of the object.

## 3. Typography

The typographic voice is one of industrial precision, delivered through a custom grotesque sans-serif system. It employs tight negative tracking and a predominant regular weight, with uppercase transforms for navigation to create a clean, architectural hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.0 | 400 | -1.04px | Hero product title |
| heading | 41px | 1.0 | 700 | -0.82px | Section headings |
| body-lg | 20px | 1.2 | 400 | -0.4px | Subheadings and feature labels |
| body | 18px | 1.0 | 400 | -0.4px | Primary body text and navigation |
| body-sm | 16px | 1.0 | 400 | -0.32px | Secondary text and smaller UI elements |

**Type rules:**
- Uppercase transform for navigation and category labels
- Tight letter spacing throughout (negative tracking)
- Line height matches font size for single-line text elements

## 4. Spacing

The spacing rhythm is built on a strict 4px base, scaled through primary multiples of 16px, 24px, and 48px to create a consistent, measured cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 30 / 48 / 96 px
- **Rhythm:** Base 4px with multipliers primarily at 4x (16px), 6x (24px), and 12x (48px)

## 5. Surfaces

Surfaces are defined by their restraint, using a single, subtle box-shadow for elevation and fine, semi-transparent borders. The goal is to suggest depth without adding visual weight, maintaining the system's clean, graphic quality.

- **Radius:** sm 4px · md 7px · lg 8px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.5) 0px 5px 15px 0px
- **Borders:** 1px solid rgba(74, 74, 74, 0.12)

## 6. Layout

The structural skeleton prioritizes impact through full-bleed hero imagery and generous whitespace. Content then organizes into orderly columns—often a three-column feature grid—ensuring a clear, spacious hierarchy that lets visuals lead.

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

**Skeleton:** Full-width hero imagery with centered text overlay; 3-column feature grid; content-aligned text sections

## 7. Motion & Interaction

Motion is functional and understated, using brief, consistent ease-in-out transitions for state changes. The philosophy is to provide clear, immediate feedback for interaction without introducing decorative animation.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Fade transitions for menu and overlay interactions
  - Smooth color and background-size transitions on interactive elements
  - Subtle hover state changes with 150ms timing

- **Hover:** Background color, color, box-shadow, and border transitions with 150ms ease-in-out
- **Click:** Subtle scale or opacity feedback
- **Transition:** 0.2s ease-in-out for opacity, 0.15s ease-in-out for color/border/background properties
- **Keyboard:** Standard focus states with outline indicators

## 8. Voice & Don'ts

The editorial voice is confident, premium, and concise, focusing on product qualities and direct action. It pairs tight, uppercase headlines with simple, verb-driven calls to action.

- **Tone:** Confident, premium, and concise; focuses on product qualities and brand philosophy
- **Headline style:** Direct product names and benefit statements, often in uppercase or tight-tracked display type
- **CTA style:** Simple, action-oriented verbs like 'Shop Now', 'Learn More', 'Continue' in pill-shaped buttons
- **Avoid:** Technical jargon overload / Salesy urgency language / Decorative typography / Busy backgrounds behind text / Rounded friendly aesthetics / Neon or high-saturation accent colors

### Don'ts
- ❌ Don't use decorative serifs — screenshot shows a clean grotesque/geometric sans-serif system for all display and body text
- ❌ Don't use high-saturation accent colors — screenshot shows a strictly monochromatic palette of black, white, and grays
- ❌ Don't use heavy drop shadows or borders on cards — screenshot shows edge-to-edge product photography with minimal surface treatment
- ❌ Don't use rounded or playful border radii — screenshot shows consistent tight radii (4-8px) or pill shapes (9999px)
- ❌ Don't use wide letter spacing — screenshot shows tight negative tracking across all text sizes
- ❌ Don't crowd the layout with text — screenshot shows generous whitespace and large hero imagery dominating the visual hierarchy
- ❌ Don't use multiple font weights — screenshot shows predominantly regular (400) weight with minimal bold (700) usage
- ❌ Don't use decorative backgrounds — screenshot shows flat white, black, or gray backgrounds letting product photography provide visual interest

The system deliberately avoids decorative typography, playful radii, high-saturation accents, and crowded layouts.

## System Prompt (paste into AI tool)

```
Master & Dynamic is a premium audio hardware brand using a clean, minimal e-commerce design. The site uses a monochromatic palette (#FFFFFF background, #4A4A4A text, #000000 for dark sections) with no accent colors. Typography is a custom grotesque sans-serif with tight negative tracking and minimal weight variation (mostly 400). Layout is spacious with full-bleed product photography driving the visual experience. Key donts: never use decorative serifs, avoid high-saturation accents, never add heavy shadows to product cards, don't use wide letter spacing, and never crowd layouts with text. The system prioritizes restraint and lets product imagery speak, using uppercase transforms and pill-shaped buttons for interactive elements.
```
