Yahoo

22.5° 기울어진 느낌표의 보라 워드마크와 알약 모양 검색창 — 뉴스·메일·금융을 한 포털에

서양미디어생산성소비자차가운modern-minimalhumanism고딕comfortableroundsubtle라이트다크출시 2019개정 2026

Brand DNA

브랜드 DNA

브랜드명: Yahoo (야후, 로고 표기는 소문자 yahoo!)
한 줄 정체성: 뉴스·메일·금융·스포츠·검색을 한 첫 화면에 모은 미국의 원조 인터넷 포털
공식 디자인 철학:
- 2019년 Pentagram(마이클 베이루트) 리브랜딩 — 1996년 장난스러운 로고의 정신을 되살려 더 단순하고 유연하게. y 와 느낌표 ! 를 모두 22.5° 로 기울이고, 이 각도와 「잘린 조각」을 시각 언어의 기준으로 삼았다. 대표 보라는 「Grape Jelly」(#6001D2), 보조 보라는 「Hulk Pants」·「Malbec」.
- 2026년 2월 JKR 리프레시 — "Not a reinvention. A reintroduction.(재발명이 아니라 재소개)", "The Original Guide(원조 길잡이)". 옛 야후의 정신·말투·분위기로 돌아가면서 "색을 한껏 끌어올렸다(cranked up the color)". 전용 서체 Yahoo Sans·Yahoo Serif 도입.
시그니처 요소 1개: 22.5° 기울어진 느낌표가 달린 보라 소문자 워드마크 + 같은 보라의 알약형 검색 버튼. 현행 yahoo.com·야후 메일 소개 페이지 모두 로고와 검색 버튼을 #7D2EFF 로 칠한다(실측).

> 참고: 2019년 기준 대표색은 Grape Jelly #6001D2 였다. 2026-09-19 실측한 현행 yahoo.com 은 로고(fill-uh-purple)·검색 버튼·브랜드 토큰(--uds-spectrum-color-purple-9)이 모두 `#7D2EFF` 로 바뀌었고, #6001D2 는 호버·포커스 링(rgb(96 1 210/80%))으로 남아 있다. 이 문서는 현행 값 #7D2EFF 를 대표색으로 쓴다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 발랄함, 친근함, 정보 밀도
무드 설명: 흰 바탕과 푸른 기 도는 회색(#232A31·#5B636A) 글자 위에 보라 한 가지만 크게 쓴다. 기사 사진이 화면 색을 대부분 채우므로 UI 크롬은 조용하고, 로고·검색 버튼·활성 탭에만 보라가 들어간다. 헤드라인은 굵은 산세리프(Centra No2), 본문은 둥글고 친근한 YA Sans 로 "오래된 친구 같은 포털" 톤을 낸다.
비주얼 스타일: 모던 미니멀 + 휴머니즘 (기울어진 느낌표, 말랑한 알약 모양 컨트롤)
밀도(Density): Comfortable — 뉴스 목록·트렌딩·시세 위젯이 빽빽하지만 카드 사이 16px 이상 여백과 15px 본문으로 숨 쉴 틈을 둔다.
모서리 성향: Round (카드 16px --uds-border-radius-lg, 검색창·검색 버튼은 알약 100px/26px, 작은 칩 4px)
평면성: Subtle — 카드는 1px 헤어라인 또는 아주 옅은 2겹 그림자(elevation-1), 검색창만 호버 시 그림자가 뜬다.

Color System

컬러 시스템 (CSS 변수)

2026-09-19 yahoo.com 실측 CSS(/_nca/_next/static/css/*.css)의 UDS 토큰 기준. Primary 9단계는 --uds-spectrum-color-purple-* 라이트 값을 그대로 옮겼다(700 은 Grape Jelly). 중성색은 홈 화면 크롬이 실제로 쓰는 ymp-uh-* 팔레트.

:root {
  /* Primary - Yahoo Purple (UDS purple spectrum, 라이트) */
  --color-primary-50:  #F3F0FE;  /* purple-1 — 선택 행·브랜드 보조 배경 */
  --color-primary-100: #EAE5FD;  /* purple-2 — bg-brand-tertiary */
  --color-primary-200: #E2D6FF;  /* purple-3 — 칩 호버 */
  --color-primary-300: #C6AFFF;  /* purple-5 */
  --color-primary-400: #9F76FF;  /* purple-8 */
  --color-primary-500: #7D2EFF;  /* purple-9 — 로고·검색 버튼·brand (기본) */
  --color-primary-600: #6F29E2;  /* purple-10 — foreground-brand, 링크 */
  --color-primary-700: #6001D2;  /* Grape Jelly — hover·focus 링 (2019 대표색) */
  --color-primary-800: #4C1C9B;  /* purple-12 */
  --color-primary-900: #3A1577;  /* purple-14 — 진한 보라 면 */

  /* Secondary - 2019 보조 보라 / 크리에이터 보라 */
  --color-secondary-500: #39007D;  /* Malbec 계열 — 메일 소개 페이지 진한 보라 (실측) */
  --color-accent-500:    #0063EB;  /* blue-9 — info·링크 강조 */

  /* Neutral - ymp-uh 팔레트 (푸른 기 도는 회색) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F5F8FA;  /* marshmallow — 검색창 면 */
  --color-neutral-100:  #F0F3F5;  /* grey-hair — 구획 배경 */
  --color-neutral-300:  #E0E4E9;  /* dirty-seagull — 헤어라인 */
  --color-neutral-500:  #6E7780;  /* dolphin — 아이콘·캡션 */
  --color-neutral-700:  #5B636A;  /* battleship — 보조 글자 */
  --color-neutral-900:  #232A31;  /* batcave — 본문·제목 */
  --color-neutral-1000: #101518;  /* midnight — 다크 배경 */

  /* Semantic - UDS spectrum 9 / 1 */
  --color-success-bg: #DCFCD9;  /* green-1 */
  --color-success-fg: #017647;  /* green-9 — 시세 상승 */
  --color-warning-bg: #FFF1E2;  /* orange-1 */
  --color-warning-fg: #A64D1F;  /* orange-9 */
  --color-error-bg:   #FFEFEB;  /* red-1 */
  --color-error-fg:   #C62626;  /* red-9 — 시세 하락·오류 */
  --color-info-bg:    #EAF4F9;  /* blue-1 */
  --color-info-fg:    #0063EB;  /* blue-9 */

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;             /* 홈·메일 본문 */
  --bg-subtle:   #F5F8FA;             /* 검색창·사이드 영역 */
  --bg-elevated: #FFFFFF;             /* 카드 */
  --bg-overlay:  rgba(16, 21, 24, 0.6); /* 모달 딤 (추정) */

  /* Text 위계 */
  --text-primary:    #232A31;  /* batcave — 본문·헤드라인 */
  --text-secondary:  #5B636A;  /* battleship — 출처·보조, 검색 placeholder */
  --text-tertiary:   #6E7780;  /* dolphin — 시간·캡션 */
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B0B9C1;  /* gray-10 */

  /* Border */
  --border-default: #E0E4E9;  /* dirty-seagull */
  --border-subtle:  #F0F3F5;  /* grey-hair */
  --border-strong:  #B0B9C1;
  --border-focus:   #6001D2;  /* focus-visible 아웃라인 rgb(96 1 210 / 80%) */
}

Typography

타이포그래피

폰트 페어링 (실측 --uds-font-*):
- 한글: 전용 한글 서체 없음. 한국어 화면에는 Pretendard 또는 Noto Sans KR 폴백 권장 (추정)
- 영문 UI·본문: YA Sans VF(Yahoo Sans 가변, 사내 전용) → Helvetica Neue → Arial
- 영문 디스플레이: Centra No2(상용) — --uds-font-sans-alt, 큰 헤드라인·카드 제목
- 세리프: Yahoo Serif Display / Yahoo Serif Text(사내 전용) — 특집·에디토리얼 제목
- 모노: Roboto Mono — 시세 숫자
위계 (UDS font-size/weight/letter-spacing 실측, 행간은 (추정)):
- Display: 56px / 700 / 60px / -2px (display1)
- H1: 32px / 700 / 38px / 0 (display2)
- H2: 28px / 600 / 34px / 0 (headline1)
- H3: 22px / 600 / 28px / 0 (title1)
- Body Large: 18px / 400 / 26px / 0 (body1)
- Body: 15px / 500 / 20px / 0 (title4 — 기사 목록 제목)
- Body Small: 14px / 450 / 18px / 0 (ui4 — 가변 굵기 450)
- Caption: 13px / 400 / 16px / 0.2px (caption1), 11px 법적 고지(legal1)
특징: 가변 서체라 450 같은 중간 굵기를 적극 쓴다. 버튼·탭 라벨은 600.

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: 홈 3단 레이아웃(좌 트렌딩 · 가운데 피드 · 우 레일) 최대 약 1440px, 검색창 max-width 702px(실측), 좌우 패딩 16~24px (추정). 야후 메일은 좌측 폴더 패널 + 목록 + 읽기 창 전체 폭.

Border Radius

실측 --uds-border-radius-* 값 그대로.

--radius-none: 0;
--radius-sm: 4px;      /* 칩·배지·이미지 카운터 */
--radius-md: 8px;      /* 버튼·입력·작은 카드 */
--radius-lg: 16px;     /* 기사 카드·위젯 (rounded-lg 48회 최다) */
--radius-xl: 32px;     /* 큰 프로모션 패널 */
--radius-search: 26px; /* 검색 버튼 60×40 */
--radius-full: 9999px; /* 검색창(100px)·아바타 */

Shadow / Elevation

UDS drop-shadow 실측. 라이트는 0.1/0.06 의 아주 옅은 2겹.

--shadow-none: none;
--shadow-sm: 0 0 1px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06);                                  /* elevation-1 — 기사 카드 */
--shadow-md: 0 0 1px 0 rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.06); /* elevation-2 — 검색창 hover·드롭다운 */
--shadow-lg: 0 0 1px 0 rgba(0,0,0,0.10), 0 8px 16px -4px rgba(0,0,0,0.10), 0 12px 24px -6px rgba(0,0,0,0.08); /* elevation-3 — 팝오버 (추정) */
--shadow-xl: 0 24px 48px -12px rgba(0,0,0,0.25);                                                        /* 2xl — 모달 */

