Tinder

핑크→오렌지 불꽃 그라데이션과 화면을 꽉 채운 스와이프 사진 카드

서양소셜소비자라이프스타일따뜻한modern-minimalhumanism고딕comfortableroundlayered라이트다크한글 지원출시 2012개정 2026

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

Brand DNA

브랜드 DNA

브랜드명: Tinder (Match Group)
한 줄 정체성: 사진 한 장을 좌우로 넘기며 사람을 만나는, 스와이프 방식을 처음 대중화한 데이팅 앱
공식 디자인 철학: 공개된 디자인 시스템 문서는 없다. 2026년 7월 Porto Rocha 리브랜딩에서 내건 방향은 "더 날렵하고 날카로워진 불꽃, 대담함과 재치를 지키면서 따뜻함과 친근함은 유지"이며, 가상의 연애 칼럼니스트 「T」가 브랜드 말투를 이끈다.
시그니처 요소 1개: 핑크(#FD267A)에서 오렌지(#FF7854)로 번지는 불꽃 그라데이션 + 화면을 가득 채운 사진 카드 아래에 놓인 원형 액션 버튼 줄(되돌리기·싫어요·슈퍼 라이크·좋아요·부스트)

Tone & Mood

톤 & 무드

핵심 키워드 3개: 설렘, 대담함, 경쾌함
무드 설명: 인터페이스는 거의 비어 있고, 사람 사진이 화면의 주인공이다. 브랜드 색은 로고·주요 버튼·매치 순간처럼 "감정이 터지는 곳"에만 그라데이션으로 등장한다. 문구는 짧고 장난스럽다.
비주얼 스타일: 모던 미니멀 + 휴머니즘
밀도(Density): Comfortable — 카드 한 장에 시선이 몰리도록 주변 요소를 줄이고, 누르기 쉬운 큰 원형 버튼을 쓴다.
모서리 성향: Round (8~16px) — 사진 카드는 8~10px, 액션 버튼과 CTA 는 원형·필
평면성: Layered — 사진 카드가 여러 장 겹쳐 쌓인 느낌을 그림자로 표현한다

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Tinder Pink (그라데이션의 핑크 끝점) */
  --color-primary-50:  #FFEEF4;  /* 선택 칩 배경 */
  --color-primary-100: #FFD3E3;
  --color-primary-200: #FFA8C8;
  --color-primary-300: #FE77A9;
  --color-primary-400: #FD4B8E;
  --color-primary-500: #FD267A;  /* 기본 · 로고 그라데이션 시작점 */
  --color-primary-600: #E0106A;  /* hover */
  --color-primary-700: #B80A57;  /* pressed */
  --color-primary-800: #8C0843;
  --color-primary-900: #5E062E;

  /* Secondary - Tinder Orange (그라데이션의 오렌지 끝점) */
  --color-secondary-500: #FF7854;
  --gradient-brand: linear-gradient(262deg, #FF7854 0%, #FD267A 100%);  /* 로고·주 CTA·매치 화면 */

  /* 액션 버튼 색 (제품 관찰 · 추정) */
  --action-rewind:    #FFB230;  /* 되돌리기 */
  --action-nope:      #FF4458;  /* 싫어요 */
  --action-superlike: #1EA1F1;  /* 슈퍼 라이크 */
  --action-like:      #1BE4A1;  /* 좋아요 */
  --action-boost:     #A155F2;  /* 부스트 */
  --tier-gold:        #D6A54A;  /* Tinder Gold (추정) */

  /* Neutral (추정) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F8F9FA;
  --color-neutral-100:  #F0F2F4;
  --color-neutral-200:  #E4E7EB;
  --color-neutral-300:  #D4D8DE;
  --color-neutral-500:  #7C8591;
  --color-neutral-700:  #505965;
  --color-neutral-800:  #31363F;
  --color-neutral-900:  #21262E;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E3FBF3;
  --color-success-fg: #0B9E6C;
  --color-warning-bg: #FFF4DE;
  --color-warning-fg: #B87200;
  --color-error-bg:   #FFE8EB;
  --color-error-fg:   #E0283E;
  --color-info-bg:    #E4F3FE;
  --color-info-fg:    #1786FF;

  /* Surface */
  --bg-base:     #FFFFFF;          /* 스와이프 화면 배경 */
  --bg-subtle:   #F0F2F4;          /* 설정·목록 구분 */
  --bg-elevated: #FFFFFF;          /* 시트·카드 */
  --bg-overlay:  rgba(17,20,24,0.6);

  /* Text */
  --text-primary:    #21262E;
  --text-secondary:  #505965;
  --text-tertiary:   #7C8591;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B9BFC7;

  /* Border */
  --border-default: #E4E7EB;
  --border-subtle:  #F0F2F4;
  --border-strong:  #B9BFC7;
  --border-focus:   #FD267A;
}

[data-theme="dark"] {
  --bg-base: #111418;
  --bg-subtle: #1F242B;
  --bg-elevated: #21262E;
  --text-primary: #FFFFFF;
  --text-secondary: #A3ACB8;
  --border-default: #2F3640;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Proxima Nova (상용, 제품 UI 관찰 · 추정) — 폴백 -apple-system, "Helvetica Neue"
- 한글: Pretendard (OFL) / Apple SD Gothic Neo
- 워드마크: 2026 리브랜딩 이후 대문자 산세리프 "TINDER" (전용 서체, 이름 비공개). 마케팅 헤드라인엔 새 세리프 서체를 쓴다(이름 비공개).
위계:
- Display: 44px / 800 / 1.05 / -0.02em (매치 화면 "It's a Match!")
- H1: 28px / 800 / 1.15 / -0.01em (카드 이름)
- H2: 22px / 700 / 1.25 / 0
- H3: 17px / 700 / 1.3 / 0
- Body Large: 17px / 400 / 1.45 / 0
- Body: 15px / 400 / 1.45 / 0
- Body Small: 13px / 400 / 1.4 / 0
- Caption: 11px / 600 / 1.3 / 0.04em (대문자 라벨)

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: 모바일은 카드 좌우 8px, 웹 스와이프 영역은 카드 폭 375px 고정 + 좌측 목록 패널 340px

Border Radius

--radius-none: 0;
--radius-sm: 4px;      /* 작은 라벨 */
--radius-md: 8px;      /* 사진 카드·입력 */
--radius-lg: 12px;     /* 시트·설정 카드 */
--radius-xl: 16px;     /* 구독 플랜 카드 */
--radius-full: 9999px; /* 액션 버튼·CTA·관심사 칩 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);    /* 목록 행·칩 */
--shadow-md: 0 2px 10px rgba(0,0,0,0.12);   /* 원형 액션 버튼 */
--shadow-lg: 0 6px 22px rgba(0,0,0,0.20);   /* 맨 위 사진 카드 */
--shadow-xl: 0 16px 40px rgba(253,38,122,0.30); /* 매치 모달·주 CTA 글로우 */

Iconography

스타일: Filled 중심(액션 버튼·불꽃) + Outline(탭바 비활성)
Stroke 굵기: 2px (탭바), 액션 아이콘은 두꺼운 3px 이상
모서리 처리: Round
추천 라이브러리: Lucide(탭바·설정) + 액션 버튼은 전용 채움 아이콘

Component Guide

컴포넌트 가이드

Button

.btn {
  font: 700 15px/1 'Proxima Nova', 'Pretendard', sans-serif;
  height: 48px; padding: 0 28px; border: 0; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: 0.02em; text-transform: uppercase;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--gradient-brand); color: var(--text-on-primary); }
.btn-primary:hover { opacity: 0.92; }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { background: var(--bg-subtle); color: var(--text-disabled); }
.btn-primary.is-loading { color: transparent; background: var(--color-primary-300); }
.btn-secondary { background: var(--bg-base); color: var(--text-secondary); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.btn-secondary:hover { color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--text-primary); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-ghost:hover { background: var(--color-primary-50); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }

/* 시그니처: 원형 스와이프 액션 버튼 */
.action { width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--bg-elevated);
  border: 1.5px solid currentColor; box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--duration-fast) var(--ease-pop); }
