디자인 시스템 갤러리 Samsung Pay (삼성페이)

Samsung Pay (삼성페이)

삼성 블루(#1428A0) + 다크 캔버스 + 부채살 카드 스택의 모바일 결제 정체성

한국핀테크소비자차가운modern-minimal고딕comfortableroundlayered다크한글 지원출시 2015개정 2024

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

Brand DNA

브랜드 DNA

  • 브랜드명: Samsung Pay
  • 한 줄 정체성: 삼성 갤럭시 기기의 NFC·MST 모바일 결제 — Samsung Wallet 통합 (카드/멤버십/티켓)
  • 공식 디자인 철학: "Tap. Pay. Done." — 삼성 블루 + 다크 캔버스의 프리미엄 기기 톤
  • 시그니처 요소 1개: 삼성 블루(#1428A0) + 검정 캔버스 + 부채살 카드 스택(여러 카드를 살짝 회전하여 겹쳐 보여주는 시그니처 디스플레이)

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 카드스택, 삼성블루, 모바일결제
  • 무드 설명: 검정 캔버스에 카드는 짙은 네이비 그라데이션. 카드 스택이 부채살처럼 펼쳐진다. 폰트는 SamsungOne (영문)/삼성샤프(한글). 결제 모션이 큰 비중.
  • 비주얼 스타일: 모던 미니멀
  • 밀도(Density): Comfortable
  • 모서리 성향: Round (8~12px)
  • 평면성: Layered — 카드 그림자가 시그니처

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Samsung Blue */
  --color-primary-50:  #E0E6F7;
  --color-primary-100: #B3BFE7;
  --color-primary-200: #8093D5;
  --color-primary-300: #4D67C3;
  --color-primary-400: #2645B0;
  --color-primary-500: #1428A0;   /* Samsung Blue */
  --color-primary-600: #0F1E78;
  --color-primary-700: #0A1758;
  --color-primary-800: #060E36;
  --color-primary-900: #02071A;

  /* Secondary - Galaxy gradient (cool teal) */
  --color-secondary-500: #4FBFB8;

  /* Neutral - dark scale */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F4F5F8;
  --color-neutral-100:  #E6E7EC;
  --color-neutral-200:  #C0C2CC;
  --color-neutral-300:  #8A8D99;
  --color-neutral-500:  #555866;
  --color-neutral-700:  #1F1F26;
  --color-neutral-800:  #141418;
  --color-neutral-900:  #0A0A0F;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #0F2A1A;
  --color-success-fg: #2DC07A;
  --color-warning-bg: #2A2010;
  --color-warning-fg: #FFB84F;
  --color-error-bg:   #2A0F18;
  --color-error-fg:   #FF4D6D;
  --color-info-bg:    #0F1A3A;
  --color-info-fg:    #4FA0FF;

  /* Surface */
  --bg-base:     #000000;
  --bg-subtle:   #0A0A0F;
  --bg-elevated: #141418;
  --bg-overlay:  rgba(0,0,0,0.85);

  /* Text */
  --text-primary:    #FFFFFF;
  --text-secondary:  rgba(255,255,255,0.78);
  --text-tertiary:   rgba(255,255,255,0.55);
  --text-on-primary: #FFFFFF;
  --text-disabled:   rgba(255,255,255,0.28);

  /* Border */
  --border-default: rgba(255,255,255,0.08);
  --border-subtle:  rgba(255,255,255,0.04);
  --border-strong:  rgba(255,255,255,0.18);
  --border-focus:   #1428A0;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문: SamsungOne / SamsungSharpSans
    • 한글: 삼성샤프 / Pretendard 폴백
  • 위계:
    • Display: 56px / 700 / 1.05 / -0.02em
    • H1: 32px / 700 / 1.2 / -0.01em
    • H2: 22px / 700 / 1.3 / -0.005em
    • H3: 16px / 600 / 1.4 / 0
    • Body Large: 16px / 400 / 1.5 / 0
    • Body: 14px / 400 / 1.45 / 0
    • Body Small: 13px / 500 / 1.4 / 0
    • Caption: 11px / 600 / 1.3 / 0.04em
    • Numeric: 17px / 600 tabular-nums

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: 72px; ``
  • Container: max-width 480px (모바일 우선), 좌우 패딩 20px

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(0,0,0,0.30);
--shadow-md: 0 8px 20px rgba(0,0,0,0.40);
--shadow-lg: 0 18px 36px rgba(0,0,0,0.55);
--shadow-card: 0 14px 28px rgba(20,40,160,0.40);    /* 카드 글로우 */

Iconography

Iconography

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

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 14px/1 SamsungOne, Inter, sans-serif; border-radius: 9999px; padding: 14px 24px; 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-400); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary { background: rgba(255,255,255,0.10); color: #fff; }
.btn-secondary:hover { background: rgba(255,255,255,0.16); }
.btn-ghost { background: transparent; color: var(--color-primary-300); }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-pay { background: #FFFFFF; color: var(--color-primary-500); font-weight: 700; padding: 14px 28px; }
.btn-icon { width: 56px; height: 56px; padding: 0; border-radius: 50%; background: rgba(255,255,255,0.10); color: #fff; }

Input

.input { background: rgba(255,255,255,0.08); border: 1px solid transparent; border-radius: 12px; padding: 14px 16px; color: #fff; font: 400 15px/1.3 inherit; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--color-primary-400); background: rgba(255,255,255,0.12); }

Card (Wallet / Stack)

.wallet-card { background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-500) 100%); color: #fff; border-radius: 12px; padding: 18px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-card); }
.wallet-card .label { font: 700 11px/1 inherit; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.wallet-card .num { font: 600 16px/1 inherit; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.stack { position: relative; padding-bottom: 30px; }
.stack .card-l { position: absolute; left: 14%; bottom: 0; width: 70%; aspect-ratio: 1.6/1; border-radius: 12px; transform: rotate(-8deg) translateY(8px); opacity: 0.55; background: linear-gradient(135deg, var(--color-neutral-700), var(--color-neutral-900)); z-index: 1; }
.stack .card-r { position: absolute; right: 14%; bottom: 0; width: 76%; aspect-ratio: 1.6/1; border-radius: 12px; transform: rotate(8deg) translateY(8px); opacity: 0.75; background: linear-gradient(135deg, var(--color-neutral-500), var(--color-neutral-800)); z-index: 2; }
.stack .card-front { position: relative; z-index: 3; }
.card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--border-default); }
.card-outlined { background: transparent; border: 1px solid var(--border-default); }

Badge / Tag

.tag { padding: 4px 10px; border-radius: 9999px; font: 700 11px/1.4 inherit; letter-spacing: 0.02em; }
.tag-default-card { background: var(--color-primary-500); color: #fff; }
.tag-touch-id     { background: rgba(255,255,255,0.12); color: #fff; }
.tag-rewards      { background: rgba(45,192,122,0.20); color: var(--color-success-fg); }
.tag-membership   { background: rgba(79,160,255,0.16); color: var(--color-info-fg); }
.tag-coupon       { background: rgba(255,184,79,0.16); color: var(--color-warning-fg); }

Navigation (Bottom tab + Stack)

.tab-bar { display: flex; padding: 12px 16px; background: var(--bg-base); border-top: 1px solid var(--border-default); }
.tab-bar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 11px/1.2 inherit; color: var(--text-tertiary); cursor: pointer; }
.tab-bar .tab.active { color: var(--color-primary-300); }
.tab-bar .tab .ic { font-size: 22px; }

Motion

Motion

--duration-fast: 150ms;
--duration-base: 280ms;
--duration-slow: 450ms;
--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. 메인 카드 컬러를 삼성 블루 외 컬러로 변경 금지 — 단일 톤 정체성 2. 카드 한 장만 표시 금지 — 부채살 스택이 시그니처 3. 라이트 캔버스를 기본으로 사용 금지 — 다크가 표준 4. 카드 모서리 sharp 사용 금지 — 8~12px Round 5. 카드 번호·금액을 비례폰트로 표기 금지

Sources

출처

  1. https://www.samsung.com/sec/samsung-pay/
  2. https://www.samsung.com/global/galaxy/apps/samsung-wallet/