VALORANT

잉크 네이비 #0F1923 위 레드 #FF4655, 모서리 0 직각 버튼과 3px 떨어진 외곽선, Tungsten 대문자 헤드라인

서양게이밍미디어복합brutalismmodern-minimal디자인폰트comfortablesharpflat다크한글 지원출시 2020개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: VALORANT (발로란트, 라이엇 게임즈)
한 줄 정체성: 정밀한 총격전에 요원마다 다른 스킬을 얹은 5대5 캐릭터 기반 전술 FPS. 2020년 6월 정식 출시.
공식 디자인 철학: 공개 디자인 시스템은 없다. 공식 슬로건은 사이트 첫 화면의 "DEFY THE LIMITS"(한국어판 「한계를 돌파하라」)와 "CREATIVITY IS YOUR GREATEST WEAPON". 로고·스타일 가이드는 디자이너 Cory Schmitz(2019~2022)가 만들었고, 출시 캠페인의 키아트 포스터 시스템·모션은 토론토 스튜디오 Worship 이 17개 언어 편집 툴킷으로 풀었다. V 마크는 두 개의 각진 조각이 위로 열린 V 를 이루며, 잘린 모서리로 정밀함과 조준을 표현한다.
시그니처 요소 1개: 잉크 네이비 #0F1923 캔버스 위 레드 #FF4655 하나, 그리고 모서리가 전혀 없는 직각 버튼을 3px 띄운 1px 외곽선이 한 번 더 감싸는 「ornamental」 CTA — 조준선처럼 보이는 이 이중 테두리가 사이트·클라이언트 공통 표식이다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 전술적, 날카로움, 강렬함
무드 설명: 거의 검정에 가까운 푸른 잉크색 #0F1923 과 바랜 종이 같은 크림 #ECE8E1 두 색이 판을 나누고, 그 사이에 레드 #FF4655 가 신호처럼 박힌다. 초장체 Tungsten 대문자 헤드라인이 화면을 가득 채우고, 본문은 DIN Next 로 기계적이고 담백하다. 곡선·그림자·그라디언트 대신 직선·사선·면 분할로 긴장감을 만든다.
비주얼 스타일: 브루털리즘(거대한 초장체 타이포·면 분할·직각) + 모던 미니멀(2~3색 제한 팔레트)
밀도(Density): Comfortable — 마케팅 사이트는 블레이드(섹션)마다 48~64px 여백을 두고, 클라이언트는 정보가 많지만 큰 헤드라인과 넓은 요원 일러스트로 숨을 틔운다.
모서리 성향: Sharp (0px — 버튼·카드·입력 전부 직각. 2~4px 은 포커스 링·작은 칩에만)
평면성: Flat — 그림자를 쓰지 않는다(사이트 CSS 에 box-shadow 0건). 깊이는 반투명 네이비 오버레이와 면 대비로만 만든다.

> 테마 판정: 사이트·게임 클라이언트 모두 라이트/다크 토글이 없다. 클라이언트는 전부 어둡고, 사이트는 어두운 네이비 블레이드가 기본에 크림 블레이드가 대비 섹션으로 번갈아 들어간다. 그래서 theme_modes 는 dark 하나로 두고, 크림 #ECE8E1 은 "반전 섹션 색"으로 ③에 따로 둔다.

Color System

컬러 시스템 (CSS 변수)

playvalorant.com 인라인 CSS(styled-components 20만 자) 실측 기준. 출현 빈도: #0F1923 73회 · #ECE8E1 41회 · #FF4655 38회 · #CC3844 7회 · #FF6B77 6회. 500·400·600 과 중립색 대부분은 실측이고 나머지 단계는 (추정) 보간이다.

