KT (케이티)

짙은 남색 지니 TV 홈 — 흰 테두리 리모컨 포커스, 얇게 기운 순위 숫자, 빨간 이어보기 막대

한국통신미디어복합modern-minimal고딕comfortablesoftflat라이트한글 지원출시 2026개정 2026

Brand DNA

브랜드 DNA

브랜드명: KT (케이티, 주식회사 케이티) — 웹 KT닷컴(kt.com)·KT 다이렉트샵(shop.kt.com), 앱 마이케이티, IPTV 지니 TV(GENIE TV)
한 줄 정체성: 유무선 통신에 IPTV와 AI를 얹은 통신 회사. 지니 TV는 KT 상품 페이지가 「950만 고객이 선택한 17년 연속 1등 IPTV」라고 소개하는 KT의 거실 화면이고, 회사는 스스로를 「AX Platform Company」라 부른다.
공식 디자인 철학: CI는 「휘날리는 깃발」을 형상화해 「세계로 뻗어 나가는 글로벌 브랜드의 위상」을 나타낸다. KT Red는 열정·혁신·고객을 향한 따뜻한 감성, KT Black은 신뢰를 뜻한다(corp.kt.com 그룹 브랜드 아이덴티티). 그룹 비주얼 모티프 「Intelligent Flow」는 CI를 3D 그래픽으로 다시 해석했고, 전용 서체 KT Flow는 CI의 사각 틀과 두 선이 만나는 접점을 글자에 옮겼다.
시그니처 요소 1개: 검정 위 빨강 한 점. 로고가 검은 kt 위에 빨간 깃발 한 획을 얹듯, 화면도 검정·흰색으로 짜고 빨강은 한 곳에만 꽂는다. 다이렉트샵은 검정 버튼과 검정 선택 칩, 마이케이티는 빨강 VVIP 배지와 빨간 AI 별(✦), 지니 TV는 검푸른 화면에 빨간 재생 막대와 LIVE 글자다.