Iconography

스타일: Outline 중심 + 채운 단색(로고·재생·시세 화살표)
Stroke 굵기: 1.5~2px (16/24 그리드)
모서리 처리: Round
추천 라이브러리: Lucide 또는 Tabler (공식 아이콘 세트는 비공개)

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button — 실측 --uds-button-scale-effect 대로 호버 1.03배, 누름 0.97배로 살짝 튄다.

.yh-btn { height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-full); font: 600 14px/18px 'YA Sans VF', 'Helvetica Neue', Arial, sans-serif; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.yh-btn:hover { transform: scale(1.03); }
.yh-btn:active { transform: scale(0.97); }
.yh-btn:focus-visible { outline: 4px solid rgba(96, 1, 210, 0.8); outline-offset: 0; }
.yh-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.yh-btn--primary:hover { background: var(--color-primary-700); }
.yh-btn--secondary { background: var(--bg-base); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); }
.yh-btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.yh-btn--ghost { background: transparent; color: var(--color-primary-600); }
.yh-btn--ghost:hover { background: var(--color-primary-50); }
.yh-btn--danger { background: var(--color-error-fg); color: #fff; }
.yh-btn:disabled { background: var(--border-subtle); color: var(--text-disabled); transform: none; cursor: not-allowed; }
.yh-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.yh-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: yh-spin .8s linear infinite; }
@keyframes yh-spin { to { transform: rotate(360deg); } }