:root {
  /* Primary - VALORANT Red */
  --color-primary-50:  #FFECEE;  /* (추정) 보간 — 크림 섹션 위 옅은 강조 면 */
  --color-primary-100: #FFD6DA;  /* (추정) */
  --color-primary-200: #FFB0B7;  /* (추정) */
  --color-primary-300: #FF8A94;  /* (추정) */
  --color-primary-400: #FF6B77;  /* 실측 — 아이콘 버튼 hover, 비활성 버튼 면(레드 변형) */
  --color-primary-500: #FF4655;  /* 실측 — 기본 CTA·V 마크·활성 탭 */
  --color-primary-600: #CC3844;  /* 실측 — 레드 위 비활성 글자, pressed */
  --color-primary-700: #992A33;  /* (추정) */
  --color-primary-800: #661C22;  /* (추정) */
  --color-primary-900: #3D1116;  /* (추정) — 적팀 행 배경 */

  /* Secondary - 크림(반전 섹션·보조 CTA) */
  --color-secondary-500: #ECE8E1;  /* 실측 — Secondary CTA 면, 크림 블레이드 배경 */

  /* Neutral - 잉크 네이비 ~ 크림 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #EFECE7;  /* 실측 — 크림 hover */
  --color-neutral-100:  #ECE8E1;  /* 실측 — 기본 글자색·크림 */
  --color-neutral-200:  #CFD1D3;  /* 실측 — 크림 위 비활성 버튼 면 */
  --color-neutral-300:  #BCB9B4;  /* 실측 — 텍스트 링크 hover */
  --color-neutral-400:  #9FA3A7;  /* 실측 — 크림 위 비활성 글자 */
  --color-neutral-500:  #6F757B;  /* 실측 — 캡션 */
  --color-neutral-600:  #3F474F;  /* 실측 — 다크 위 비활성 글자 */
  --color-neutral-700:  #262F38;  /* 실측 — 다크 위 비활성 버튼 면 */
  --color-neutral-800:  #1A242E;  /* 실측 — 카드·보조 섹션 */
  --color-neutral-900:  #0F1923;  /* 실측 — 기본 캔버스 */
  --color-neutral-1000: #000000;

  /* Semantic (클라이언트 관찰, 대부분 추정) */
  --color-success-bg: #10302D;  /* (추정) 아군 팀 행 */
  --color-success-fg: #5AD8B8;  /* (추정) 아군 청록 */
  --color-warning-bg: #FFF4C1;  /* 실측 — 공지 배너 면 */
  --color-warning-fg: #FFCC00;  /* 실측 — 공지 강조 */
  --color-error-bg:   #3D1116;  /* (추정) 적팀 행 */
  --color-error-fg:   #FF4655;  /* 레드 재사용 — 적·위험 */
  --color-info-bg:    #14283A;  /* (추정) */
  --color-info-fg:    #6CB6E8;  /* (추정) */

  /* Surface (배경 위계) */
  --bg-base:     #0F1923;                 /* 실측 — 페이지·클라이언트 캔버스 */
  --bg-subtle:   #1A242E;                 /* 실측 — 구획 */
  --bg-elevated: #262F38;                 /* 실측 — 카드·타일 */
  --bg-overlay:  rgba(15, 25, 35, 0.8);   /* 실측 — 모달·영상 위 딤 */
  --bg-inverse:  #ECE8E1;                 /* 실측 — 크림 반전 블레이드 */

  /* Text 위계 */
  --text-primary:    #ECE8E1;  /* 실측 — 본문·헤드라인(순백 대신 크림) */
  --text-secondary:  #BCB9B4;  /* 실측 */
  --text-tertiary:   #9FA3A7;  /* 실측 — 캡션 */
  --text-on-primary: #ECE8E1;  /* 실측 — 레드 CTA 글자 */
  --text-disabled:   #3F474F;  /* 실측 */
  --text-inverse:    #0F1923;  /* 크림 위 글자 */

  /* Border */
  --border-default: rgba(236, 232, 225, 0.1);   /* 실측 */
  --border-subtle:  rgba(236, 232, 225, 0.05);  /* 실측 */
  --border-strong:  #3F474F;
  --border-focus:   #ECE8E1;                    /* 실측 — 4px 크림 포커스 프레임 */
}

Typography

타이포그래피

폰트 페어링:
- 영문 디스플레이: Tungsten Bold (Hoefler&Co. 상용) — 사이트 CSS Tungsten-Bold,"Riot Sans" 실측. 대문자 전용, weight 400 지정(굵기는 글꼴 자체)
- 영문 본문·UI: DIN Next W1G (Monotype 상용) — CTA·본문 전부
- 한글 디스플레이: Black Han Sans (SIL OFL) — 한국어판 헤드라인 :lang(ko-kr) 실측
- 한글 본문: Noto Sans KR (SIL OFL) — "DINNextW1G","Noto Sans KR" 폴백 실측, word-break: keep-all
- 공개 대체안: Tungsten → Bebas Neue·Oswald·Anton(사이트도 일부 언어에 Oswald·Anton 폴백), DIN Next → Barlow·D-DIN (추정)
위계 (사이트 실측. 디스플레이는 clamp() 최대값):
- Display: 128px / 400(Tungsten) / 1 / 0 — 대문자 (display1, 모바일 96px)
- H1: 64px / 400(Tungsten) / 1 / 0 — 대문자 (모바일 36~40px)
- H2: 48px / 400(Tungsten) / 1 / 0 — 대문자
- H3: 28px / 500(DIN) / 38px / 0.56px
- Body Large: 22px / 400 / 32px / 0.44px (추정 자간)
- Body: 18px / 400 / 28px / 0.36px
- Body Small: 16px / 400 / 24px / 0.32px
- Caption: 14px / 400 / 22px / 0.28px
- CTA: 18px / 500 / 28px — 대문자(한국어·일본어는 대문자 변환 해제)
규칙: 영문 헤드라인과 CTA 는 대문자, 자간은 +2% 안팎으로 조금 벌린다. 한국어는 text-transform: none.

