디자인 시스템 갤러리 Temu

Temu

오렌지(#FB7701) + 룰렛·타이머 게임화 + Lightning Deal 이중 카드의 자극 UX

아시아이커머스소비자게이밍따뜻한modern-minimal고딕compactroundlayered라이트한글 지원출시 2022개정 2024

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

Brand DNA

브랜드 DNA

  • 브랜드명: Temu
  • 한 줄 정체성: PDD Holdings의 글로벌 초저가 직구 — 게임화 UX의 끝판왕
  • 공식 디자인 철학: "Shop like a billionaire" — 가격 충격 + 게임적 보상 + 시간 압박
  • 시그니처 요소 1개: Temu Orange(#FB7701) + 룰렛·라이트닝 타이머·할인 게이지 등 도파민 UX. AliExpress가 정보 과부하라면, Temu는 게임 화면

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 게임화, 룰렛, 카운트다운
  • 무드 설명: 흰·크림 캔버스(#FFF8F0)에 강렬한 오렌지 액센트. 카드는 라운드 round 8~12px, 타이머는 항상 검정 바탕에 흰 숫자. 페이지 곳곳에 룰렛·도장판·보상 UI.
  • 비주얼 스타일: 모던 미니멀 (게임화 톤)
  • 밀도(Density): Compact
  • 모서리 성향: Round (8~12px)
  • 평면성: Layered — 카드 그림자 + 게이미피케이션 모달

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Temu Orange */
  --color-primary-50:  #FFF1DE;
  --color-primary-100: #FED9AC;
  --color-primary-200: #FDBE7A;
  --color-primary-300: #FCA34B;
  --color-primary-400: #FC8D26;
  --color-primary-500: #FB7701;   /* Temu Orange */
  --color-primary-600: #DF6700;
  --color-primary-700: #B25100;
  --color-primary-800: #803A00;
  --color-primary-900: #4F2300;

  /* Secondary - Hot Red (Lightning Deal) */
  --color-secondary-500: #FF4D00;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FFF8F0;     /* 크림 캔버스 */
  --color-neutral-100:  #FEEAD1;
  --color-neutral-200:  #F2E5D5;
  --color-neutral-300:  #C7BFB1;
  --color-neutral-500:  #888070;
  --color-neutral-700:  #555048;
  --color-neutral-800:  #333028;
  --color-neutral-900:  #222222;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E0F4E2;
  --color-success-fg: #1FA73F;
  --color-warning-bg: #FFF6D1;
  --color-warning-fg: #B27200;
  --color-error-bg:   #FFE0D9;
  --color-error-fg:   #FF4D00;
  --color-info-bg:    #E0F0FE;
  --color-info-fg:    #2C70BE;

  /* Surface */
  --bg-base:     #FFF8F0;
  --bg-subtle:   #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(34,34,34,0.50);

  /* Text */
  --text-primary:    #222222;
  --text-secondary:  #555048;
  --text-tertiary:   #888070;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #C7BFB1;

  /* Border */
  --border-default: #FEEAD1;
  --border-subtle:  #FFF8F0;
  --border-strong:  #F2E5D5;
  --border-focus:   #FB7701;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문: Inter / Roboto 폴백
    • 한글: Pretendard / Noto Sans KR
  • 위계:
    • Display: 32px / 900 / 1.15 / -0.02em (캠페인)
    • H1: 22px / 800 / 1.2 / -0.01em
    • H2: 16px / 800 / 1.3 / -0.005em
    • H3: 14px / 700 / 1.35 / 0
    • Body Large: 14px / 400 / 1.45 / 0
    • Body: 12px / 400 / 1.4 / 0
    • Body Small: 11px / 500 / 1.35 / 0
    • Caption: 10px / 800 / 1.2 / 0.04em
    • Timer: 13~16px / 800 / 1 tabular-nums (시그니처)

Spacing

스페이싱

  • Base unit: 4px (Compact)
  • 토큰: ``css --space-xs: 4px; --space-sm: 6px; --space-md: 10px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 56px; ``
  • Container: max-width 1280px, 좌우 패딩 12px

Border Radius

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(251,119,1,0.08);
--shadow-md: 0 4px 12px rgba(251,119,1,0.16);
--shadow-lg: 0 12px 28px rgba(251,119,1,0.24);
--shadow-flash: 0 4px 12px rgba(255,77,0,0.40);   /* 라이트닝 글로우 */

Iconography

Iconography

  • 스타일: Filled + emoji 혼합 (도파민 톤)
  • Stroke 굵기: 2px
  • 모서리 처리: Round
  • 추천 라이브러리: Phosphor / Twemoji

Component Guide

컴포넌트 가이드

Button

.btn { font: 800 13px/1 Inter, 'Pretendard', sans-serif; border-radius: 9999px; padding: 11px 22px; border: 0; display: inline-flex; align-items: center; gap: 6px; 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(--color-primary-500); border: 1.5px solid var(--color-primary-500); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-danger { background: var(--color-secondary-500); color: #fff; }
.btn-cart { background: #000; color: #fff; padding: 8px 16px; }
.btn-flash { background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500)); color: #fff; box-shadow: var(--shadow-flash); }

Input

.input { background: #fff; border: 2px solid var(--color-primary-500); border-radius: 9999px; padding: 10px 16px 10px 40px; color: var(--text-primary); font: 400 13px/1.3 inherit; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; box-shadow: 0 0 0 3px rgba(251,119,1,0.20); }

Card (Product)

.product { background: #fff; border-radius: 12px; padding: 0; cursor: pointer; transition: box-shadow 200ms ease, transform 200ms ease; }
.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product .img { aspect-ratio: 1; background: linear-gradient(135deg, var(--color-primary-100), #fff); border-radius: 12px 12px 0 0; position: relative; }
.product .img .discount { position: absolute; left: 6px; top: 6px; background: var(--color-primary-500); color: #fff; font: 800 11px/1 inherit; padding: 4px 8px; border-radius: 9999px; }
.product .img .timer { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,0.85); color: #fff; font: 800 11px/1 inherit; padding: 3px 8px; border-radius: 9999px; font-variant-numeric: tabular-nums; }
.product .body { padding: 8px 10px 12px; }
.product .name { font: 500 12px/1.35 inherit; color: var(--text-primary); height: 32px; overflow: hidden; margin-bottom: 6px; }
.product .price-row { display: flex; align-items: baseline; gap: 4px; }
.product .price { font: 800 18px/1 inherit; color: var(--color-primary-500); }
.product .price .old { font: 500 11px/1 inherit; color: var(--text-tertiary); text-decoration: line-through; font-weight: 500; }
.product .meta { font: 600 10px/1.4 inherit; color: var(--color-secondary-500); margin-top: 4px; }
.product .cart { margin-top: 8px; background: #000; color: #fff; font: 800 12px/1 inherit; padding: 8px 14px; border-radius: 9999px; border: 0; cursor: pointer; }
.card { background: #fff; border-radius: 12px; padding: 14px; box-shadow: var(--shadow-sm); }
.flash-card { background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500)); color: #fff; border-radius: 12px; padding: 14px; }

Badge / Tag

.tag { padding: 3px 8px; border-radius: 9999px; font: 800 11px/1.3 inherit; letter-spacing: 0.02em; }
.tag-flash    { background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500)); color: #fff; }
.tag-discount { background: var(--color-primary-500); color: #fff; }
.tag-coupon   { background: #fff; color: var(--color-primary-500); border: 1.5px dashed var(--color-primary-500); }
.tag-roulette { background: var(--color-secondary-500); color: #fff; }
.tag-free-gift { background: var(--color-success-bg); color: var(--color-success-fg); }

Navigation (Top bar)

.topbar { background: var(--color-primary-500); padding: 10px 12px; display: flex; align-items: center; gap: 10px; color: #fff; }
.topbar .brand { font: 800 22px/1 inherit; letter-spacing: -0.01em; }
.topbar .search { flex: 1; max-width: 720px; background: #fff; border-radius: 9999px; padding: 8px 14px 8px 38px; color: var(--text-primary); font-size: 13px; position: relative; border: 2px solid #fff; }
.topbar .search::before { content:'🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-primary-500); }
.topbar .right { display: flex; gap: 10px; align-items: center; font: 700 12px/1 inherit; }

Motion

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 룰렛/뱃지 튐 */

Anti-patterns

Anti-patterns

1. 타이머·룰렛 등 게이미피케이션 요소 생략 금지 — Temu의 정체성 2. 캔버스를 순흰색으로 변경 금지 — 따뜻한 크림(#FFF8F0)이 차별 3. 카드 sharp(0px) 사용 금지 — 라운드 12px이 친근 톤 4. 다크 모드 캔버스 사용 금지 5. 메인 액션을 회색으로 변경 금지 — Temu Orange가 시그니처

Sources

출처

  1. https://www.temu.com/
  2. https://www.pddholdings.com/