Walmart

True Blue 캔버스 위 Spark Yellow와 둥근 쇼핑 액션이 만드는 Everyday Low Price 경험

서양이커머스소비자차가운modern-minimal고딕comfortablepillsubtle라이트공식한글 지원출시 2025개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Walmart
한 줄 정체성: 매장·픽업·배송을 하나로 잇는 미국 대표 옴니채널 리테일러 — Every Day Low Price
공식 디자인 철학: "Save money. Live better." — 친근하고 저렴한 모두를 위한 마켓
시그니처 요소 1개: True Blue(#0053E2) 위에서 방사하는 Spark Yellow(#FFC220). 유기적인 6개 Sparklet과 둥근 검색·구매 액션이 낙관적인 쇼핑 경험을 만든다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 낙관적, 친근한, 실용적
무드 설명: 넉넉한 White 바탕에 True Blue를 큰 면과 핵심 액션으로 쓰고 Spark Yellow로 에너지를 더한다. Bentonville Blue 본문, 부드러운 블루 계층, 완전히 둥근 버튼이 가격·픽업·배송 정보를 명료하고 친근하게 정리한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 다양한 상품과 주문 정보를 숨기지 않되 충분한 여백으로 탐색 부담을 낮춘다.
모서리 성향: Pill(999px) — 검색·CTA·가격 레이블의 대표 형태, 카드에는 Round 12~16px 적용
평면성: Subtle — 얕은 보더와 제한적인 그림자로 위계만 구분

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - True Blue, 2025 브랜드 리프레시 */
  --color-primary-50:  #E6EEFC;
  --color-primary-100: #C9D9FA;
  --color-primary-200: #9FBCF5;
  --color-primary-300: #709AF0;
  --color-primary-400: #3975EA;
  --color-primary-500: #0053E2;   /* True Blue, 핵심 브랜드 면·액션 */
  --color-primary-600: #0046C2;
  --color-primary-700: #00389C;
  --color-primary-800: #002A75;
  --color-primary-900: #001E60;   /* Bentonville Blue, 타이포그래피 */

  /* Secondary & accent blues */
  --color-secondary-500: #FFC220;
  --color-sky-blue: #A9DDF7;
  --color-everyday-blue: #4DBDF5;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7FAFD;
  --color-neutral-100:  #EAF1F8;
  --color-neutral-200:  #D6E4F5;
  --color-neutral-300:  #B8C7D9;
  --color-neutral-500:  #66758A;
  --color-neutral-700:  #405065;
  --color-neutral-800:  #333333;
  --color-neutral-900:  #001E60;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E8F5E9;
  --color-success-fg: #1B6E3C;
  --color-warning-bg: #FFF6D6;
  --color-warning-fg: #735800;
  --color-error-bg:   #FDE8E7;
  --color-error-fg:   #C5221F;
  --color-info-bg:    #E6EEFC;
  --color-info-fg:    #0053E2;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F2F8FD;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(0,30,96,0.52);

  /* Text */
  --text-primary:    #001E60;
  --text-secondary:  #333333;
  --text-tertiary:   #66758A;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #9EABBB;

  /* Border */
  --border-default: #D6E4F5;
  --border-subtle:  #EAF1F8;
  --border-strong:  #9FB1C7;
  --border-focus:   #0053E2;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Everyday Sans / Everyday Sans UI (Walmart 전용) · Avenir Next / Segoe UI 폴백
- 한글: Pretendard / Noto Sans KR 폴백
위계:
- Display: 56px / 300 / 1.0 / -0.015em
- H1: 40px / 500 / 1.2 / 0
- H2: 28px / 500 / 1.2 / 0
- H3: 20px / 700 / 1.2 / 0
- Body Large: 18px / 400 / 1.2 / 0
- Body: 16px / 400 / 1.2 / 0
- Body Small: 14px / 400 / 1.3 / 0
- Caption: 12px / 400 / 1.3 / 0

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: max-width 1380px, 좌우 패딩 20px

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(0,30,96,0.08);
--shadow-md: 0 6px 18px rgba(0,30,96,0.11);
--shadow-lg: 0 16px 36px rgba(0,30,96,0.16);
--shadow-xl: 0 28px 64px rgba(0,30,96,0.20);

Iconography

스타일: Outline + Filled 혼합
Stroke 굵기: 1.5~2px
모서리 처리: Round
추천 라이브러리: Phosphor / Lucide

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 14px/1 'Everyday Sans', 'Avenir Next', 'Segoe UI', sans-serif; border-radius: 9999px; padding: 12px 22px; border: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background 200ms ease, transform 120ms ease; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary { background: #fff; color: var(--text-primary); border: 1.5px solid var(--text-primary); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-spark { background: var(--color-secondary-500); color: var(--text-primary); }   /* Rollback CTA */

Input

.input { background: #fff; border: 1px solid var(--border-strong); border-radius: 9999px; padding: 11px 18px 11px 42px; color: var(--text-primary); font: 400 14px/1.3 inherit; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(0,83,226,0.18); }
.input-error { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }

Card (Product)

.product { background: #fff; border-radius: 12px; padding: 12px; cursor: pointer; transition: box-shadow 200ms ease, transform 200ms ease; border: 1px solid var(--border-subtle); }
.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product .img { aspect-ratio: 1; background: linear-gradient(135deg, var(--color-primary-50), var(--bg-elevated)); border-radius: 8px; position: relative; margin-bottom: 12px; }
.product .img .rollback { position: absolute; right: 8px; top: 8px; background: var(--color-secondary-500); color: var(--text-primary); font: 800 11px/1 inherit; padding: 4px 10px; border-radius: 9999px; }
.product .img .pickup { position: absolute; left: 8px; bottom: 8px; background: rgba(255,255,255,0.95); color: var(--color-primary-500); font: 700 10px/1 inherit; padding: 3px 8px; border-radius: 9999px; }
.product .price { font: 800 22px/1 inherit; color: var(--color-primary-500); }
.product .price .old { font: 500 12px/1 inherit; color: var(--text-tertiary); text-decoration: line-through; margin-left: 6px; }
.product .name { font: 500 14px/1.4 inherit; color: var(--text-primary); margin: 6px 0; height: 38px; overflow: hidden; }
.product .stars { font: 500 12px/1 inherit; color: var(--text-tertiary); }
.product .stars .star { color: var(--color-secondary-500); }
.product .cart { margin-top: 10px; width: 100%; background: var(--color-primary-500); color: #fff; font: 700 13px/1 inherit; padding: 10px; border: 0; border-radius: 9999px; cursor: pointer; }
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }

Badge / Tag

.tag { padding: 4px 10px; border-radius: 9999px; font: 800 11px/1.3 inherit; letter-spacing: 0.02em; }
.tag-rollback     { background: var(--color-secondary-500); color: var(--text-primary); }
.tag-clearance    { background: var(--color-error-fg); color: #fff; }
.tag-pickup       { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-walmart-plus { background: var(--color-primary-500); color: #fff; }
.tag-bestseller   { background: var(--color-primary-50); color: var(--color-primary-500); }

Navigation (Top bar)

.topbar { background: var(--color-primary-500); padding: 14px 20px; display: flex; align-items: center; gap: 20px; color: #fff; }
.topbar .brand { display: flex; align-items: center; gap: 8px; font: 800 22px/1 inherit; }
.topbar .brand .spark { width: 28px; height: 28px; border-radius: 50%; background: var(--color-secondary-500); display: grid; place-items: center; }
.topbar .search { flex: 1; max-width: 720px; background: var(--bg-elevated); border-radius: 9999px; padding: 10px 16px; color: var(--text-primary); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.topbar .search button { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--color-secondary-500); color: var(--color-primary-500); border: 0; display: grid; place-items: center; cursor: pointer; }
.topbar .right { display: flex; gap: 18px; font: 600 12px/1 inherit; align-items: center; }

Motion

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

Anti-patterns

1. True Blue·Spark Yellow보다 보조색을 더 넓게 사용하지 않는다. 2. 작은 본문에 True Blue를 남용하지 않는다 — 상세 카피는 Bentonville Blue 또는 Charcoal을 사용한다. 3. Sparklet을 떼어 패턴으로 만들거나 Spark를 임의로 회전·재착색하지 않는다. 4. 버튼을 각진 사각형이나 과한 그림자로 표현하지 않는다 — 완전한 pill과 명료한 대비가 기본이다. 5. 픽업·배송·가격처럼 구매 결정을 돕는 핵심 정보를 장식 뒤에 숨기지 않는다.

Walmart

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처