---
title: "Dyson design system"
variant: extended
source: https://www.dyson.com/en
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/dyson-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Dyson · Design System

> Precision products, presented in calm monochrome

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.dyson.com/en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Dyson’s storefront pairs a restrained black-and-white interface with immersive product and lifestyle photography. A clear sequence of category discovery, editorial campaigns, shopping benefits, product cards, and a dark link-rich footer supports browsing without visual clutter.

## North star

Keep the interface quiet and monochrome so product photography leads, reserving vivid green for the primary shopping action.

## Overview

The page uses a white canvas as the dominant field, with black navigation and footer bands anchoring the top and bottom of the long storefront. DysonFutura supplies a consistent, clean sans-serif voice: lightweight navigation and hero messaging sit alongside regular-weight headings and compact body copy. The layouts alternate between a full-bleed, two-column campaign hero, a horizontal category strip, editorial image cards, a four-column benefits and product area, and a three-column discovery feature. Product and lifestyle photography carries most of the colour; it is campaign content rather than a reason to expand the interface palette. A single measured green accent marks the main shopping CTA. Pale gray cards and thin gray borders separate content quietly, while ample white space and repeated left alignment keep the dense catalog legible. The footer reverses to black with subdued text and fine dividers.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation fields, campaign background, and white button surfaces. |
| Soft Graphite | `#555555` | `--color-soft-graphite` | semantic | Frequent muted copy, including supporting text and footer details. |
| Dyson Black | `#000000` | `--color-dyson-black` | brand | Inverse navigation and footer bands, dark text, and contrast against the green primary CTA. |
| Mist Gray | `#f8f8f8` | `--color-mist-gray` | surface | Subtle card and section fills that distinguish content without strong contrast. |
| Charcoal Text | `#333333` | `--color-charcoal-text` | semantic | Headings, links, badges, body copy, and text on light surfaces. |
| Quiet Gray | `#919191` | `--color-quiet-gray` | neutral | Low-emphasis supporting and footer text. |
| Fine Silver | `#ebebeb` | `--color-fine-silver` | neutral | Hairline borders around benefit buttons and separators in sections and footer. |
| Dyson Green | `#79b928` | `--color-dyson-green` | accent | Primary Shop now CTA; keep this bright green rare and action-specific. |
| Slate Gray | `#666666` | `--color-slate-gray` | neutral | Minor measured interface detail; not a defining brand surface or prominent text colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Dyson Black) · `--color-surface-2` → `#f8f8f8` (Mist Gray) · `--color-text` → `#333333` (Charcoal Text) · `--color-text-muted` → `#555555` (Soft Graphite) · `--color-text-subtle` → `#919191` (Quiet Gray) · `--color-border` → `#ebebeb` (Fine Silver) · `--color-accent` → `#79b928` (Dyson Green) · `--color-on-accent` → `#000000` (Dyson Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#000000` | 1.66:1 | fail |
| `#333333` | `#f8f8f8` | 11.9:1 | AAA |
| `#555555` | `#ffffff` | 7.46:1 | AAA |
| `#555555` | `#000000` | 2.82:1 | fail |
| `#555555` | `#f8f8f8` | 7.02:1 | AAA |
| `#919191` | `#ffffff` | 3.15:1 | AA-large |
| `#919191` | `#000000` | 6.66:1 | AA |
| `#919191` | `#f8f8f8` | 2.97:1 | fail |
| `#79b928` | `#ffffff` | 2.39:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DysonFutura | `--font-body` | webfont | 400, 500, 300 | Shared typeface for navigation, headings, body copy, links, captions, and buttons. | Jost |

- **DysonFutura:** Use clean geometric sans-serif forms, mostly regular weights, with lightweight navigation and hero copy; no tracked-out or uppercase-heavy styling.

### Type scale — Perfect Fourth (ratio ≈ 1.317, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 300 | 1.25 | 0 | — | DysonFutura | Primary campaign headline in the hero. |
| h2 | 24px | 400 | 1.33 | 0 | — | DysonFutura | Section headings and prominent campaign or product titles. |
| h3 | 18px | 400 | 1.5 | 0 | — | DysonFutura | Subheads for product, benefit, and editorial card content. |
| body | 14px | 400 | 1.43 | 0 | — | DysonFutura | Product descriptions, benefit details, and supporting copy. |
| caption | 12px | 300 | normal | 0 | — | DysonFutura | Compact labels, footnotes, and low-priority metadata. |
| button | 14px | 400 | 1.43 | 0 | — | DysonFutura | Shopping actions and benefit controls. |
| nav | 16px | 300 | 1.5 | 0 | — | DysonFutura | Primary and utility navigation links. |
| link | 18px | 400 | 1.5 | 0 | — | DysonFutura | Editorial calls to action and category or product links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 8, 10, 12, 15, 16, 17, 20, 24, 32 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1296px.

Use a centered, responsive storefront with measured maximum content width of 1296px. Keep the hero full-bleed in its media while placing copy to the left; follow it with a horizontal category row and editorial content. Build later catalog and benefits areas on compact multi-column grids, then use a three-column discovery row. Maintain comfortable density and a measured 48px section rhythm, with consistent left alignment and short element gaps. Finish with legal copy and a wide, multi-column footer.

## Shape & elevation

- Radius: button `4px` · card `8px` · media `8px` · badge `4px` · nav `4px` · xs `4px` · sm `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.68, 0.03, 0.26, 1.02)` on interactive elements.

The interface is mostly flat: no measured shadows or gradients. Use white space and pale gray card fills to establish grouping, with thin #ebebeb borders on selected controls and footer divisions. Cards and media have softly rounded corners; dark navigation and footer bands provide the main depth through contrast rather than elevation.

## Imagery

Use polished product and lifestyle photography as the main source of visual colour. The opening campaign is a large image-led split composition, while category tiles use isolated product images and lower sections mix product cutouts with domestic scenes. Keep images crisp and generously framed; avoid adding decorative illustration or overlays that compete with the products.

## Components

### Dual-band navigation

Stack two black navigation rows: utility links above category links, search, and bag. Use small, restrained light text and keep the bands visually compact.

### Campaign hero

Full-width, image-led two-column hero with left-aligned headline, brief benefit copy, and a prominent green Shop now button.

### Category tiles

Horizontal row of image cards with product imagery and short category labels, enabling quick entry to major product families.

### Editorial feature cards

Large campaign imagery paired with concise product or seasonal copy and simple text links; favor white backgrounds and rounded media.

### Shopping benefit strip

Four-column row presenting financing, shipping, warranty, and returns with compact icons, short labels, and fine borders.

### Product cards

Catalog cards use a light gray surface, product image, small badge where relevant, concise title, and price.

### Dark link footer

Black footer with several columns of subdued links, small group headings, and fine dividers.

### Measured component styles

- **Primary button** (“Shop now”): background #79b928 · text #000000 · radius 4px · padding 20px 24px · 500 18px DysonFutura
- **Secondary button** (“Free shipping On orders of $50 or more”): background #ffffff · text #000000 · border 1px solid #ebebeb · radius 4px · padding 16px · 400 16px DysonFutura
- **Link** (“Oral care”): transparent background · text #333333 · radius 0px · padding 0px · 400 16px DysonFutura
- **Input**: transparent background · text #333333 · radius 0px · padding 0px 0px 0px 10px · 300 12px DysonFutura
- **Card**: background #f8f8f8 · text #333333 · radius 8px · padding 0px · 400 16px DysonFutura
- **Badge** (“Latest technology”): transparent background · text #333333 · border 1px solid #333333 · radius 4px · padding 2px 8px · 500 14px DysonFutura
- **Navigation item** (“Dyson Certified Refurbished Find a store”): background #000000 · text #999999 · radius 0px · padding 0px · 400 16px DysonFutura

## Do

- Keep the main canvas white and the global navigation black.
- Reserve Dyson Green #79b928 for the primary shopping action.
- Let product and lifestyle photography provide the page’s richer colour.
- Use DysonFutura or a close geometric sans-serif substitute throughout.
- Separate catalog content with pale gray fills and subtle hairlines.
- Preserve clear left alignment and comfortable whitespace between sections.

## Don't

- Do not add gradients or decorative shadows.
- Do not use the green accent broadly across cards or navigation.
- Do not compete with product imagery using extra visual decoration.
- Do not replace the restrained interface with saturated section backgrounds.
- Do not make every link look like a filled button.
- Do not compress section content into a dense, uninterrupted grid.

## Agent prompt

Build a new Dyson-style storefront page with a restrained, image-led visual system. Use Gallery White (#ffffff) as the canvas, Dyson Black (#000000) for the stacked navigation and footer, Charcoal Text (#333333) for headings and links, and Soft Graphite (#555555) for supporting copy. Reserve Dyson Green (#79b928) for one primary shopping CTA. Use DysonFutura or Jost throughout, with light navigation, clean regular-weight headings, and compact body text. Structure the page with a campaign hero, category image row, editorial features, compact benefit strip, product grid, and dark multi-column footer. Keep content aligned within a measured 1296px maximum width, use generous section separation, pale Mist Gray (#f8f8f8) card fills, and Fine Silver (#ebebeb) hairlines. Avoid gradients and shadows; let crisp product photography supply colour and atmosphere.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed media with left-aligned campaign copy and CTA in a two-column composition. | Primary shopping CTA, Campaign video, Video transcript link | Large lifestyle image, Light headline, Green CTA |
| 2 | category-nav | Horizontal strip of evenly arranged product-category image tiles. | Quick category entry, Image-led browsing | Product thumbnails, Short category labels, White background |
| 3 | content-feed | Left-aligned section heading above two side-by-side editorial image features. | Campaign discovery, Text-link shopping | Large rounded images, Short descriptions, Arrow links |
| 4 | product-grid | Compact four-column benefits row followed by a four-column featured product grid. | Compare purchase benefits, Browse featured products | Small benefit icons, Thin borders, Product badges, Light gray cards |
| 5 | recommendations | Three-column editorial recommendation grid with large images and copy beneath. | Explore related products, Follow shopping links | Rounded campaign media, Product descriptions, Arrow links |
| 6 | other | Single-column legal and safety notice in a shallow white section. | Counterfeit warning, Learn-more links | Compact fine print, Inline links, White background |
| 7 | footer | Wide black footer with multiple columns of grouped links and lower divider. | Browse by topic, Account access, Business resources | Dark surface, Muted link text, Fine dividers |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/dyson-com