디자인 시스템 갤러리 Amazon

Amazon

스마일 오렌지 + 네이비 헤더 + 정보 밀집 상품 그리드

서양이커머스소비자따뜻한modern-minimal고딕compactsharpflat라이트공식한글 지원출시 1995개정 2023

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

Brand DNA

브랜드 DNA

  • 브랜드명: Amazon (Amazon.com, Inc.)
  • 한 줄 정체성: 1995년 시작한 세계 최대 이커머스 — A부터 Z까지 모두 판매하는 종합 마켓플레이스
  • 공식 디자인 철학: "Earth's most customer-centric company" — 검색·정보·가격 우선
  • 시그니처 요소 1개: Amazon 오렌지(#FF9900) 스마일 화살표 로고 + 네이비 헤더(#131A22) + 흰 캔버스. 가격 표시는 큰 정수 + 작은 센트의 split-price가 시그니처

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 신뢰, 정보밀집, 즉시
  • 무드 설명: 한 화면에 최대한 많은 상품·정보를 노출하는 compact 그리드. 헤더 네이비 + 오렌지 액센트(별점/CTA/Prime), 본문 흰색. 모서리는 거의 sharp(0~4px), 보더도 거의 없음.
  • 비주얼 스타일: 모던 미니멀 (정보 밀집 톤)
  • 밀도(Density): Compact — 패딩 6~10px
  • 모서리 성향: Sharp (0~4px)
  • 평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Amazon Orange */
  --color-primary-50:  #FFF4E0;
  --color-primary-100: #FFE2A8;
  --color-primary-200: #FFCD66;
  --color-primary-300: #FFB429;
  --color-primary-400: #FFA61C;
  --color-primary-500: #FF9900;   /* Amazon Orange */
  --color-primary-600: #E88B00;
  --color-primary-700: #C7770C;
  --color-primary-800: #985E0A;
  --color-primary-900: #6B4307;

  /* Secondary - Amazon Navy */
  --color-secondary-500: #131A22;       /* Top header */
  --color-secondary-400: #232F3E;       /* Sub header */

  /* Tertiary - Action Yellow (CTA) */
  --color-cta-500: #FFD814;            /* "Add to Cart" 노랑 */
  --color-cta-600: #FCD200;
  --color-cta-buy: #FFA41C;            /* "Buy Now" 주황 */

  /* Link */
  --color-link: #007185;
  --color-link-hover: #C7511F;

  /* Star/Rating */
  --color-star: #DE7921;
  --color-star-bg: #F5F5F5;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F0F2F2;
  --color-neutral-200:  #D5D9D9;        /* border */
  --color-neutral-300:  #B3B7B7;
  --color-neutral-500:  #888C8C;
  --color-neutral-700:  #565959;        /* text secondary */
  --color-neutral-800:  #333333;
  --color-neutral-900:  #0F1111;        /* text primary */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E1F2EC;
  --color-success-fg: #067D62;
  --color-warning-bg: #FEF6E0;
  --color-warning-fg: #B12704;
  --color-error-bg:   #FEF1F1;
  --color-error-fg:   #B12704;          /* 가격 할인 */
  --color-info-bg:    #E7F4FF;
  --color-info-fg:    #007185;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #FAFAFA;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(15,17,17,0.55);

  /* Text */
  --text-primary:    #0F1111;
  --text-secondary:  #333333;
  --text-tertiary:   #565959;
  --text-on-primary: #0F1111;
  --text-disabled:   #888C8C;
  --text-price:      #0F1111;
  --text-deal:       #B12704;           /* 가격 할인 빨강 */

  /* Border */
  --border-default: #D5D9D9;
  --border-subtle:  #F0F2F2;
  --border-strong:  #888C8C;
  --border-focus:   #C45500;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문: Amazon Ember (자체) → Helvetica Neue / Arial 폴백
    • 한글: Amazon Ember Korean / Noto Sans KR 폴백
    • 가격: tabular-nums + split-price 구조
  • 위계:
    • Display: 36px / 700 / 1.2 / -0.02em (랜딩 hero만)
    • H1 (상품 상세 제목): 24px / 500 / 1.3 / 0
    • H2: 18px / 700 / 1.3 / 0
    • H3 (상품 카드 제목): 14px / 400 / 1.4 / 0
    • Body Large: 14px / 400 / 1.5 / 0
    • Body: 13px / 400 / 1.45 / 0
    • Body Small: 12px / 400 / 1.4 / 0
    • Price Whole: 21px / 700 / 1 / -0.005em tabular-nums
    • Price Fraction: 13px / 700 / 1 / 0 tabular-nums
    • Caption: 11px / 400 / 1.4 / 0
    • Star Count: 13px / 400 / 1 color #007185

Spacing

스페이싱

  • Base unit: 4px
  • 토큰: ``css --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-2xl: 24px; --space-3xl: 32px; ``
  • Container: max-width 480px (모바일), 1500px (웹), 좌우 패딩 8px / 16px

Border Radius

Border Radius

--radius-none: 0;       /* 카드, 이미지 */
--radius-sm: 3px;       /* 헤더 검색바, 버튼 */
--radius-md: 6px;
--radius-lg: 8px;
--radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 12px 24px rgba(0,0,0,0.14);

Iconography

Iconography

  • 스타일: Amazon UI Icons (Filled, 작음)
  • Stroke 굵기: N/A (Filled)
  • 모서리 처리: Square
  • 추천 라이브러리: Amazon Style Library / Material Symbols (Filled)

Component Guide

컴포넌트 가이드

Button

.btn { font: 400 13px/1.4 'Amazon Ember', Arial, sans-serif; letter-spacing: 0;
       border-radius: 3px; padding: 8px 12px; border: 1px solid;
       display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       cursor: pointer; }
.btn-cart { background: var(--color-cta-500); color: var(--text-primary); border-color: #FCD200; }
.btn-cart:hover { background: var(--color-cta-600); }
.btn-buy  { background: var(--color-cta-buy); color: var(--text-primary); border-color: #FF8F00; }
.btn-buy:hover { background: #FF8F00; }
.btn-secondary { background: linear-gradient(180deg, #F7F8FA 0%, #E7E9EC 100%); color: var(--text-primary); border-color: #ADB1B8 #A2A6AC #8D9096; }
.btn-secondary:hover { background: linear-gradient(180deg, #F0F2F2 0%, #DDDFE3 100%); }

Input (Search)

.search-bar { background: #fff; border-radius: 4px; display: flex; overflow: hidden; }
.search-bar .cat { background: #F3F3F3; color: var(--text-primary); padding: 8px 10px; font: 400 12px/1.4 inherit; border-right: 1px solid var(--border-default); }
.search-bar input { all: unset; flex: 1; padding: 8px 12px; font: 400 14px/1.4 inherit; color: var(--text-primary); }
.search-bar .submit { background: var(--color-primary-500); padding: 0 14px; display: grid; place-items: center; font-size: 16px; color: var(--text-primary); }
.search-bar .submit:hover { background: var(--color-primary-400); }

Card (Product)

.prod { background: #fff; padding: 6px; }
.prod .img { aspect-ratio: 1; background: var(--bg-subtle); position: relative; overflow: hidden; }
.prod .img .badge { position: absolute; top: 4px; left: 0; background: var(--color-error-fg); color: #fff; font: 700 11px/1 inherit; padding: 4px 8px; border-radius: 0 3px 3px 0; }
.prod .name { font: 400 13px/1.4 inherit; color: var(--color-link); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.prod .name:hover { color: var(--color-link-hover); text-decoration: underline; }
.prod .stars { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--color-star); font: 400 12px/1 inherit; }
.prod .stars .count { color: var(--color-link); font-size: 13px; }
.prod .price { display: flex; align-items: baseline; gap: 2px; margin-top: 2px; color: var(--text-price); }
.prod .price .sup { font: 400 10px/1.2 inherit; color: var(--text-tertiary); }
.prod .price .whole { font: 700 21px/1 inherit; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.prod .price .frac { font: 700 11px/1 inherit; }
.prod .price .was { font: 400 12px/1 inherit; color: var(--text-tertiary); text-decoration: line-through; margin-left: 6px; }
.prod .deal { color: var(--text-deal); font: 700 12px/1.4 inherit; }
.prod .prime { font: 700 11px/1.4 inherit; color: #00A8E1; margin-top: 4px; }

Badge / Tag

.tag { padding: 2px 6px; font: 700 11px/1 inherit; }
.tag-deal      { background: var(--color-error-fg); color: #fff; }
.tag-bestseller { background: #FFD814; color: var(--text-primary); }
.tag-prime     { background: transparent; color: #00A8E1; font-weight: 700; }
.tag-amazons-choice { background: #131A22; color: var(--color-primary-500); padding: 3px 8px; font: 700 12px/1.3 inherit; border-radius: 0; }

Navigation (Header)

.navbar { background: var(--color-secondary-500); color: #fff; padding: 6px 10px; display: flex; align-items: center; gap: 10px; }
.navbar .logo { font: 700 22px/1 inherit; letter-spacing: -0.025em; }
.navbar .logo .smile { color: var(--color-primary-500); }
.subnav { background: var(--color-secondary-400); color: #fff; padding: 6px 10px; display: flex; align-items: center; gap: 12px; font: 700 13px/1.4 inherit; overflow-x: auto; }
.subnav .item { color: #ddd; cursor: pointer; }
.subnav .item:hover { color: #fff; border: 1px solid #fff; padding: 2px 6px; margin: -2px -6px; }

Motion

Motion

--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.33, 0, 0.67, 1);

Anti-patterns

Anti-patterns

1. CTA(Add to Cart / Buy Now)에 오렌지 외 색상 사용 금지 — 노랑(#FFD814) + 오렌지(#FFA41C) 짝이 표준 2. 카드 모서리 8px 이상 라운드 금지 — sharp 0~3px이 정보 밀집 그리드 시그니처 3. 가격을 단일 폰트로 처리 금지 — split price ($21 ⁰⁰) 구조 유지 4. 한 화면 정보량을 줄이기 위한 큰 패딩 사용 금지 — Compact 그리드가 Amazon 정체성 5. 헤더 그라데이션 금지 — 네이비 단색 #131A22가 표준

Sources

출처

  1. https://www.amazon.com/