TVING is Korea's CJ ENM-backed streaming platform, and its product surface reads like a cinema-darkened auditorium tuned for Korean primetime — the canvas is a near-absolute black (#000000 locked at the document root), text floats in pure white (#FFFFFF) with a four-step gray scale beneath it (#B3B3B3 → #A3A3A3 → #6E6E6E → #4F4F4F), and the single chromatic interruption is a saturated red the brand encodes on :root as --tving: 350 100% 54.12% — runtime hex #FF153C. This is not a sentimental crimson. It is a hot, almost neon scarlet, applied with monastic discipline: across 3,000 sampled nodes, only twelve carry that red as a background — every one of them a CTA, a brand mark, or a live-status indicator. The platform's geometric signature is a top-corners-only card radius (16.5292px 16.5292px 0 0), engineered so poster art bleeds to the bottom edge of each tile — an OTT idiom shared with Disney+ and Wavve but tuned here to a 1.033rem radius that reads slightly tighter than industry default.
What distinguishes TVING from its Korean OTT peers is the category-color taxonomy hardcoded into the design system itself. Six content categories — home (#FF1F45), live (#FF584A), clip (#FD8163), VOD (#387DFF), movie (#7D57FC), and ad (#FCC800) — are not merely page accents but first-class :root CSS custom properties (--color-cate-home, --color-cate-live, etc.). Category color IS product taxonomy: when a user navigates between live KBO baseball, VOD drama, and clip browse, the chrome itself shifts hue. Reinforcing this, the system carries dedicated live-streaming geometry tokens — --kbo-player-height, --sports-player-width, --live-tab-player-companion-banner-height — meaning live sports is not a feature retrofitted onto a VOD player but a co-equal surface paradigm. Pretendard is the exclusive typeface (100% of samples; Apple SD Gothic Neo only as system fallback), weight discipline is binary (400 body / 700 heading and CTA — no 500/600 intermediates observed), and depth is constructed through layered dark surfaces (#000 → #2E2E2E → rgba(15,15,15,0.74) overlay) rather than box-shadows, which return 0 0 #0000 on every sampled production element.
Key Characteristics:
#000000 at html) — no light-mode token observed; the platform is dark-mode-only by design.#FF153C) reserved for CTAs and brand marks; observed on 4 of 12 dominant background colors, runtime alpha-variants rgb(255,21,60) / rgb(254,21,60) / rgb(255,31,69) all collapse to one canonical token.:root primitives — home/live/clip/VOD/movie/ad each own a CSS custom property; rare case where color IS product information architecture.16.5292px 16.5292px 0 0) for poster bleed — observed 20× on home surface alone.--kbo-player-*, --sports-player-*) elevate live as a peer surface to VOD.--tw-*) + Emotion CSS-in-JS (css-* hashes) + shadcn-pattern semantic roles (--card, --popover, --muted) coexist — pragmatic framework stack, not opinionated DS purism.#FF153C, canonical --tving: 350 100% 54.12% HSL) — primary CTA backgrounds, brand mark, live-status accents. Runtime alpha-variants observed (#FE153C, #FF1F45) collapse to one logical token.#000000) — locked canvas at html and body. No theme alternate observed.#FFFFFF) — primary text on canvas; 519 occurrences in 3,000-node sample (dominant text color).#000000 — canvas / page background (12 occurrences as bg)#2E2E2E — elevated card / chip surface (10 occurrences as bg)#111111 / #262626 — modal / overlay surfacergba(15,15,15,0.74) — bottom-sheet / scrim overlayrgba(0,0,0,0.5) — image-overlay scrimrgba(255,255,255,0.1) / rgba(255,255,255,0.4) — hover/active glass tint on poster cards#FFFFFF — primary text, headlines (519×)#B3B3B3 — secondary body (169×)#A3A3A3 — tertiary metadata (24×)#D9D9D9 — disabled-bright (6×)#6E6E6E — muted hint (52×)#4F4F4F — disabled-deep (1×):root tokens)--color-cate-home: #FF1F45 (home shelf)--color-cate-live: #FF584A (live streaming)--color-cate-clip: #FD8163 (short-form clips)--color-cate-vod: #387DFF (on-demand)--color-cate-movie: #7D57FC (films)--color-cate-ad: #FCC800 (sponsored / ad indicator)hsl(0,0%,31%) (--border) — hairline divider; rendered at 1px on dark surface, near-invisible until hover.Pretendard exclusive. No display accent face. No serif. Weight binary.
| Role | Family | Size (observed) | Weight |
|---|---|---|---|
| Hero headline (h2 onboarding) | Pretendard | 43.4px | 700 |
| Body baseline | Pretendard | 12.4px | 400 |
| Primary CTA label | Pretendard | 18.6px | 700 |
| Nav CTA ('티빙 시작하기') | Pretendard | 14px | 700 |
| Footer link | Pretendard | 15.5px | 400 / 700 mixed |
| Secondary nav | Pretendard | 16px | 400 |
Stack: Pretendard, -apple-system, "system-ui", Roboto, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif
CDN: https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css (SIL OFL 1.1).
Base token --radius: 0.5rem (8px), but runtime values cluster at three points:
| Radius | Frequency | Role |
|---|---|---|
16.5292px (top-corners only) | 41× (20× as top-only) | Poster card top — image bleeds bottom edge |
12.4px | 3× | Primary hero CTA |
8px | 1× observed | Header inline CTA |
3px (and top-only) | 13× (10× top-only) | Fine chip / tag / meta-label |
50% | 4× | Avatar / circular icon |
9999px | 1× | Pill (rare) |
The signature is top-corners-only on poster cards — bottom edge sits flush against metadata so poster art reads as bleed, not framed.
Layout primitives carried as CSS custom properties on :root:
| Token | Value | Role |
|---|---|---|
--gnb-height | 70px | Global nav bar (authenticated) |
--header-height | 4rem (64px) | Marketing / onboarding header |
--bottom-tab-height | 4.167rem (≈66.7px) | Mobile bottom tab bar |
--safe-area-inset-{top,bottom,left,right} | dynamic | iOS PWA safe areas |
--content-inset-{top,bottom,right} | 0px (default) | Dynamic content insets when player docked |
--live-tab-player-height-desktop | calc((100vw - 40rem) * 0.5625) | 16:9 docked player |
--kbo-player-width | calc(100vw - 31.25rem) | KBO baseball player width (subtracts 500px sidebar) |
--sports-player-height | calc((100vw - 31.25rem) * 0.5625) | Sports player 16:9 |
Page viewport: 1280×713 (desktop test). Onboarding scroll height 4,440px (~6.22 viewports).
Box-shadow returns 0 0 #0000 on every sampled product element. Depth is constructed via surface contrast:
#000000#2E2E2E (+46 luminance)rgba(15,15,15,0.74)rgba(255,255,255,0.1) on hoverThe --tw-shadow and --tw-drop-shadow Tailwind tokens exist but render as zero — design discipline, not framework limitation.
Not directly inspected this pass (authenticated browse gated). System signals:
50% radius (4 observed).--color-cate-live (#FF584A) as fill.Not captured live (no interactions triggered during static-state inspect). System carries Swiper carousel (--swiper-theme-color: #007AFF) and SweetAlert2 (--swal2-width: 30rem) as vendor primitives. Tailwind transform tokens (--tw-translate-{x,y}, --tw-rotate, --tw-scale-{x,y}) are reset to default — motion is applied per-component, not from :root.
Flagged for UPDATE pass: hover transitions on poster cards, player chrome fade timing, modal entrance curves.
프로모션 보기, 티빙 시작하기)#FF153C (canonical brand red)#FFFFFF12.4px (hero) / 8px (header inline)19.6292px 62px (hero) — generous horizontal, allowing 4-syllable Korean CTAs without wrap#A3A3A3 default, #FFFFFF active#000000 (continuous with canvas)#A3A3A3 15.5px; 개인정보처리방침 rendered at weight 700 (legal-emphasis convention)#FF584A (--color-cate-live) with circular pulse indicator (live token system suggests dedicated chrome).TVING's product voice — observed from button labels, footer copy register, and onboarding headline structure — is concise, action-oriented, casual-polite Korean (-요/-세요). No exclamation marks observed on CTAs. No marketing superlatives within product chrome. The onboarding headline 지금 시작해보세요 is grammatically a polite imperative without emphasis — invitation, not exhortation.
The voice register sits between Netflix Korea's neutral-formal and Wavve's slightly more casual approach. Footer items use legal-register nouns (이용약관, 법적고지) without softening.
Voice samples (OmD-original analyst characterizations — NOT verbatim from TVING):
IP guardrail: TVING's actual marketing taglines (스트리밍의 모든 것, etc.) are NOT reproduced in this DESIGN.md. Voice samples above are fresh illustrative reconstructions in the observed register.
TVING is operated by TVING Inc., a subsidiary of CJ ENM (Korea's largest media conglomerate). Originally launched in 2010 as a CJ Hellovision live-TV streaming service, the platform was relaunched in 2020 as a standalone OTT after CJ ENM spun off TVING as an independent company in partnership with JTBC Studios. The platform's competitive thesis is K-content provenance — CJ ENM and JTBC together produce a large share of Korea's tvN, JTBC, and CJ-affiliated drama and entertainment IP, giving TVING first-window exclusivity on a substantial portion of Korean primetime programming. In 2022, TVING absorbed Paramount+ Korean operations under a content partnership.
Headquarters: Seoul, South Korea. Service domain: www.tving.com. The 🐴 horse emoji prefixing the browser tab title is a 2024-2025 brand-personality device tied to TVING's marketing campaigns.
[FILL IN]: Exact subscriber count, current CEO, latest funding round are not verified at OmD attribution fidelity in this pass — flagged for UPDATE if needed.
[FILL IN] — Personas below are inferred from public market positioning (CJ ENM K-content focus, live-sports investment, mobile-first chrome), not from TVING-published user research:
--kbo-player-* tokens confirm this user is a first-class design target.--color-cate-clip) suggests short-form viewing pattern for variety highlights, shared into chat apps.Authentic persona work would require access to TVING's internal research or commissioned surveys — explicitly out of scope here.
Do NOT, when porting this design language to your own product:
#000 works because poster art and video frames provide all the visual energy. A dark-mode SaaS dashboard or marketplace inherits the gloom without inheriting the cinema.--color-cate-* system works because TVING genuinely has six content surface paradigms (live sports, live TV, VOD drama, VOD movie, clips, ads). Adopting six taxonomy hues for a product with three actual surfaces produces visual noise.#FF153C verbatim. It is a CJ ENM brand color in spirit; shift via delta_set if you want a "TVING-like" warm scarlet — try #E0142E to #FF2A4D range with WCAG-checked contrast on dark surface.--kbo-player-width: calc(100vw - 31.25rem) is calibrated to TVING's specific sidebar — meaningless context elsewhere.350 100% 54.12%) so hsl(var(--tving) / 0.5) produces alpha variants without separate tokens — a shadcn idiom.calc() expressions against 100vw minus a fixed sidebar — meaning the player resizes responsively to viewport while sidebar stays pinned.--safe-area-inset-* plumbed throughout — TVING ships as a native-feeling PWA on iOS in addition to native apps.| § | Source | Date | Confidence |
|---|---|---|---|
| 1, 2, 3, 4, 5, 6, 9 | Live CDP capture via browser-harness :9222 — 13 raw_samples, 114 :root CSS custom properties, 3000-node frequency analysis | 2026-05-15 | High |
| 7, 8 | Token-level signals only (interactions not triggered in static inspect) | 2026-05-15 | Medium (flagged for UPDATE) |
| 10 | Observed button labels + footer copy register; voice samples are OmD-original analyst reconstructions | 2026-05-15 | Medium (no verbatim adoption) |
| 11 | Public corporate narrative (CJ ENM / TVING Inc. press history) | 2026-05-15 | Medium (subscriber/CEO marked FILL IN) |
| 12 | Inferred only — no TVING-published persona research consulted | 2026-05-15 | Low (explicitly flagged) |
| 13 | OmD-original analytical guidance | 2026-05-15 | High (analyst opinion) |
Result: negative (documented).
Probed all canonical subdomain patterns:
design.tving.com → DNS 000brand.tving.com → DNS 000tech.tving.com → DNS 000tving.com/design → 404tving org → 1 repo (tving.github.io, empty)The production CSS :root token set (114 custom properties) extracted via live CDP capture is the closest authoritative public artifact and is treated here as the de-facto source of truth.
getdesign.md/q/tving → 404styles.refero.design/?q=tving → 200 with no result cardsConsistent with the systemic Korean-coverage gap.
#FF153C) referenced for analysis only — not redistributed.--color-cate-* system observed in tokens but per-surface application not visually verified.Captured via omd:add-reference (CREATE mode) on 2026-05-15. See assets/_reference/ for tokens.json, structure.json, fonts.json, .live-inspect-proof.json, screenshots/, LICENSE-NOTE.md, attribution.md.
TVING is Korea's CJ ENM-backed streaming platform, and its product surface reads like a cinema-darkened auditorium tuned for Korean primetime — the canvas is a near-absolute black (#000000 locked at the document root), text floats in pure white (#FFFFFF) with a four-step gray scale beneath it (#B3B3B3 → #A3A3A3 → #6E6E6E → #4F4F4F), and the singl
Brand
Accent
Neutrals
Semantic
Type Scale
Rendered in system-ui to clearly show scale & weight.
Fonts
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Section gap | 32px | |
| Card padding | 16px | |
| Element gap | 12px |
Border Radius
| Element | Value | Preview |
|---|---|---|
| buttons | 9999px | |
| inputs | 9999px | |
| cards | 16px | |
| dialogs | 16px | |
| badges | 8px |
Elevation