Signal Blue
#0066ccAnnouncement bar background, price text, inline links, the brand's only chromatic interface surface — carries informational weight across the site
Dyson
dyson.comWebsite preview
The design language
Dyson treats its products as museum objects on a warm cream canvas (#fff8e6) rather than items on a clinical white grid. The interface is overwhelmingly monochrome — charcoal text (#333333), white product cards, hairline dividers (#ebebeb) — with chromatic color appearing only as functional punctuation: a green (#79b928) for the occasional filled promotional button, a vivid blue (#0066cc) for announcement bars and price text, and a single warm brown (#ac5d00) reserved for new-product labels. A solid black header bar anchors every page like a gallery lintel, and content sections breathe through generous vertical rhythm rather than tight stacking. Typography is geometric and precise (DysonFutura, a custom Futura derivative), preferring weight 300 for headlines so engineering speaks quietly. Corners stay sharp — 2px on controls, 8px on imagery — and shadows are entirely absent; surfaces layer through flat planes and 1px rules, producing the vitrine-like effect of objects placed on paper rather than stacked in 3D space.
Color palette
brand
Link Blue
#149eccBlue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
accent
Promotional Green
#79b928Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Ember Brown
#ac5d00Orange supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
neutral
Cream Canvas
#fff8e6Page background, hero and section canvas — the warm off-white that replaces pure white and gives the interface its gallery-mat quality
Paper White
#ffffffProduct card surfaces, input fields, secondary navigation bar — the brighter white that sits on top of the cream canvas
Charcoal Ink
#333333Primary text, headings, product names, body copy — the dominant text color across the entire interface
Graphite Body
#555555Secondary body text, descriptions, paragraph copy — a softer dark gray for long-form reading
Silver Mute
#999999Tertiary text, helper labels, placeholder text, muted icons
Border Gray
#ebebebHairline dividers, input borders, card separators, section rules — the 1px line that defines structure without weight
Rule Gray
#dadadaSlightly stronger borders for emphasis, secondary hairline dividers
Lintel Black
#000000Top header bar background, dark surface anchor — the solid black band that frames every page
Typography
Type scale
Major Second (1.125) · 16px basedisplay
36px · 300 · 1.22The quick brown fox jumps
heading-lg
32px · 300 · 1.25The quick brown fox jumps
heading
28px · 300 · 1.3The quick brown fox jumps
heading-sm
24px · 500 · 1.33The quick brown fox jumps
subheading
18px · 400 · 1.44The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
body-sm
14px · 400 · 1.56The quick brown fox jumps
caption
12px · 300 · 1.67The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
DysonFutura
- Weights
- 300, 400, 500
- Sizes
- 12px, 14px, 16px, 18px, 24px, 28px, 32px, 36px
- Line height
- 1.22, 1.25, 1.30, 1.33, 1.44, 1.50, 1.56, 1.67
- Fallback
- Futura PT (closest commercial match), Avenir Next, Jost
Sole typeface across the entire interface. Weight 300 for display and headings — the whisper-weight is a signature anti-convention choice; most premium brands push to 600-700 for authority, Dyson lets engineering speak quietly. Weight 400 for body, product names, and UI labels. Weight 500 reserved for button text and emphasis. The geometric Futura skeleton (perfect circles, monoline strokes) reinforces the precision-instrument brand identity.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 48-64px
- Card padding
- 16-24px
- Element gap
- 8-16px
Border radius
cards
0pxbadges
2pximages
8pxinputs
2pxbuttons
2pxSpacing scale
1px2px3px4px6px8px10px11px12px15px16px20px24px27px28px32px40px44px48px71px78px89pxGuidelines
Do
- Use #fff8e6 cream as the page canvas — never pure white as the base surface; the warm offset is the system's signature.
- Use DysonFutura weight 300 for all headlines and display text — the whisper-weight is a deliberate anti-convention choice.
- Keep button and badge corner radii at exactly 2px — the near-sharp corners reinforce the precision-engineering brand.
- Separate surfaces with 1px #ebebeb hairlines, not drop shadows — the design uses flat color planes, not elevation.
- Use #79b928 exclusively for filled promotional buttons, paired with white text and 2px radius.
- Anchor every page with a solid #000000 header bar — the black lintel is the structural constant across all screens.
- Use #0066cc for announcement bars, price values, and inline links — the only chromatic surface treatments in the system.
Don’t
- Don't use #ffffff as the page background — always the warm cream canvas (#fff8e6); pure white kills the gallery-mat effect.
- Don't apply drop shadows to cards, images, or buttons — surfaces stay flat; structure comes from color contrast and hairlines.
- Don't introduce a third accent color beyond blue (#0066cc) and green (#79b928) — the system is at 1% colorfulness by design.
- Don't use border-radius above 8px on any element — buttons stay at 2px, images at 8px, nothing rounder.
- Don't use font weights above 500 — the type system tops out at medium; heaviness would break the geometric lightness.
- Don't place gradient backgrounds, tinted overlays, or decorative color washes on any surface — the palette is purely flat.
- Don't use color to indicate active or selected navigation states — the system relies on spatial position, not chromatic feedback.
Components
Black Lintel Header
Primary navigation bar anchoring every pageFull-bleed #000000 background, 48-56px height. Left: white 'dyson' wordmark in DysonFutura 16px weight 500. Right: utility links (Iniciar sesión, Iniciar sesión icon) in #ffffff DysonFutura 12-14px. Secondary row below: white #ffffff background with category links in #333333 at 14px, separated by 12-16px gaps, with a search input (white bg, 1px #ebebeb border, 2px radius) and a cart icon on the right.
Blue Announcement Bar
Promotional strip below the headerFull-bleed #0066cc background, 40-48px height. Centered text in #ffffff DysonFutura 14px weight 400, with an inline text link also in white. Sits between the black header and the cream content area as a strong horizontal color band.
Editorial Hero Split
First-screen hero sectionCream #fff8e6 canvas. Left column: headline in DysonFutura 36px weight 300, #333333, with subtext at 18px weight 400, #555555, and a filled green button below. Right column: 3-column × 2-row image grid with 8px gap between tiles, each image at 8px radius. The split ratio is approximately 1:2 (text : images).
Filled Green Promotional Button
Primary promotional action button#79b928 background, #ffffff text in DysonFutura 14px weight 500, 2px border-radius, 12px vertical / 24px horizontal padding. No border, no shadow. The single chromatic button in the system — used sparingly for seasonal campaigns and product discovery actions.
Product Card
Individual product display in grids and lists#ffffff background, no border, no shadow. Product image at top on white or light pastel background with 8px radius. Below: 'NUEVO' label in #ac5d00 at 12px uppercase DysonFutura, product name at 16px weight 400 #333333, price at 18px weight 400 in #0066cc, and a full-width filled green button at the bottom (#79b928, white text, 2px radius, 12px 16px padding).
'NUEVO' New Badge
Novelty indicator on new productsText-only label in #ac5d00, DysonFutura 12px weight 500, uppercase tracking. No background fill, no border, no padding — the color alone communicates 'new'.
Price Display
Product pricing in cards and detail views#0066cc text, DysonFutura 18px weight 400. The only inline text that uses the brand blue — price is the most important data point and gets the color signal.
Search Input
Product and content search#ffffff background, 1px #ebebeb border, 2px radius. DysonFutura 14px, placeholder text in #999999. 10px 12px padding. Magnifying glass icon in #333333 on the left. Rounded pill shape not used — stays sharp-cornered to match the system's minimal radii.
Hairline Divider
Section separator within content areas1px height, #ebebeb or #dadada color, full-width within the content container. No margin — sits flush between content blocks. Replaces shadows as the structural separator.
Category Navigation Row
Product category links in the secondary headerHorizontal list of category names (Cuidado del cabello, Cuidado del aire, etc.) in DysonFutura 14px weight 400, #333333, separated by 12-16px gaps. No active state indicator (no underline, no color change) — the minimalist approach trusts the user to know where they are.
Text Link / Inline Link
Navigational and contextual links within body text#0066cc color, no underline at rest. DysonFutura inherits the surrounding text size. Hover state shifts to #149ecc. Used for 'Ver todos los ofertas' and similar inline navigation.
Surfaces & elevation
Level 0
Cream Canvas
#fff8e6Page-wide background, hero and content section canvas
Level 1
Paper White
#ffffffProduct cards, input fields, secondary nav bar — elevated above the cream base
Level 2
Frost Gray
#f8f8f8Subtle alternating section background, disabled surface tone
Level 3
Lintel Black
#000000Header bar, dark structural anchor
The design deliberately eliminates drop shadows. Surfaces are separated by flat color contrast (cream canvas → white card) and 1px hairline dividers (#ebebeb), not by elevation. This creates a gallery-vitrine effect where products and content rest on paper-like planes rather than floating in 3D space — the visual logic of a museum display case, not a software UI.
Layout & imagery
Layout
The page uses a max-width centered content area (~1200px) on a full-bleed cream (#fff8e6) canvas. The hero follows a split pattern: left third holds the headline, subtext, and promotional button; right two-thirds hold a 3-column image grid. Below the hero, sections alternate between cream and white backgrounds with 48-64px vertical gaps, using 2-column text+image layouts and 3-column product card grids. The navigation is a two-tier system: a solid black utility bar on top (account, location, links) and a white category bar below (product categories, search, cart). Content density is spacious and editorial — generous whitespace between elements, no information-dense blocks. Section dividers are 1px hairlines (#ebebeb), not colored bands or shadows.
Imagery
Photography is the dominant visual content. Dyson uses high-end editorial photography — tight product crops on pure white backgrounds, and lifestyle portraits of models against soft pastel and neutral backdrops (dusty pink, sage, cream). The hero section is a 3×2 grid mixing lifestyle portraits with product detail shots, creating a magazine-editorial rhythm. Product card images are isolated on white — no lifestyle context, the object is the hero. There are no illustrations, no 3D renders, no abstract graphics. Icons are minimal and line-based, rendered in #333333 at 16-20px. Photography occupies roughly 50% of the hero viewport and is contained within rounded tiles (8px radius) rather than full-bleed. The treatment is consistently high-key, bright, and premium — no dark or moody photography.
Design notes
Agent Guide
## Quick Color Reference - text: #333333 - background: #fff8e6 - border: #ebebeb - accent: #0066cc - promotional button: #79b928 - primary action: no distinct CTA color ## Example Component Prompts 1. **Hero section**: Cream #fff8e6 canvas. Headline at 36px DysonFutura weight 300, #333333, line-height 1.22. Subtext at 18px weight 400, #555555. A filled green button at 14px weight 500: #79b928 background, white text, 2px radius, 12px 24px padding. A 3×2 image grid to the right with 8px gap and 8px image radius. 2. **Product card**: #ffffff background, no border, no shadow. Product image at top (8px radius, white or pastel background). 'NUEVO' label in #ac5d00, 12px uppercase DysonFutura. Product name at 16px weight 400, #333333. Price at 18px weight 400, #0066cc. Full-width filled green button: #79b928 background, white text, 2px radius, 12px 16px padding. 3. **Navigation header**: #000000 background, full-width, 48-56px height. White 'dyson' wordmark left in DysonFutura 16px weight 500. Utility links right in #ffffff at 12-14px. Secondary row below on #ffffff with #333333 category links at 14px, 12-16px gap. Search input: white bg, 1px #ebebeb border, 2px radius, DysonFutura 14px, #999999 placeholder. 4. **Announcement bar**: Full-bleed #0066cc background, 40-48px height. Centered text in #ffffff DysonFutura 14px weight 400 with an inline white text link. Sits between the black header and the cream content area. 5. **Content section**: #fff8e6 cream background, max-width 1200px centered. Section heading at 28px DysonFutura weight 300, #333333. 1px #ebebeb hairline divider below. Two-column layout with 48px gap, text left at 16px weight 400 #555555, product image right with 8px radius.
Similar brands
Apple
Same product-as-hero photography on neutral backgrounds, extreme color restraint, and flat surfaces without shadows
Bang & Olufsen
Warm neutral canvas with premium electronics, editorial product presentation, and near-monochrome interfaces punctuated by a single accent
Braun
Geometric Futura-derived typography at light weights, engineering-heritage minimalism, and near-zero corner radii on controls
Vitra
Design-brand editorial product grids, generous whitespace, and the museum-vitrine approach to product presentation
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
