# Dyson · Design system migration spec

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

> Exemplary premium hardware e-commerce design that balances dramatic product presentation with clinical information hierarchy.

## 1. Identity DNA

Dyson's design system operates like a high-end hardware showroom: clinical, precise, and utterly focused on the engineering within. Every interface element serves to showcase the product, not itself, resulting in a system where minimalism is a technical achievement rather than an aesthetic choice.

**One-liner:** A premium hardware e-commerce site that showcases engineering innovation through clean typography and dramatic product photography.
**Keywords:** Engineering · Premium · Innovation · Precision · Minimalism
**Analogy:** High-end hardware showroom with clinical precision

## 2. Color

The palette is a study in controlled contrast: a stark monochromatic foundation of black and white, mediated by cool grays, with a single blue accent reserved exclusively for interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f5f5f5` | card background |
| `--bg-quiet` | `#fcfcfc` | quiet area |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#999999` | secondary text |
| `--muted` | `#919191` | placeholder |
| `--accent` | `#0066cc` | single accent |
| `--line` | `rgba(51, 51, 51, 1.0)` | divider |

**Color principle:** High-contrast foundation with black headers and white content areas, using a single blue accent for interactive elements

The principle is restraint: color is functional, not decorative, ensuring visual focus remains on product photography and technical information.

## 3. Typography

Typography is set in the humanist-sans DysonFutura, using exclusively light (300) and regular (400) weights. The system reserves bold weights for specific, deliberate emphasis, allowing scale and weight hierarchy to communicate importance.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 300 | -0.5px | Hero product names |
| heading-lg | 36px | 1.1 | 300 | -0.3px | Section headlines |
| heading-md | 24px | 1.3 | 400 | 0 | Card titles |
| body | 16px | 1.5 | 400 | 0 | Body text |
| caption | 14px | 1.4 | 400 | 0 | Subtitles and secondary info |

**Type rules:**
- Use light weights (300) for large display text
- Use regular weight (400) for body text
- Never use bold weights except for specific emphasis

## 4. Spacing

A consistent 8px base rhythm governs all measurements, with generous vertical padding between sections creating a clean, spacious cadence for content.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 px
- **Rhythm:** 8px base rhythm with generous vertical padding for sections

## 5. Surfaces

Surfaces are defined by subtle, functional depth: a sharp 1px inset shadow establishes a defined edge, while a soft, diffuse shadow provides a clean lift from the background. Borders are precise and minimal, used only for input delineation and subtle card separation.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - 0 0 0 1px rgba(51, 51, 51, 1) inset
  - 0 0 18px 0 rgba(0, 0, 0, 0.2)
- **Borders:** 1px solid rgb(51, 51, 51) for inputs, subtle borders for cards

## 6. Layout

The structural skeleton begins with full-width, left-aligned hero sections set against dramatic product photography. This transitions into a grid-based product showcase, maintaining generous whitespace between each card for clarity and focus.

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

**Skeleton:** Full-width hero sections with left-aligned content, followed by grid-based product cards

## 7. Motion & Interaction

Motion philosophy is one of refinement and confirmation: all transitions are enabled by default, operating on a smooth 0.5s timing with cubic-bezier easing. This applies to image reveals and subtle color shifts on interactive elements, providing immediate and consistent feedback.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.68, 0.03, 0.26, 1.02)`
- **Patterns:**
  - All transitions enabled by default
  - Smooth image reveals

- **Hover:** Subtle color transitions on interactive elements
- **Click:** Immediate visual feedback with color state changes
- **Transition:** 0.5s all transitions for smooth state changes
- **Keyboard:** Focus states visible through border styling

## 8. Voice & Don'ts

The editorial voice carries technical authority with understated confidence: product names are precise, headlines are light and large-scale, and calls to action are direct and uppercase. The system deliberately avoids loud marketing language, decorative elements, and casual friendliness.

- **Tone:** Technical authority with understated confidence
- **Headline style:** Light-weight, large-scale product names and claims
- **CTA style:** Direct 'Shop now' with arrow indicators, uppercase styling
- **Avoid:** Loud marketing language / Decorative elements / Rounded friendly shapes

### Don'ts
- ❌ Don't use decorative elements — screenshot shows clean, functional layout without ornamentation
- ❌ Don't use rounded containers — screenshot shows minimal border-radius (2-8px max)
- ❌ Don't use bold typography everywhere — screenshot shows light weights (300) dominating display text
- ❌ Don't use warm color palettes — screenshot shows cool grays, blacks, and single blue accent
- ❌ Don't clutter the interface — screenshot shows generous whitespace and focused product presentation
- ❌ Don't use casual friendly language — screenshot shows precise technical product naming and claims

What is deliberately excluded—ornamentation, heavy typography, warm palettes, and rounded forms—is as defining as what is included.

## System Prompt (paste into AI tool)

```
Dyson's website embodies premium hardware engineering through a clinical, high-contrast design system. The palette centers on stark black headers (#000000) against pure white content areas (#ffffff), with a single blue accent (#0066cc) for interactive elements. Body text uses dark gray (#333333) with lighter grays (#999999, #919191) for secondary information. Typography is exclusively humanist-sans (DysonFutura) with light weights (300) for large display text and regular weights (400) for body content. The layout follows a full-width hero approach with left-aligned content over dramatic product photography, transitioning to grid-based product cards below. Critical design constraints: Never use bold weights for display text, avoid rounded containers beyond 8px radius, maintain generous whitespace between sections, use only functional interactive elements without decorative additions, preserve the stark black/white/gray palette with minimal color accents, and ensure all typography remains light and refined rather than heavy or casual.
```