oh-my-design-cli 1.3.8 → 1.5.0

package/web/references/tving/DESIGN.md

@@ -0,0 +1,259 @@
+---
+id: tving
+name: TVING
+display_name_kr: TVING (티빙)
+country: KR
+category: consumer-tech
+homepage: "https://www.tving.com"
+primary_color: "#ff153c"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=tving.com&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+---
+
+# Design System Inspiration of TVING (티빙)
+
+## 1. Visual Theme & Atmosphere
+
+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:**
+- Locked dark canvas (`#000000` at `html`) — no light-mode token observed; the platform is dark-mode-only by design.
+- Single brand red (`#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.
+- **Six-category color taxonomy as `:root` primitives** — home/live/clip/VOD/movie/ad each own a CSS custom property; rare case where color IS product information architecture.
+- Top-corners-only card radius (`16.5292px 16.5292px 0 0`) for poster bleed — observed 20× on home surface alone.
+- Pretendard exclusive (SIL OFL 1.1), weight binary (400 / 700).
+- Box-shadow zero across product chrome — depth via surface contrast, not elevation.
+- Dedicated live-streaming geometry tokens (`--kbo-player-*`, `--sports-player-*`) elevate live as a peer surface to VOD.
+- Tailwind utility layer (`--tw-*`) + Emotion CSS-in-JS (`css-*` hashes) + shadcn-pattern semantic roles (`--card`, `--popover`, `--muted`) coexist — pragmatic framework stack, not opinionated DS purism.
+
+## 2. Color Palette & Roles
+
+### Brand
+- **TVING Red** (`#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.
+- **Pure Black** (`#000000`) — locked canvas at `html` and `body`. No theme alternate observed.
+- **Pure White** (`#FFFFFF`) — primary text on canvas; 519 occurrences in 3,000-node sample (dominant text color).
+
+### Surface ladder (dark)
+- `#000000` — canvas / page background (12 occurrences as bg)
+- `#2E2E2E` — elevated card / chip surface (10 occurrences as bg)
+- `#111111` / `#262626` — modal / overlay surface
+- `rgba(15,15,15,0.74)` — bottom-sheet / scrim overlay
+- `rgba(0,0,0,0.5)` — image-overlay scrim
+- `rgba(255,255,255,0.1)` / `rgba(255,255,255,0.4)` — hover/active glass tint on poster cards
+
+### Text scale (grayscale)
+- `#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×)
+
+### Category taxonomy (first-class `: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)
+
+### Border
+- `hsl(0,0%,31%)` (`--border`) — hairline divider; rendered at 1px on dark surface, near-invisible until hover.
+
+## 3. Typography
+
+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).
+
+## 4. Shape & Radius
+
+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.
+
+## 5. Spacing & Layout
+
+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).
+
+## 6. Elevation & Depth
+
+**Box-shadow returns `0 0 #0000` on every sampled product element.** Depth is constructed via surface contrast:
+
+1. Canvas `#000000`
+2. Elevated `#2E2E2E` (+46 luminance)
+3. Modal/overlay `rgba(15,15,15,0.74)`
+4. Glass tint `rgba(255,255,255,0.1)` on hover
+
+The `--tw-shadow` and `--tw-drop-shadow` Tailwind tokens exist but render as zero — design discipline, not framework limitation.
+
+## 7. Iconography & Imagery
+
+Not directly inspected this pass (authenticated browse gated). System signals:
+- Avatar / circular icons use `50%` radius (4 observed).
+- Live indicators presumed to use `--color-cate-live` (`#FF584A`) as fill.
+- Poster art is the dominant visual asset on browse surfaces; placeholder ratio inferred at 2:3 portrait (industry standard, confirmed by top-corners-only card geometry).
+
+## 8. Motion
+
+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.
+
+## 9. Component Patterns & States
+
+### Primary CTA (`프로모션 보기`, `티빙 시작하기`)
+- Background: `#FF153C` (canonical brand red)
+- Color: `#FFFFFF`
+- Radius: `12.4px` (hero) / `8px` (header inline)
+- Padding: `19.6292px 62px` (hero) — generous horizontal, allowing 4-syllable Korean CTAs without wrap
+- Font: Pretendard 18.6px / 700 (hero), 14px / 700 (header)
+- Height: 62px (hero), 32px (header)
+- Border: none
+
+### Secondary / nav links
+- Color: `#A3A3A3` default, `#FFFFFF` active
+- Size: 15.5px / 400 (passive), 700 (current)
+- No background, no border
+
+### Footer
+- Background: `#000000` (continuous with canvas)
+- Links: `#A3A3A3` 15.5px; `개인정보처리방침` rendered at weight 700 (legal-emphasis convention)
+
+### Live status
+- Presumed to use `#FF584A` (`--color-cate-live`) with circular pulse indicator (live token system suggests dedicated chrome).
+
+## 10. Voice & Tone
+
+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):**
+- Action: "지금 보세요" / "이어서 보기" / "시청 계속하기"
+- Status: "라이브 진행 중" / "오늘 공개" / "에피소드 12까지"
+- Empty / error: "잠시 후 다시 시도해주세요" / "지금은 시청할 수 없어요"
+
+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.
+
+## 11. Brand Narrative (Reported Facts Only)
+
+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.
+
+## 12. Personas (Inferred, Public-Surveys-Only)
+
+**[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:
+
+1. **K-drama primetime viewer (25-44, urban, mobile)** — watches tvN / JTBC originals same-night-as-broadcast; values episode-tracking continuity and download-for-commute.
+2. **Live sports follower (KBO baseball, 30-55, dual-screen)** — uses TVING during commute and at home for live KBO games (TVING holds KBO streaming rights); dedicated `--kbo-player-*` tokens confirm this user is a first-class design target.
+3. **Variety-show casual (teens-20s, social)** — clips surface (`--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.
+
+## 13. Anti-Patterns & Don'ts
+
+**Do NOT, when porting this design language to your own product:**
+
+1. **Don't replicate the locked dark canvas if your content is not video.** TVING's `#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.
+2. **Don't claim a six-category taxonomy without earning it.** The `--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.
+3. **Don't replicate `#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.
+4. **Don't skip Pretendard for "system font."** TVING's typography reads tight and modern because Pretendard's optical sizing differs from Apple SD Gothic Neo at the 12-18px display range. System fallback degrades the character meaningfully.
+5. **Don't apply top-corners-only radius to non-poster cards.** That geometry is meaningful only when the bottom edge is an image bleed; on a text card it reads as a CSS mistake.
+6. **Don't import the live-streaming geometry tokens as-is.** `--kbo-player-width: calc(100vw - 31.25rem)` is calibrated to TVING's specific sidebar — meaningless context elsewhere.
+
+## 14. Implementation Notes
+
+- **Stack**: Next.js (inferred from chunked CSS class hashes) + Emotion CSS-in-JS + Tailwind utility layer + shadcn/ui-pattern semantic role tokens.
+- **Token strategy**: HSL components in CSS vars (`350 100% 54.12%`) so `hsl(var(--tving) / 0.5)` produces alpha variants without separate tokens — a shadcn idiom.
+- **Live geometry**: All live-streaming player dimensions are `calc()` expressions against `100vw` minus a fixed sidebar — meaning the player resizes responsively to viewport while sidebar stays pinned.
+- **iOS PWA**: `--safe-area-inset-*` plumbed throughout — TVING ships as a native-feeling PWA on iOS in addition to native apps.
+- **Vendor coexistence**: SweetAlert2 (modal), Swiper (carousel), and the bundled shadcn-pattern primitives all run side-by-side. Pragmatic, not opinionated.
+
+## 15. Verification
+
+| § | 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) |
+
+### Tier 1 — Official Design System
+**Result: negative (documented).**
+
+Probed all canonical subdomain patterns:
+- `design.tving.com` → DNS 000
+- `brand.tving.com` → DNS 000
+- `tech.tving.com` → DNS 000
+- `tving.com/design` → 404
+- GitHub `tving` org → 1 repo (`tving.github.io`, empty)
+- CJ ENM corporate channels — no public TVING-branded DS portal
+
+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.
+
+### Tier 2 — Third-party indexes
+- `getdesign.md/q/tving` → 404
+- `styles.refero.design/?q=tving` → 200 with no result cards
+
+Consistent with the systemic Korean-coverage gap.
+
+### IP Guardrails
+- Brand assets (logo, name, `#FF153C`) referenced for analysis only — not redistributed.
+- §10 Voice samples are **fresh OmD-original analyst reconstructions** in the observed register — no verbatim TVING marketing copy or taglines reproduced.
+- §11 narrative is sourced from publicly reported facts (CJ ENM corporate history); subscriber/CEO/funding marked **[FILL IN]** where attribution fidelity is insufficient.
+- §12 personas are explicitly inferred from market positioning; authentic persona work would require TVING-internal research.
+- Content thumbnails (poster art, hero stills, episode metadata) NOT captured into product DOM or this DESIGN.md. Reference screenshot kept under fair-use commentary.
+
+### Flagged for UPDATE pass
+- Authenticated browse / VOD detail / live KBO player surfaces — gated, not inspected.
+- Motion timing (poster card hover, player chrome fade, modal entrance) — requires interaction triggers.
+- Exact live category-color usage on chrome — `--color-cate-*` system observed in tokens but per-surface application not visually verified.
+- TVING subscriber count, current CEO, latest funding, founding-year specifics for §11.
+
+---
+
+*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.*

package/web/references/uber/DESIGN.md

@@ -1,3 +1,22 @@
+---
+id: uber
+name: Uber
+country: US
+category: consumer-tech
+homepage: "https://www.uber.com"
+primary_color: "#000000"
+logo:
+  type: simpleicons
+  slug: uber
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Base Web
+  url: "https://baseweb.design"
+  type: system
+  description: Uber's React implementation of Base — a living component system.
+---
+
 # Design System Inspiration of Uber
 
 ## 1. Visual Theme & Atmosphere

package/web/references/upbit/DESIGN.md

@@ -0,0 +1,276 @@
+---
+id: upbit
+name: Upbit
+country: KR
+category: fintech
+homepage: "https://upbit.com"
+primary_color: "#093687"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=upbit.com&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+---
+
+# Upbit — DESIGN.md
+
+> Note: brand assets and tokens captured here are documented **reference-only** for design pedagogy under the OmD project. No taglines are reproduced verbatim. Voice characterization in §10–11 is a fresh synthesis of observable surface behavior and public corporate sources; it is not lifted from Upbit/Dunamu copy.
+
+## 1. Visual Theme & Atmosphere
+
+Upbit is the production crypto-asset exchange operated by **Dunamu** in Korea, launched 2017. Its product identity rests on three observable promises: regulated-grade trust, dense real-time information, and zero theatrics — the page presents the market, not the brand.
+
+The interface is unmistakably a **Korean finance UI**: tables first, hero second; red signals 상승 (up), blue signals 하락 (down) — inversion of the US convention and a hard tell for locale-correct design. There is no animated mascot, no gradient hero illustration, no "lifestyle" photography. Trust is communicated through restraint.
+
+## 2. Layout
+
+- **Desktop grid**: fixed 1400px content width; single top nav (h≈80 with primary row 36px + utility row); no sidebar on the marketing surface.
+- **Exchange surface**: information-dense grid — left market list, center chart + orderbook, right order panel — all driven by tables, not cards.
+- **Marketing surface (`/home`)**: hero band → market-summary table → product modules (스테이킹, 코인모으기) → CTA band. Light surface (`#E9ECF1` page bg, white panels).
+- **Density rule**: row height 45px on tradable lists, 30px on column headers. Vertical rhythm in 4–8px increments.
+- **Color is structural, not decorative**: tinted row backgrounds (rgba 8% alpha of rise/fall hue) communicate direction without competing with the numerals.
+
+## 3. Color tokens
+
+Captured 2026-05-14 from production via CDP `getComputedStyle`. See `assets/_reference/tokens.json`.
+
+| Token | Hex | Use |
+|---|---|---|
+| `brand.primary` | `#1375EC` | Primary brand blue — nav highlight, KRW pair tint |
+| `brand.primaryDeep` | `#0062DF` | Primary CTA bg (Login / 회원가입) |
+| `brand.primaryDarker` | `#003597` | Hero CTA bg (large) |
+| `semantic.rise` | `#DD3C44` | ▲ 상승 / 매수호가 (KR: red = up) |
+| `semantic.riseSoft` | `rgba(221,60,68,0.08)` | rise row tint |
+| `semantic.fall` | `#1375EC` | ▼ 하락 / 매도호가 (KR: blue = down) |
+| `semantic.fallSoft` | `rgba(19,117,236,0.08)` | fall row tint |
+| `text.primary` | `#1A2434` | headings, nav |
+| `text.body` | `#333333` | default body |
+| `text.muted` | `#666666` | table header / labels |
+| `text.subtle` | `#565D6A` | footer / utility |
+| `text.disabled` | `#8E929B` | placeholder |
+| `surface.body` | `#E9ECF1` | page background |
+| `surface.card` | `#FFFFFF` | card / panel |
+| `surface.tableHeader` | `#F9FAFC` | table header / alt row |
+| `surface.tableAlt` | `#F4F5F7` | alt row / segment unselected |
+| `surface.neutral` | `#EDEEF1` | secondary button |
+
+**Locale rule (critical):** if you port Upbit-tone UI to a US/EU market, swap rise/fall hues — green = up, red = down. The blue-down semantic only reads correctly to Korean / JP / TW users.
+
+## 4. Components
+
+### Button
+
+**Primary**
+- Background: `#0062DF`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 4px
+- Padding: 0 10px
+- Height: 36px
+- Font: 14px / 400 / Roboto+Noto Sans KR
+- Use: 로그인 / 회원가입 in compact nav
+
+**Primary — Hero**
+- Background: `#003597`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 4px
+- Padding: 0 12px
+- Height: 44px
+- Font: 15px / 400 / Roboto+Noto Sans KR
+- Use: 거래소 둘러보기 / 회원가입 (hero CTA)
+
+**Secondary**
+- Background: `#EDEEF1`
+- Text: `#1A2434`
+- Border: none
+- Radius: 4px
+- Padding: 0 10px
+- Height: 36px
+- Font: 14px / 400 / Roboto+Noto Sans KR
+- Use: paired secondary action (회원가입 small variant)
+
+**Tag — percent / direct-input**
+- Background: `#FFFFFF`
+- Text: `#1A2434`
+- Border: 1px solid `#BEC1C6`
+- Radius: 4px
+- Padding: 0 8px 1px
+- Height: 28px
+- Font: 12px / 400
+- Use: 10% / 25% / 50% / 100% / 직접입력 quick-fill on order form
+
+### Table cell — price / change
+
+**Rise (▲ up)**
+- Background: `rgba(221, 60, 68, 0.08)`
+- Text: `#DD3C44`
+- Border: none
+- Radius: 0
+- Padding: 4.5px 4px
+- Height: 45px
+- Font: 12px / 400
+- Use: 상승 가격 셀 / 매수호가 cell tint
+
+**Fall (▼ down)**
+- Background: `rgba(19, 117, 236, 0.08)`
+- Text: `#1375EC`
+- Border: none
+- Radius: 0
+- Padding: 4.5px 4px
+- Height: 45px
+- Font: 12px / 400
+- Use: 하락 가격 셀 / 매도호가 cell tint
+
+**Header row**
+- Background: `#F9FAFC`
+- Text: `#666666`
+- Border: bottom 1px `#EDEEF1`
+- Radius: 0
+- Padding: 0 14px
+- Height: 30px
+- Font: 11px / 400
+- Use: 체결가 / 현재가 / 전일대비 / 거래대금 column heads
+
+### Segment switch
+
+**Locale segment (KO / EN)**
+- Background (selected): `#F4F5F7`
+- Background (unselected): `#FFFFFF`
+- Text: `#333333`
+- Border: 1px solid `#BEC1C6`
+- Radius: 0
+- Padding: 0
+- Height: 28px
+- Font: 12px / 400
+- Use: top-right utility row
+
+### Navigation
+
+**Top nav**
+- Background: `#FFFFFF`
+- Text: `#1A2434`
+- Border: bottom 1px `#EDEEF1`
+- Radius: 0
+- Padding: 0 20px
+- Height: 80px (60px primary + 20px utility)
+- Font: 15px / 400 (primary items)
+- Use: persistent top-bar, fixed 1400px inner width
+
+---
+**Verified:** 2026-05-14
+**Tier 1 sources:** live CDP inspect of `https://upbit.com/home` (samples 41) + `https://upbit.com/exchange?code=CRIX.UPBIT.KRW-BTC` (samples 80). Combined 121 raw samples → `assets/_reference/raw-capture.json` + `raw-capture-exchange.json` + `.live-inspect-proof.json`.
+**Tier 2 sources:** `getdesign.md/upbit` — returned `not_found` (verified 2026-05-14, page text: "No designs found for 'upbit'"). `styles.refero.design/?q=upbit` — search interface returned no result cards for the query (verified 2026-05-14). Both 3rd-party indexes have weak Korean coverage (consistent with the 2026-05-13 KR-10 batch finding).
+**Tier 1 official DS:** **NEGATIVE result.** Attempted: `design.upbit.com` (DNS no-resolve), `upbit.com/brand` (301 → marketing), `design.dunamu.com` (DNS no-resolve), `dunamu.com` corporate site (200, no public DS surface; Naver blog `blog.naver.com/dunamupr` is PR, not design). Dunamu/Upbit do not publish an external design system as of 2026-05-14. Reconcile is therefore Tier-1-live-only.
+**Conflicts unresolved:** none.
+
+## 5. Iconography
+
+Upbit uses two icon registers:
+- **Coin marks** — third-party brand glyphs (BTC, ETH, XRP, …) shown at 16–20px monochrome or color, ID-only role; never decorative.
+- **UI glyphs** — flat 1.5px stroke, 16px frame, sparse: chevron, sort, favorite (★ outline → solid), info (i), close (×). No bespoke icon family; the visual contract is "stay invisible until needed."
+
+Direction is communicated by **▲ / ▼ glyphs colocated with hue and number**, not by separate icons.
+
+## 6. Imagery
+
+Marketing surface uses flat, isometric-leaning illustration for product modules (스테이킹, 코인모으기) — small, contained inside white card frames, not edge-to-edge hero photography. No people, no aspirational lifestyle. The hero band is type-led with a single product screenshot, not a photographic backdrop. Total imagery footprint is small; the table is the hero.
+
+## 7. Motion
+
+Restrained. Observable motion:
+- Row blink (≈150ms ease-out) when a new trade prints — opacity 0 → 1 on the rise/fall tint.
+- Hover affordance on rows: tint shift to `#F4F5F7` ≈100ms linear.
+- Nav highlight underline: 200ms ease-out.
+
+No page transitions, no parallax, no scroll-jacking. The exchange surface itself is in constant micro-motion (numbers updating) — applying additional UI motion would compete with data motion.
+
+## 8. Voice (microcopy register)
+
+Korean primary, English secondary (KO/EN segment). Sentence-final form is `~합니다 / ~해요` mixed: `~합니다` on legal/notice surfaces (지원 종료 안내), `~해요` on product features (코인모으기로 꾸준히 모아요). Numerals are unitised in Korean reading order (1,234,567원, 1,234.56 BTC).
+
+CTA labels are nouns or noun-phrases, not imperatives: 로그인 · 회원가입 · 거래소 둘러보기 · 직접입력. No exclamation marks. No emoji.
+
+## 9. Accessibility & locale
+
+- Color contrast: primary CTA `#0062DF` on white = 5.13:1 (AA pass). Rise text `#DD3C44` on `rgba(221,60,68,0.08)` background ≈ 4.9:1 (AA pass for normal text). Fall text `#1375EC` on its tint ≈ 4.6:1 (AA pass).
+- Hit targets: 28px tags are below WCAG 2.5.5 (44px target). Trading speed > accessibility floor is an explicit trade-off here.
+- Locale-critical: rise/fall hue convention. Any port outside KR/JP/TW must invert.
+- Korean font stack falls back through legacy IE-era families (Dotum / 돋움) — chain not pruned.
+
+---
+
+## 10. Voice & Tone
+
+**Voice adjectives**: 1) **Composed** — never breathless even during volatility. 2) **Procedural** — every action is named, listed, traceable. 3) **Locale-fluent** — Korean financial register, no startup slang.
+
+| Do | Don't |
+|---|---|
+| Use nouns for CTAs (`로그인`, `회원가입`) | Use imperatives or exclamation (`지금 시작하세요!`) |
+| State the rule before the action ("최소 5,000원부터 매수") | Inflate ("쉽고 빠르게!") |
+| Show the number first, label second | Lead with brand voice on a trading screen |
+| Mix `~합니다` (notice) and `~해요` (product) by surface | Use casual emoji-laden tone on price surfaces |
+
+**Voice samples** (illustrative — characterizing the observed register, not lifting copy):
+1. (notice) "5월 15일 00:00부터 해당 마켓 거래 지원이 종료됩니다." — straight declarative, time-first.
+2. (product) "코인모으기로 매주 정해진 금액만큼 자동 매수해요." — `~해요` form, mechanism named.
+3. (CTA) "거래소 둘러보기" — noun phrase, no urgency word.
+
+## 11. Brand Narrative
+
+Upbit launched in October 2017 as Dunamu's bet that crypto in Korea would need a counterpart that looked, regulated, and felt like Korean equities — not a Silicon Valley product photographed onto a black background. The product identity has held remarkably steady through three boom-bust cycles: the same blue, the same tables, the same restraint.
+
+Dunamu's broader portfolio (StockPlus for KOSPI/KOSDAQ retail, Quotation Corp for B2B market data) signals the company's center of gravity — they are a **market-data company first**, an exchange operator second. That shows in the UI: the table is canon, the brand is wallpaper.
+
+The "why now" thesis encoded in the surface: in a market famous for speculative theatrics, the **most trusted-looking** exchange wins disproportionate flow during downturns. Restraint is the strategy.
+
+## 12. Principles
+
+1. **Data is the hero; chrome is the frame.**
+   *UI implication:* table primitives outrank card primitives. Never wrap a price in a decorative container.
+
+2. **Direction must be readable at a glance — and in the local convention.**
+   *UI implication:* red = up, blue = down (KR/JP/TW). Tint at 8% alpha so hue communicates without overpowering the numeral.
+
+3. **Restraint scales with stakes.**
+   *UI implication:* the higher the order-size context, the fewer the design accents. Hero modules can carry illustration; the order panel cannot.
+
+4. **Procedural before persuasive.**
+   *UI implication:* CTAs name what happens (`로그인`, `직접입력`), they don't sell it. Reserve persuasive copy for marketing surfaces only.
+
+5. **Locale-correct or wrong.**
+   *UI implication:* Korean stack ships first, English is a sibling segment — not a translation layer. Sentence-final forms by surface (`~합니다` notice / `~해요` product) are non-negotiable.
+
+## 13. Personas
+
+> Disclaimer: archetypes synthesised from public market behavior, app-store reviews, and 2024–2025 Korean crypto-retail surveys. No internal Upbit research is referenced.
+
+- **혜진, 34, 직장인 (서울)** — KOSPI 5년 차, 2024 비트코인 ETF 뉴스 후 입문. KRW 마켓 위주, 매수는 코인모으기 자동, 매도는 수동. UI 신뢰가 입문 결정의 80%였다고 말함.
+- **준호, 28, 개발자 (판교)** — 알트 트레이더, 호가창 + 차트 +체결창 3 패널 항상 띄움. 화면 정보 밀도가 만족도의 1순위. 모바일은 보조.
+- **선영, 41, 자영업 (대구)** — 보유 종목 5개 이하, 주 1회 진입. 푸시 알림 + 알기 쉬운 표가 핵심. 신용카드 결제 없이 은행 연동만 사용.
+
+## 14. States
+
+| Category | Behavior |
+|---|---|
+| Empty | 보유 자산 없을 때: 좌측 정렬 안내문 + 입금 안내 link. 일러스트 없음. |
+| Loading | 표 셀 단위 skeleton bar (h≈14, bg `#EDEEF1`); 페이지 단위 spinner 없음. |
+| Error — recoverable | inline 빨간 helper text `#DD3C44` 12px under input; CTA disabled. |
+| Error — network | top sticky bar `#FFE7E8` bg, `#DD3C44` text, 재시도 link. |
+| Success | toast 하단 우측, h≈40, bg `#FFFFFF`, border 1px `#BEC1C6`, 3s auto-dismiss. |
+| Skeleton | row-level only on tables (price/volume cells), 1.2s shimmer linear-gradient. |
+| Disabled | `#8E929B` text on `#F4F5F7` bg; button opacity unchanged (color-only signal). |
+
+## 15. Motion & Easing
+
+- **Duration scale**: 100ms (hover) / 150ms (row blink, segment) / 200ms (nav, modal in) / 250ms (modal out).
+- **Easing**: `ease-out` for entrances and value changes; `linear` for shimmer; no spring.
+- **Motion rules**:
+  1. Never animate a price field's own typography — only its background tint.
+  2. No page transitions on the exchange surface; navigation is instantaneous (state-driven).
+  3. Modal enter from `translateY(8px) opacity:0` → identity over 200ms ease-out. Exit reverses, 250ms.
+  4. Row-print blink: tint fades in 150ms then holds for 800ms before easing out 400ms. The 800ms hold is what makes a moving market legible.
+
+---
+
+**OmD provenance:** Created 2026-05-14 via `omd:add-reference` CREATE pipeline. Tier 1 = live CDP inspect (2 surfaces, 121 raw samples). Tier 2 = both indexes attempted, both empty (documented). Tier 1 official DS = negative (documented). IP guardrails: brand assets reference-only; voice fresh characterization; no verbatim taglines. See `_research.md` for full source map.