디자인 시스템 갤러리 Dyson

Dyson

기능을 색으로 드러내는 노출형 엔지니어링과 환형 제품 실루엣

서양라이프스타일소비자차가운modern-minimalbrutalism고딕comfortablesharplayered라이트한글 지원출시 1991개정 2024

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

  • 브랜드명: Dyson
  • 한 줄 정체성: 청소기/헤어드라이어를 재발명한 영국 엔지니어링 가전 회사
  • 공식 디자인 철학: "Engineering for the better — bold engineering colors, exposed mechanism"
  • 시그니처 요소 1개: 기능 부위를 선명한 색으로 드러내는 노출형 엔지니어링과 환형 제품 실루엣

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 엔지니어링, 프리미엄, 컬러풀
  • 무드 설명: 밝은 중성 캔버스 위에 제품의 정밀한 실루엣과 노출된 메커니즘을 크게 보여준다. 노랑과 마젠타는 장식보다 기능 부위와 기술 포인트를 구분하는 색으로 사용한다.
  • 비주얼 스타일: 모던 미니멀 + 살짝 브루털리즘
  • 밀도(Density): Comfortable
  • 모서리 성향: Sharp (0~2px)
  • 평면성: Layered (그라데이션)

Color System

컬러 시스템 (CSS 변수)

:root {
  --color-primary-50: #FFF7CC; --color-primary-100: #FFEC85;
  --color-primary-200: #FFE254; --color-primary-300: #FFDB30;
  --color-primary-400: #FFD20E; --color-primary-500: #FFC700;
  --color-primary-600: #E5B900; --color-primary-700: #B89400;
  --color-primary-800: #8C7000; --color-primary-900: #5C4900;

  --color-secondary-500: #FF3478;     /* Dyson Magenta */

  --color-neutral-0: #FFFFFF; --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5; --color-neutral-200: #F0F0F0;
  --color-neutral-300: #E0E0E0; --color-neutral-500: #C7C7C7;
  --color-neutral-700: #888888; --color-neutral-800: #555555;
  --color-neutral-900: #191919; --color-neutral-1000: #000000;

  --color-success-bg: #DCF7E5; --color-success-fg: #1AAD5C;
  --color-warning-bg: #FFF7CC; --color-warning-fg: #B89400;
  --color-error-bg: #FFE5E5; --color-error-fg: #FF3838;
  --color-info-bg: #E0F0FE; --color-info-fg: #2563EB;

  --bg-base: #FFFFFF; --bg-subtle: #F5F5F5;
  --bg-elevated: #FFFFFF; --bg-overlay: rgba(0,0,0,0.50);

  --text-primary: #191919; --text-secondary: #555;
  --text-tertiary: #888; --text-on-primary: #191919;
  --text-disabled: #C7C7C7;

  --border-default: #E0E0E0; --border-subtle: #F0F0F0;
  --border-strong: #C7C7C7; --border-focus: #191919;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문: Dyson Futura (자체) — 폴백 Futura, "Helvetica Neue"
    • 한글: Pretendard (OFL) / Apple SD Gothic Neo
  • 위계:
    • Display: 64px / 900 / 1.05 / -0.025em
    • H1: 36px / 900 / 1.15 / -0.02em
    • H2: 22px / 700 / 1.27 / -0.015em
    • H3: 14px / 800 / 1.3 / 0.04em (uppercase)
    • Body Large: 14px / 500 / 1.5 / 0
    • Body: 13px / 500 / 1.5 / 0
    • Caption: 11px / 800 / 1.27 / 0.04em (uppercase)

Spacing

스페이싱

  • Base unit: 4px
  • Container: max-width 1200px, 좌우 패딩 24px
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

Border Radius

Border Radius

:root {
  --radius-none: 0; --radius-sm: 0; --radius-md: 0;
  --radius-lg: 2px; --radius-xl: 4px; --radius-full: 9999px;
}

Shadow / Elevation

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);   /* 구분선이 없는 소형 카드 */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);  /* 카드 hover */
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);  /* 드롭다운·모달 */
  --shadow-xl: 0 16px 32px rgba(255,199,0,0.30); /* 기술 포인트 강조 */
}

Iconography

Iconography

  • Outline (정밀), 1.5px, Square + Round
  • Lucide / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { font: 800 12px/1 'Dyson Futura',Futura,'Helvetica Neue',sans-serif; letter-spacing:0.04em; text-transform: uppercase; border-radius: 0; padding: 12px 22px; border: 0; cursor: pointer; }
.btn-primary { background: #191919; color: #fff; }
.btn-secondary { background: #fff; color: #191919; border: 1px solid #191919; }
.btn-yellow { background: #FFC700; color: #191919; }
.btn-ghost { background: transparent; color: #191919; }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input

.input { background: #fff; border: 1px solid #C7C7C7; border-radius: 0; padding: 12px 14px; font-size: 14px; font-family: inherit; }
.input:focus { outline: none; border-color: #191919; }

Card (Product)

.product .img { aspect-ratio: 5/3; background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500)); }
.product h3 { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; margin: 12px 0 4px; }
.product .label { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.card { background: #fff; border: 1px solid #E0E0E0; border-radius: 0; padding: 16px; }

Badge / Spec strip

.tag { padding: 2px 8px; border-radius: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.tag-solid { background: #191919; color: #fff; }
.tag-subtle { background: #F5F5F5; color: #191919; }
.tag-outline { border: 1px solid #191919; color: #191919; background: transparent; }
.tag-yellow { background: #FFC700; color: #191919; }
.spec-strip { background: #191919; color: #fff; padding: 14px; display: flex; justify-content: space-around; text-align: center; }
.spec-strip .num { font-size: 22px; font-weight: 900; }
.spec-strip .label { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #A0A0A0; margin-top: 4px; }

Navigation

.topnav { padding: 14px 18px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #E0E0E0; }
.topnav .brand { font-weight: 900; font-size: 22px; letter-spacing: -0.025em; color: #191919; }

Motion

Motion

:root {
  --duration-fast: 100ms; --duration-base: 250ms; --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

Anti-patterns

Anti-patterns

1. brand yellow + magenta 그라데이션 색 순서를 임의 변경 금지 2. 라운드(>4px) 적용 금지 — sharp 시그니처 3. 마케팅 페이지에 sans-serif가 아닌 폰트 사용 금지 — Futura 베이스 시그니처 4. 'dyson' 워드마크를 대문자로 변경 금지 — 소문자가 표준 5. 본문 weight 400 이하 금지 — 500+ 굵기

Sources

출처

  1. https://www.dyson.com/
  2. https://www.dyson.co.kr/