> 2026 기준 메모: shop.kt.com 은 「main2026」 디자인 토큰(tokens.css → palette·color·typography·radius·motion, 머리 주석 「main2026 design tokens - auto generated」)으로 다시 짜였다. 색은 원색 사다리(palette) → 의미 토큰(light·dark × default·agent) 두 단이고, 같은 파일에 마이케이티 전용 원색(brand-myk-red-400 #FE2E36, brand-myk-teal-300 #05B0B9)이 들어 있다. 이 문서의 웹 값은 이 토큰을 그대로 옮겼고, 지니 TV 값은 KT가 올린 앱스토어·상품 페이지 화면에서 뽑았다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 신뢰, 선명함, 몰입
무드 설명: 웹과 앱은 흰 바탕·연회색 카드 위에 검정 #191A1B 글자와 검정 버튼으로 단단하게 짜고, 빨강은 강조 버튼·가격·등급 같은 한 점에만 쓴다. 청록은 안내·AI 보조색이다. 지니 TV는 #071118 검푸른 바탕에 포스터와 키 아트가 색을 다 가져가고, 화면 장치는 흰 글자·반투명 알약·흰 포커스 테두리만 남겨 영상에 빠져들게 한다.
비주얼 스타일: 모던 미니멀 (AI 영역만 빨강→청록 그라디언트)
밀도(Density): Comfortable — 상품 카드에 가격·혜택·태그가 촘촘하지만 카드 안쪽 24px, 카드 사이 20px 여백을 지킨다. TV는 3m 거리에서 읽히도록 글자를 키우고 한 줄에 타일 5~6개만 둔다.
모서리 성향: Soft (버튼 6px·태그 4px·TV 타일 6px 기본, 회색 카드 16px·큰 카드 20px, 칩은 알약)
평면성: Flat — main2026 의 elevation 토큰은 그림자가 아니라 면 색 단계(surface-primary-01~04)다. 그림자는 떠 있는 버튼과 TV 포커스에만.

Color System

컬러 시스템 (CSS 변수)

브랜드 색은 corp.kt.com 「KT 브랜드 컬러」 표, UI 색은 shop.kt.com main2026 토큰(palette/Value.css, color/light/default.css) 값이다. 지니 TV 값은 공식 화면 실측(관찰)이다.

빨강은 공식 자료마다 값이 다르다 — 브랜드 컬러 표의 KT CI RED #FE2E36(RGB 254·46·54), CI 소개 표의 #ED2024(같은 칸에 RGB 255·0·0 이 함께 적혀 서로 맞지 않는다), PC 머리띠 로고 SVG 의 #FF0000, 모바일 머리띠 로고 SVG 의 #E20613. 화면의 강조 채움은 이들과 다른 red-500 #E0282F 다.

:root {
  /* Primary — UI 빨강 (main2026 red 사다리) */
  --color-primary-50:  #FCE9E9;  /* red-100 — 오류·할인 태그 바탕 */
  --color-primary-100: #FADBDC;  /* red-150 — 오류 버튼 누름 바탕 */
  --color-primary-200: #F2A6A9;  /* red-200 */
  --color-primary-300: #EC797D;  /* red-300 — 다크 위 오류 아이콘 */
  --color-primary-400: #E54D53;  /* red-400 — 다크 테마 강조 채움 */
  --color-primary-500: #E0282F;  /* red-500 — fill-accent-primary, 오류 글자, VVIP */
  --color-primary-600: #BB1B21;  /* red-600 — 강조 hover, 할인 태그 글자 */
  --color-primary-700: #8A1418;  /* red-700 — 강조 pressed */
  --color-primary-800: #64100F;  /* (추정) 700·800 사이 보간 */
  --color-primary-900: #3E090B;  /* red-800 */

  /* 브랜드 컬러 표 (corp.kt.com) */
  --kt-ci-red: #FE2E36;      /* KT CI RED — 로고, AI 그라디언트 시작 */
  --kt-black: #000000;       /* KT BLACK — 로고 글자 */
  --kt-dark-gray: #4C4C4E;
  --kt-light-gray: #A2A4A3;
  --kt-purple: #AA50FF;      /* 매칭 컬러 */
  --kt-blue: #00A5FF;
  --kt-teal: #00BEAC;

  /* Secondary — 청록 (안내·AI 보조) */
  --color-secondary-500: #00A39B;  /* teal-400 — 안내 테두리, AI 그라디언트 끝 */
  --color-secondary-600: #007F7F;  /* teal-500 — 안내 글자·채움 */
  --kt-ai-teal: #05B0B9;           /* brand-myk-teal-300 */

  /* Neutral — gray 사다리 (main2026, 25~900 중 발췌) */
  --color-neutral-0:    #FFFFFF;   /* background-default */
  --color-neutral-25:   #F8F9FA;   /* surface-primary-02 — 회색 카드 */
  --color-neutral-50:   #F3F4F6;   /* 상점 메인 바탕, 비활성 칩 */
  --color-neutral-100:  #E9EAEE;   /* fill-secondary, 기본 태그 */
  --color-neutral-150:  #D5D8DD;   /* border-subtle — 구분선 */
  --color-neutral-300:  #ADB1B9;   /* 비활성 글자 */
  --color-neutral-400:  #8B8F97;   /* border-primary — 입력 테두리 */
  --color-neutral-500:  #6F737B;   /* text-tertiary */
  --color-neutral-600:  #55585D;   /* text-secondary */
  --color-neutral-700:  #3D3F43;   /* fill-primary pressed */
  --color-neutral-750:  #313235;   /* fill-primary hover */
  --color-neutral-800:  #232425;   /* 다크 테마 바탕 */
  --color-neutral-900:  #191A1B;   /* text-primary, fill-primary(검정 버튼) */
  --color-neutral-1000: #131415;   /* static-black */

  /* Semantic (tag-status·feedback 토큰) */
  --color-success-bg: #E5F5E1;  /* green-100 */
  --color-success-fg: #136600;  /* green-600 */
  --color-warning-bg: #FFF3E5;  /* yellow-100 */
  --color-warning-fg: #8F4800;  /* yellow-600 */
  --color-error-bg:   #FCE9E9;  /* red-100 */
  --color-error-fg:   #E0282F;  /* red-500 */
  --color-info-bg:    #E1F5F5;  /* teal-100 */
  --color-info-fg:    #007F7F;  /* teal-500 */

  /* Surface */
  --bg-base:     #FFFFFF;                 /* 페이지 */
  --bg-subtle:   #F3F4F6;                 /* 상점 메인(data-color-variant="agent") */
  --bg-elevated: #F8F9FA;                 /* 회색 카드 */
  --bg-overlay:  rgba(19, 20, 21, 0.65);  /* dim-overlay */

  /* Text */
  --text-primary:    #191A1B;
  --text-secondary:  #55585D;
  --text-tertiary:   #6F737B;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #ADB1B9;
  --text-link:       #005CCC;  /* link-primary (blue-500) */

  /* Border */
  --border-default: #8B8F97;  /* 입력·버튼 테두리 */
  --border-subtle:  #D5D8DD;
  --border-strong:  #191A1B;  /* pressed */
  --border-focus:   #191A1B;  /* border-primary-focused */

  /* AI 영역 그라디언트 (gradient-ai-solid 다섯 점, 위치는 추정) */
  --gradient-ai: linear-gradient(90deg, #FE2E36 0%, #FB6977 28%, #FBB3A2 50%, #05B0B9 78%, #00A39B 100%);

  /* 지니 TV 화면 — TV 다크 고정, 공식 화면 실측 */
  --gtv-bg:      #071118;  /* 홈 바탕 */
  --gtv-surface: #1A1F24;  /* 칩·버튼 면 */
  --gtv-line:    #373D42;  /* 칩 테두리 */
  --gtv-text:    #FFFFFF;
  --gtv-text-2:  #C3C9D4;  /* 메타 글자 (추정) */
  --gtv-violet:  #6733FF;  /* GENIE TV 워드마크 보라 */
  --gtv-ai:      #5A5CEF;  /* AI 에이전트 구슬 */
  --gtv-ai-bar:  linear-gradient(90deg, #585FB5, #5A64C5);  /* AI 질문 막대 */
  --gtv-teal:    #00D2DA;  /* 강조 줄 제목 「신작 업데이트」 */
  --gtv-live:    #EB3126;  /* 재생 진행 막대 (지니 TV 모바일 플레이어 실측) */
  --gtv-focus:   #FFFFFF;  /* 리모컨 포커스 테두리 */
}

다크 테마([data-theme="dark"], color/dark/default.css)도 같은 토큰 묶음에 있다 — 바탕 gray-800 #232425, 글자 흰색, 검정 버튼은 gray-100 #E9EAEE 로 뒤집히고, 강조 채움은 한 단계 밝은 red-400 #E54D53, 포커스 테두리는 gray-50 #F3F4F6 이다. 이 문서는 라이트를 기본으로 기록한다.

Typography

타이포그래피

폰트 페어링:
- 브랜드(한글·영문): KT Flow (KT 전용 서체, 공개 배포 없음) — CI의 사각 틀·접점에서 따온 기하학 구조, 좌상단·우하단의 둥근 디테일. kt.com 은 웹에서 KTFlow-Bold·KTFlow-Medium 두 굵기를 쓴다.
- UI·본문: Pretendard (SIL OFL 1.1) — main2026 --font-family-pretendard. 대체는 Apple SD Gothic Neo·맑은 고딕.
- 지니 TV: TV 화면 서체는 공개 자료가 없다 — 굵은 산세리프(추정 본고딕 계열). 순위 숫자만 가늘고 기울게 쓴다.
위계 (크기는 main2026 토큰, 행간 기본 148%. 굵기 토큰은 400·500·600·700 네 가지이고, 제목 700 은 kt.com 의 KTFlow-Bold 제목 실측 기준):
- Display: 60px / 700 / 148% / 0 — display-xlarge, KT Flow
- H1: 40px / 700 / 148% / 0 — display-large, KT Flow
- H2: 32px / 700 / 48px / 0 — heading-large, kt.com 섹션 제목 .section-area-tit 실측
- H3: 24px / 700 / 148% / 0 — heading-medium
- Body Large: 16px / 400 / 158% / 0 — body-large, 읽기 행간 reading-2
- Body: 15px / 400 / 148% / 0 — body-medium
- Body Small: 14px / 400 / 148% / 0 — body-small
- Caption: 12px / 500(추정) / 148% / 0 — caption-medium (가장 작은 라벨은 10px label-xsmall)
TV 크기 (1920×1080 기준, 추정): 상단 메뉴 28px·600, 줄 제목 30px·700, 메타 22px, 키 아트 제목은 작품마다 손글씨·명조 레터링.

Spacing

스페이싱

Base unit: 4px (2·6·10px 반 단계 있음) — main2026 --space-2·4·6·8·10·12·16·20·24·32·40·48·56·64·80
토큰:

:root {
  --space-xs: 4px;    /* space-4 */
  --space-sm: 8px;    /* space-8 */
  --space-md: 16px;   /* space-16 */
  --space-lg: 24px;   /* space-24 — 회색 카드 안쪽 */
  --space-xl: 32px;   /* space-32 */
  --space-2xl: 48px;  /* space-48 */
  --space-3xl: 64px;  /* space-64 */
}

Container: 데스크톱 --margin-platform 24px·--gutter-platform 20px, 모바일 20px·12px. 모바일 상점 메인은 360px 화면을 기준으로 간격을 vw 비례로 바꾼다(--base-px: 0.277778vw). TV는 좌우 안전 여백 약 5%(추정).

Border Radius

main2026 radius/Mode 토큰: 0·2·4·6·8·12·16·20·circle(999px).

:root {
  --radius-none: 0;
  --radius-sm: 4px;      /* radius-4 — 태그·작은 버튼 */
  --radius-md: 6px;      /* radius-6 — 상품 카드 주문 버튼, TV 타일 */
  --radius-lg: 16px;     /* radius-16 — 회색 카드 */
  --radius-xl: 20px;     /* 메인 큰 카드 (main26.css 최다 값) */
  --radius-full: 999px;  /* radius-circle — 칩·TV 알약 */
}

Shadow / Elevation

main2026 은 고도를 그림자 대신 면 색으로 나눈다(elevation-level-0~4 = background → surface-primary-01~04). 그림자 재료는 --y-2·4·8, --blur-2·4·8·12, --opacity-black-* 뿐이라 아래는 그 조합이다.

:root {
  --shadow-none: none;                                      /* 카드 기본 — 면 색으로 구분 */
  --shadow-sm: 0 2px 4px rgba(19, 20, 21, 0.10);            /* 실측 main26.css — 캐러셀 둥근 화살표(48px) */
  --shadow-md: 0 4px 8px rgba(19, 20, 21, 0.20);            /* 실측 corp 슬라이더 화살표 */
  --shadow-lg: 0 8px 12px rgba(19, 20, 21, 0.15);           /* (추정) 바텀시트·팝업 */
  --shadow-xl: 0 8px 12px rgba(19, 20, 21, 0.25);           /* (추정) 모달 */
  --shadow-tv-focus: 0 10px 24px rgba(0, 0, 0, 0.6);        /* (추정) TV 포커스 타일 */
}

Iconography

스타일: Outline. kt.com 머리띠 아이콘(검색·장바구니·마이·전체 메뉴)은 32px 판에 2px 굵기 선을 채운 도형으로 그렸다(색 #191A1B). AI 표시는 가운데가 진하고 끝이 분홍으로 번지는 빨간 네 갈래 별(✦)이고, AI 추천 문구는 회색→빨강→회색으로 번지는 글자 그라디언트(gradient-ai-text)를 쓴다(마이케이티 「AI에게 물어보세요」).
Stroke 굵기: 2px (32px 기준), TV는 흰 선 2px
모서리 처리: Round — 선 끝·꺾임 모두 둥글게
크기 토큰: 12·16·20·24·32·48·56px (--icon-size-xxsmall~xxlarge)
추천 라이브러리: Lucide (2px 둥근 선이 KT GNB 아이콘과 가장 가깝다)
로고: 웹 GNB 로고 gnb-ktlogo.svg 는 32×32 판에 검정 kt + 빨강(#FF0000) 깃발 두 경로다. 지니 TV 화면 왼쪽 위에는 KT 로고 대신 흰 「GENIE TV」 워드마크가 놓인다.

Component Guide

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

Button — 웹 기본은 검정 채움(fill-primary), 빨강은 강조 하나. 다이렉트샵 상품 카드 주문 버튼(.btn-order) 실측 = 높이 40px·radius 6px·13px/500, 선택된 분류 칩도 같은 검정 채움. TV 버튼은 흰 알약.

.kt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-md); font: 600 16px/1 Pretendard, 'Apple SD Gothic Neo', sans-serif; cursor: pointer; transition: background-color var(--duration-base) var(--ease-in-out); }
.kt-btn--sm { height: 40px; padding: 0 var(--space-md); font-size: 13px; font-weight: 500; }
.kt-btn--primary { background: var(--color-neutral-900); color: var(--text-on-primary); }
.kt-btn--primary:hover { background: var(--color-neutral-750); }
.kt-btn--primary:active { background: var(--color-neutral-700); }
.kt-btn--accent { background: var(--color-primary-500); color: #FFFFFF; }
.kt-btn--accent:hover { background: var(--color-primary-600); }
.kt-btn--accent:active { background: var(--color-primary-700); }
.kt-btn--secondary { background: var(--color-neutral-100); color: var(--text-primary); }
.kt-btn--secondary:hover { background: var(--color-neutral-150); }
.kt-btn--ghost { background: transparent; color: var(--text-primary); }
.kt-btn--ghost:hover { background: var(--color-neutral-50); }
.kt-btn--danger { background: transparent; color: var(--color-error-fg); box-shadow: inset 0 0 0 1px var(--color-error-fg); }
.kt-btn--danger:hover { background: var(--color-error-bg); }
.kt-btn:disabled { background: var(--color-neutral-50); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }
.kt-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.kt-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 50%; animation: kt-spin var(--duration-loop) linear infinite; }
@keyframes kt-spin { to { transform: rotate(360deg); } }

.gtv-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px 0 18px; border: 0; border-radius: var(--radius-full); background: #FFFFFF; color: #0B0F14; font: 800 17px/1 Pretendard, sans-serif; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.gtv-btn--icon { width: 44px; padding: 0; justify-content: center; background: rgba(255,255,255,.16); color: var(--gtv-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.gtv-btn.is-focused, .gtv-btn:focus-visible { outline: none; transform: scale(1.06); box-shadow: 0 0 0 3px var(--gtv-bg), 0 0 0 5px var(--gtv-focus); }

Input — 테두리 gray-400(border-primary), 포커스하면 검정 2겹(border-primary-focused). AI 입력창만 빨강→청록 테두리(토큰 gradient-ai-border, 적용 모양은 추정).

.kt-input { width: 100%; height: 48px; padding: 0 var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-base); color: var(--text-primary); font: 400 16px/1.48 Pretendard, sans-serif; }
.kt-input::placeholder { color: var(--text-tertiary); }
.kt-input:hover { border-color: var(--color-neutral-600); }
.kt-input:focus { outline: none; border-color: var(--border-focus); box-shadow: inset 0 0 0 1px var(--border-focus); }
.kt-input.is-error { border-color: var(--color-error-fg); }
.kt-input:disabled { background: var(--color-neutral-50); border-color: var(--color-neutral-150); color: var(--text-disabled); }
.kt-ai-input { height: 52px; padding: 0 var(--space-md); border: 2px solid transparent; border-radius: var(--radius-full); background: linear-gradient(var(--bg-base), var(--bg-base)) padding-box, var(--gradient-ai) border-box; }

Card — 웹은 그림자 없는 회색 카드(surface-primary-02 + 16px + 안쪽 24px 실측). TV 타일은 6px, 포커스는 흰 테두리 + 1.06배.

.kt-card { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--bg-elevated); }
.kt-card--product { padding: 0; border-radius: 8px; overflow: hidden; }
.kt-card--outlined { background: var(--bg-base); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.gtv-tile { position: relative; flex: none; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--gtv-surface); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.gtv-tile.is-focused { transform: scale(1.06); box-shadow: 0 0 0 3px var(--gtv-focus), var(--shadow-tv-focus); z-index: 1; }
.gtv-rank { position: absolute; left: 8px; top: -6px; font: italic 300 64px/1 'Segoe UI', Pretendard, sans-serif; color: #FFFFFF; text-shadow: 0 2px 6px rgba(0,0,0,.55); letter-spacing: 0; }
.gtv-progress { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.gtv-progress > span { display: block; height: 100%; background: var(--gtv-live); }

Badge / Tag — 범주 태그(tag-category)는 4px·12px/600, 멤버십 등급(tag-membership)은 채움. TV 칩은 반투명 알약.

.kt-tag { display: inline-flex; align-items: center; height: 22px; padding: 2px 6px; border-radius: var(--radius-sm); font: 600 12px/1 Pretendard, sans-serif; }
.kt-tag--basic { background: var(--color-neutral-100); color: var(--color-neutral-600); }   /* Subtle */
.kt-tag--sale { background: var(--color-primary-50); color: var(--color-primary-600); }
.kt-tag--new { background: #EFEBFF; color: #4C00E5; }        /* purple-100 / 600 */
.kt-tag--recommend { background: #E1F5F5; color: #005E66; }  /* teal-100 / 600 */
.kt-tag--vvip { background: var(--color-primary-500); color: #FFFFFF; }   /* Solid */
.kt-tag--vip { background: var(--color-neutral-900); color: #FFFFFF; }
.kt-tag--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--text-secondary); }
.gtv-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: var(--radius-full); background: rgba(255,255,255,.12); color: var(--gtv-text); font: 800 14px/1 Pretendard, sans-serif; }
.gtv-chip--live { color: #FF3B33; }   /* 빨간 LIVE 글자 (관찰 근사) */
.gtv-age { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #EE8A1A; color: #FFFFFF; font: 800 12px/1 Pretendard, sans-serif; }  /* 15세 (색은 추정) */
.gtv-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); color: #FFFFFF; font: 700 12px/1 Pretendard, sans-serif; }

Navigation — kt.com GNB(로고 · 다이렉트샵·상품서비스·혜택·고객지원·마이 · 요고)와 지니 TV 상단 메뉴(검색·마이메뉴·모든G·스토어·월정액·혜택+). TV 의 현재 탭은 짙은 남색 알약에 옅은 흰 테두리(공식 화면 관찰).

.kt-gnb { display: flex; align-items: center; gap: 36px; height: 56px; padding: 0 var(--space-xl); background: var(--bg-base); }  /* kt.com 화면 실측 근사 */
.kt-gnb__item { font: 600 18px/1 Pretendard, sans-serif; color: var(--text-primary); text-decoration: none; }
.kt-gnb__item:hover { color: var(--color-neutral-600); }
.kt-gnb__item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-neutral-900); }
.gtv-nav { display: flex; align-items: center; gap: 28px; font: 600 19px/1 Pretendard, sans-serif; color: rgba(255,255,255,.86); white-space: nowrap; }
.gtv-nav__item.is-current { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--radius-full); background: rgba(0,16,33,.78); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); color: #FFFFFF; font-weight: 800; }
.gtv-row__title { margin: 0 0 14px; font: 700 22px/1.3 Pretendard, sans-serif; color: var(--gtv-text); }
.gtv-row__title--accent { color: var(--gtv-teal); }

Motion

main2026 motion/Mode 토큰. 원본 파일은 곡선 값을 따옴표로 감싸("cubic-bezier(...)") CSS 에 바로 넣으면 무시된다 — 아래처럼 따옴표를 뺀다.

:root {
  --duration-fast: 100ms;   /* motion-duration-short — 색 바뀜 */
  --duration-base: 200ms;   /* motion-duration-medium — 버튼·TV 포커스 */
  --duration-slow: 300ms;   /* motion-duration-long — 시트·탭 */
  --duration-loop: 1000ms;  /* motion-duration-loop — 로딩 반복 */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.5, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.5, 1);
}

TV 포커스는 리모컨 방향키를 누를 때마다 옮겨 간 타일이 살짝 커지며 흰 테두리가 붙는다(공식 화면 관찰. 200ms·1.06배는 추정). prefers-reduced-motion 에서는 크기 변화 없이 테두리만 바꾼다.

Anti-patterns

1. 빨강을 기본 버튼이나 넓은 면에 쓰지 않는다 — 채움 버튼 기본은 검정 #191A1B 이고, 빨강 #E0282F 는 강조 버튼 하나·가격·VVIP·진행 막대처럼 한 점에만. 2. 로고 빨강과 UI 빨강을 섞지 않는다 — 로고 파일의 빨강·브랜드 표 #FE2E36 은 로고와 AI 그라디언트에, UI 상태·강조에는 red 사다리(#E0282F)만. 3. 지니 TV 화면에 흰 바탕·회색 카드를 끌어오지 않는다 — TV는 #071118 다크 고정이고, 색은 포스터와 키 아트가 낸다. 4. 리모컨 포커스를 색 면이나 옅은 그림자만으로 표시하지 않는다 — 3m 밖에서도 보이도록 흰 테두리와 1.06배 확대를 함께 준다. 5. AI 그라디언트(빨강 #FE2E36 → 분홍 → 청록 #05B0B9)를 일반 버튼·배경·제목에 쓰지 않는다 — AI 입력창 테두리·AI 표시(✦)·AI 추천 문구에만 쓴다.

Sources

출처

KT (케이티) 이름과 로고는 각 권리자의 상표입니다.