Input — 홈 검색창(알약, marshmallow 면, 보라 캐럿)

.yh-search { display: flex; align-items: center; height: 46px; max-width: 702px; padding: 0 4px 0 24px; border-radius: 100px; background: var(--bg-subtle); outline: 2px solid transparent; outline-offset: -2px; transition: outline var(--duration-base) var(--ease-in-out); }
.yh-search:hover { box-shadow: var(--shadow-md); outline-color: var(--border-default); }
.yh-search:focus-within { outline-color: var(--color-primary-500); background: var(--bg-base); }
.yh-search input { flex: 1; border: 0; background: transparent; font: 400 16px/20px 'YA Sans VF', Arial, sans-serif; color: var(--text-primary); caret-color: var(--color-primary-500); outline: none; }
.yh-search input::placeholder { color: var(--text-secondary); }
.yh-search__go { width: 60px; height: 40px; border-radius: 26px; background: var(--color-primary-500); display: grid; place-items: center; }
.yh-search__go:hover { background: var(--color-primary-700); }
.yh-input.is-error { outline-color: var(--color-error-fg); }
.yh-input:disabled { background: var(--border-subtle); color: var(--text-disabled); }

Card

.yh-card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.yh-card:hover .yh-card__title { color: var(--color-primary-600); }
.yh-card--hero { position: relative; color: #fff; }                         /* 사진 위 검은 그라디언트 + 흰 제목 */
.yh-card--hero::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78)); }
.yh-card--outlined { box-shadow: inset 0 0 0 1px var(--border-default); }
.yh-card__title { font: 700 18px/22px 'Centra No2', 'Helvetica Neue', Arial, sans-serif; color: var(--text-primary); }