Spacing

스페이싱

Base unit: 8px (2·4px 보조 단계)
토큰 (사이트 --spacer-variable-* 데스크톱 값 실측): ``css --space-xs: 4px; /* xxs */ --space-sm: 8px; /* xs */ --space-md: 16px; /* s */ --space-lg: 24px; /* sm */ --space-xl: 32px; /* m */ --space-2xl: 48px; /* l — 블레이드 좌우·상하 가장자리 */ --space-3xl: 64px; /* xl — 큰 블레이드 상하 */ --space-4xl: 96px; /* xxl */ `` 모바일에서는 한 단계씩 줄어든다(l 48→32px 등).
Container: 블레이드 최대 폭 1920px, 좌우 여백 --blade-edge-left/right 48px(태블릿 32px). CTA 패딩 18px 32px.

Border Radius

--radius-none: 0;      /* 기본값 — 버튼·카드·입력·이미지 전부 */
--radius-sm: 2px;      /* 실측 — 작은 칩 */
--radius-md: 4px;      /* 실측 — 포커스 프레임 */
--radius-lg: 4px;      /* 더 둥근 단계 없음 */
--radius-xl: 4px;
--radius-full: 9999px; /* 슬라이더 점·아바타 전용 (추정) */

Shadow / Elevation

그림자를 쓰지 않는다. 층은 반투명 네이비 오버레이와 1px 크림 알파 선으로 나눈다.

--shadow-none: none;
--shadow-sm: 0 0 0 1px rgba(236, 232, 225, 0.1);   /* 타일 경계 (선으로 대체) */
--shadow-md: 0 0 0 1px rgba(236, 232, 225, 0.25);  /* hover 타일 */
--shadow-lg: 0 0 0 1px #FF4655;                    /* 선택된 요원 타일 */
--shadow-xl: 0 0 0 100vmax rgba(15, 25, 35, 0.8);  /* 모달 뒤 딤 */

Iconography

스타일: Filled 단색 (마스크 이미지로 색만 바꿔 쓴다 — 사이트 CTA 아이콘 mask-size: 60% 실측)
Stroke 굵기: 면 아이콘 위주. 선형이 필요하면 2px, 끝단 직각 (추정)
모서리 처리: Square — 사선으로 자른 끝(45°·60° 컷)
추천 라이브러리: 공식 공개 세트 없음. 대체로 Lucide(stroke-linecap: square, stroke-linejoin: miter) 또는 Tabler Filled. 역할군 아이콘은 마름모·삼각 같은 기하 도형으로 단순화

Component Guide

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

Button (Primary / Secondary / Ghost / Danger) — 사이트 --cta-* 변수 구조 그대로

.val-btn { --cta-fg: #ECE8E1; --cta-bg: #FF4655; --cta-hover-fg: #0F1923; --cta-hover-bg: #ECE8E1; --cta-outline: #ECE8E1;
  display: inline-block; padding: 18px 32px; border: 0; border-radius: 0; background: var(--cta-bg); color: var(--cta-fg);
  font: 500 18px/28px 'DIN Next', 'Noto Sans KR', sans-serif; text-transform: uppercase; position: relative; cursor: pointer;
  outline: 1px solid var(--cta-outline); outline-offset: 3px;   /* ornamental 외곽선 */
  transition: color var(--duration-fast) var(--ease-in-out), background-color var(--duration-base) var(--ease-in-out); }
