---
name: Dyson
description: "Exemplary premium hardware e-commerce design that balances dramatic product presentation with clinical information hierarchy."
version: alpha

colors:
  background: "#ffffff"
  primary: "#333333"
  secondary: "#999999"
  tertiary: "#0066cc"
  neutral: "#919191"
  bg-soft: "#f5f5f5"
  bg-quiet: "#fcfcfc"
  line: "rgba(51, 51, 51, 1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-0.5px"
  heading-lg:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "-0.3px"
  heading-md:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A premium hardware e-commerce site that showcases engineering innovation through clean typography and dramatic product photography.

*High-end hardware showroom with clinical precision*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#999999`)** — uses `ink-soft` token
- **Accent (`#0066cc`)** — uses `accent` token
- **Muted (`#919191`)** — uses `muted` token
- **Borders (`rgba(51, 51, 51, 1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 8px base rhythm with generous vertical padding for sections

## Elevation & Depth

- 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

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Solid filled buttons with minimal radius, uppercase text, dark backgrounds on light
- **card:** Clean cards with product imagery, minimal borders, generous whitespace
- **chip:** Minimal inline labels with subtle borders
- **input:** Clean text inputs with bottom borders, search icon integrated
- **hero:** Full-bleed product photography with light text overlay on dark or dramatic imagery

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```