Badge / Tag

.yh-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font: 600 11px/16px 'YA Sans VF', Arial, sans-serif; }
.yh-badge--solid { background: var(--color-primary-500); color: #fff; }
.yh-badge--subtle { background: var(--color-primary-100); color: var(--color-primary-700); }
.yh-badge--outline { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-secondary); }
.yh-ticker--up { color: var(--color-success-fg); }   /* 시세 +0.8% */
.yh-ticker--down { color: var(--color-error-fg); }

Navigation — 홈 상단 바(로고 · 검색 · 메일/로그인) + 섹션 탭

.yh-header { display: flex; align-items: center; gap: 24px; height: 72px; padding: 0 24px; background: var(--bg-base); }
.yh-tabs { display: flex; gap: 24px; box-shadow: inset 0 -1px 0 var(--border-default); }
.yh-tabs a { padding: 10px 0; font: 600 15px/20px 'YA Sans VF', Arial, sans-serif; color: var(--text-primary); text-decoration: none; }
.yh-tabs a:hover { color: var(--color-primary-600); }
.yh-tabs a.is-active { color: var(--color-primary-500); box-shadow: inset 0 -3px 0 var(--color-primary-500); }

Motion

UDS 는 스프링 모션(--uds-motion-bouncy-1~4, damped-1~2)을 쓴다. CSS 로 옮길 때의 근사값:

--duration-fast: 120ms;   /* 버튼 scale 1.03/0.97 (추정) */
--duration-base: 200ms;   /* 검색창 높이·아웃라인 전환 (실측 .2s/.3s) */
--duration-slow: 400ms;   /* 캐러셀 슬라이드 (추정) */
--ease-out: cubic-bezier(0.34, 1.4, 0.64, 1);   /* bouncy 스프링 근사 — 살짝 튕김 (추정) */
--ease-in-out: ease-in-out;                     /* 검색창 전환 실측 */

Anti-patterns

1. 로고를 보라 이외 색(파랑·빨강 등)이나 기울기를 바로 세운 느낌표로 바꾸지 않는다 — 22.5° 느낌표와 보라가 브랜드의 전부다. 어두운 바탕에서는 흰색 로고만. 2. 보라를 넓은 배경 면에 깔지 않는다 — 뉴스 사진이 색을 채우므로 보라는 로고·검색 버튼·활성 탭·링크 호버에만 쓴다. 3. 검색창과 검색 버튼을 각진 사각형으로 만들지 않는다 — 알약(100px/26px)이 야후 검색의 얼굴이다. 4. 본문 글자를 순수 검정 #000 으로 쓰지 않는다 — 푸른 기 도는 batcave #232A31 이 기본이다. 5. 기사 카드에 굵은 테두리와 진한 그림자를 겹치지 않는다 — 0.1/0.06 의 옅은 2겹 그림자나 1px 헤어라인 하나만.

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처