.val-btn:hover { background: var(--cta-hover-bg); color: var(--cta-hover-fg); }
.val-btn:active { background: var(--color-primary-600); color: var(--text-primary); }
.val-btn:focus-visible { outline: none; }
.val-btn:focus-visible::before { content: ""; position: absolute; inset: -8px; border: 4px solid #ECE8E1; border-radius: 4px; }
.val-btn:disabled { background: #262F38; color: #3F474F; outline-color: #262F38; cursor: not-allowed; }
.val-btn.is-loading { color: transparent; pointer-events: none; }
.val-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border: 2px solid rgba(236,232,225,0.3); border-top-color: #ECE8E1; animation: val-spin 0.8s linear infinite; }
@keyframes val-spin { to { transform: rotate(360deg); } }
.val-btn--secondary { --cta-fg: #0F1923; --cta-bg: #ECE8E1; --cta-hover-fg: #ECE8E1; --cta-hover-bg: #FF4655; }
.val-btn--ghost { background: transparent; outline: 0; padding: 0; font-size: 18px; color: #ECE8E1; }  /* tertiary: 글자+화살표 */
.val-btn--ghost:hover { background: transparent; color: #BCB9B4; }
.val-btn--danger { --cta-bg: #0F1923; --cta-fg: #FF4655; --cta-outline: #FF4655; --cta-hover-bg: #FF4655; --cta-hover-fg: #0F1923; }

Input

.val-input { height: 48px; padding: 0 16px; border: 0; border-radius: 0; border-bottom: 2px solid #3F474F; background: #1A242E; color: #ECE8E1; font: 400 16px/24px 'DIN Next', 'Noto Sans KR', sans-serif; }
.val-input::placeholder { color: #6F757B; }
.val-input:focus { outline: none; border-bottom-color: #ECE8E1; background: #262F38; }
.val-input.is-error { border-bottom-color: #FF4655; }
.val-input:disabled { background: #0F1923; color: #3F474F; border-bottom-color: #262F38; }

Card

.val-card { background: #1A242E; border-radius: 0; padding: 24px; color: #ECE8E1; }
.val-card:hover { box-shadow: var(--shadow-md); }
.val-card--accent { background: #FF4655; color: #0F1923; }                    /* 레드 블레이드 */
.val-card--outlined { background: transparent; box-shadow: inset 0 0 0 1px rgba(236,232,225,0.25); }
.val-card--inverse { background: #ECE8E1; color: #0F1923; }                   /* 크림 블레이드 */

Badge / Tag

.val-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 0; font: 500 12px/22px 'DIN Next', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.val-badge--solid { background: #FF4655; color: #ECE8E1; }
.val-badge--subtle { background: rgba(255,70,85,0.16); color: #FF6B77; }
.val-badge--outline { box-shadow: inset 0 0 0 1px rgba(236,232,225,0.4); color: #ECE8E1; }
.val-role::before { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }  /* 역할군 마름모 */

Navigation (사이트 상단 바 — 라이엇 바 + 사이트 메뉴)

.val-nav { height: 80px; display: flex; align-items: center; gap: 32px; padding: 0 48px; background: #0F1923; border-bottom: 1px solid rgba(236,232,225,0.1); }
.val-nav a { color: #ECE8E1; font: 500 14px/22px 'DIN Next', 'Noto Sans KR', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; position: relative; }
.val-nav a:hover { color: #BCB9B4; }
.val-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -29px; height: 3px; background: #FF4655; }
.val-nav .val-btn { padding: 10px 20px; font-size: 14px; outline-offset: 2px; }

Motion

사이트 transition 실측: 글자색 0.25s + 배경 0.3s ease-in-out 이 모든 CTA 에 쓰인다. 진행 바는 0.7s ease-out.

--duration-fast: 250ms;   /* 실측 — 글자색 전환 */
--duration-base: 300ms;   /* 실측 — 배경색·transform 전환 */
--duration-slow: 700ms;   /* 실측 — 캐러셀 진행 바 width */
--ease-out: ease-out;
--ease-in-out: ease-in-out;

클라이언트의 요원 확정·라운드 전환은 빠른 사선 와이프(면이 비스듬히 쓸고 지나가는 전환)가 특징이다 (추정: 200~400ms).

Anti-patterns

1. 버튼·카드·이미지 모서리를 둥글리지 않는다 — 모서리 0 직각이 브랜드 전체의 기본값이다. 2. 레드를 넓은 면에 여러 번 흩뿌리지 않는다 — 한 화면에서 CTA·활성 표시·레드 블레이드 하나 정도로만 쓴다. 3. 순백 #FFFFFF 을 글자·배경에 쓰지 않는다 — 밝은 쪽은 항상 바랜 크림 #ECE8E1 이다. 4. 드롭 그림자·블러 그라디언트로 깊이를 만들지 않는다 — 층은 네이비 오버레이와 1px 크림 알파 선으로만 나눈다. 5. Tungsten 을 소문자·본문에 쓰지 않는다 — 초장체는 대문자 헤드라인 전용이고, 본문·버튼은 DIN Next 가 맡는다.

VALORANT

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

출처