.action.sm { width: 42px; height: 42px; }
.action:hover { transform: scale(1.08); }
.action:active { transform: scale(0.92); background: currentColor; }
.action.nope { color: var(--action-nope); }
.action.like { color: var(--action-like); }
.action.super { color: var(--action-superlike); }
.action.rewind { color: var(--action-rewind); }
.action.boost { color: var(--action-boost); }

Input

.input { height: 48px; padding: 0 16px; background: var(--bg-base); color: var(--text-primary);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md); font-size: 16px; }
.input:focus { outline: none; border-color: var(--border-focus); }
.input.is-error { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card (스와이프 카드)

.swipe-card { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.swipe-card .info { position: absolute; inset: auto 0 0 0; padding: 64px 16px 16px; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%); }
.swipe-card .pager { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; }
.swipe-card .pager span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.4); }
.swipe-card .pager span.on { background: #FFFFFF; }
.stamp { position: absolute; top: 40px; padding: 4px 10px; border: 4px solid; border-radius: 8px; font-weight: 800; font-size: 32px; letter-spacing: .04em; }
.stamp.like { left: 20px; color: var(--action-like); transform: rotate(-18deg); }
.stamp.nope { right: 20px; color: var(--action-nope); transform: rotate(18deg); }
.card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.card-strong { background: var(--gradient-brand); color: var(--text-on-primary); box-shadow: var(--shadow-xl); }
.card-outlined { box-shadow: none; border: 1px solid var(--border-default); }

Badge / Tag

.tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; }
.tag-solid { background: var(--gradient-brand); color: #FFFFFF; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); }
.tag-outline.is-selected { border-color: var(--color-primary-500); color: var(--color-primary-500); }

Navigation

.tabbar { height: 56px; display: flex; justify-content: space-around; align-items: center;
  background: var(--bg-base); border-top: 1px solid var(--border-default); color: var(--text-tertiary); }
.tabbar .on { color: var(--color-primary-500); }
.side-head { height: 72px; padding: 0 20px; display: flex; align-items: center; gap: 12px; background: var(--gradient-brand); color: #FFFFFF; }

Motion

--duration-fast: 120ms;
--duration-base: 250ms;
--duration-slow: 450ms;   /* 카드가 화면 밖으로 날아가는 시간 */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* 버튼 누름·매치 하트 튀어오름 */
--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

카드는 손가락을 따라 기울며(최대 약 15°) 이동하고, 끝까지 밀면 LIKE/NOPE 도장이 투명도 0→1 로 떠오른다.

Anti-patterns

1. 핑크·오렌지 그라데이션을 넓은 배경 면에 깔기 금지 — 로고·주 CTA·매치 화면에만 쓴다 2. 액션 버튼 5색의 의미 뒤섞기 금지 — 좋아요=초록, 싫어요=빨강, 슈퍼 라이크=파랑이 약속이다 3. 사진 카드 위에 긴 텍스트·여러 버튼 올리기 금지 — 이름·나이·거리·관심사 칩까지만 4. 날카로운 직각 버튼 금지 — 누르는 요소는 원형·필 모양을 지킨다 5. 불꽃 로고를 다른 색 단색으로 칠하거나 비틀기 금지 — 공식 변형(흰색·검정·빨강·그라데이션)만 쓴다

Tinder

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

출처