oh-my-design-cli 1.3.8 → 1.5.0

package/web/references/catchtable/DESIGN.md

@@ -0,0 +1,262 @@
+---
+id: catchtable
+name: CatchTable
+country: KR
+category: consumer-tech
+homepage: "https://www.catchtable.co.kr"
+primary_color: "#ff3d00"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=catchtable.co.kr&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+---
+
+# Design System Inspiration of CatchTable (캐치테이블)
+
+## 1. Visual Theme & Atmosphere
+
+CatchTable is Korea's premier restaurant-reservation platform — a service that lets diners book hotel buffets, sushi omakase, and hanwoo tasting menus with the same calm as flipping through a magazine. The atmosphere on the home surface is **editorial restraint**: a white canvas (`#FFFFFF`), deep black ink (`#000000` for body, `#222222` for titles), zero ambient shadow, and a hard-square chrome that lets food photography do the speaking. Where a delivery app would flood the screen with red CTAs and stamp-shaped discount stickers, CatchTable shows you photographs and titles — the brand orange `#FF3D00` appears exactly where you place your finger, and almost nowhere else.
+
+This isn't accidental minimalism — it's a vanilla-extract token system with **145 `:root` design tokens** discovered live (the namespace is `_11bicz7*`, a hashed identifier, so the system has no semantic names exposed publicly — only values). The token sheet defines a five-tier shadow ladder, a 33-color palette across brand / ink / surface / support-cool / semantic / overlay, a 10-step type scale that all share a **150% line-height contract**, and a radius family that defaults to `0px` on 92% of elements and softens only for rasterised thumbnails (`4px`), interactive controls (`8px`), and the primary CTA pill (`12px`). The discipline is the design.
+
+Typographically the system is Pretendard-only — no display font, no brand-display moment, no signage-typography flex. Pretendard 400 carries roughly 91% of all rendered text, with 700 reserved for section titles (`음식종류별 BEST`, `캐치 매거진`) and price emphasis. The home flow opens with a search field on `#F5F5F5` fill, a location chip row, a 25-slide Swiper hero, a "어디로 가시나요?" neighbourhood-discovery row, a horizontally scrolling "음식종류별 BEST" pillar, and an editorial "캐치 매거진" magazine module before reaching a five-tab bottom nav (홈 / 저장 / 내 주변 / 마이다이닝 / MY). The overall impression is **taste-maker, not utility** — the brand wants to feel closer to a Michelin guide than to OpenTable.
+
+**Key Characteristics:**
+- Single accent `#FF3D00` (CatchTable Orange) deployed sparingly — single-CTA discipline, not flooded brand color
+- Hard-square chrome (`0px` radius on 92% of elements) — sharpness amplifies food photography
+- Pretendard-only stack, no display font; 150% line-height applied uniformly to all ~35 typography slots
+- White-canvas + black-ink editorial restraint — depth lives in borders and surface tints, not shadows
+- Five-tier shadow ladder defined in tokens but rarely fired on the home surface
+- Mobile-first WebView shell with `status-bar-top` reservation — desktop is a porthole
+- 5-tab bottom nav as the global IA spine; 마이다이닝 is the reservation-history / loyalty hub
+- Editorial 캐치 매거진 module signals taste-maker positioning, not transactional booking
+
+## 2. Color Palette & Roles
+
+### Primary
+
+- **CatchTable Orange** (`#FF3D00`): Brand primary. Used **exclusively** on the primary CTA pill (`12px` radius, `#FFF` text, 14px/500). In a 3000-element scan of the home surface, this color appears just 4 times in text/icon contexts and once as a background fill — scarcity is the discipline.
+- **Pure White** (`#FFFFFF`): Page canvas, card surfaces. Clean, photograph-amplifying.
+- **Title Black** (`#222222`): Section sub-titles, restaurant names, neighbourhood chip labels.
+- **Pure Black** (`#000000`): Body text default, link text, nav labels. Maximum contrast.
+
+### Brand support
+
+- **Orange Soft** (`#FA8D6B`): Soft variant for pressed states and warm accents.
+- **Orange Pressed** (`#FC9086`): Active-press / hover-state surface.
+- **Orange Tint Warm** (`#FDF0EC`): Banner/notice surface fill.
+- **Orange Tint Pale** (`#FCF3F2`): Subtle alert surface fill.
+
+### Ink ladder (text & icon)
+
+- **Body Default** (`#000000`): Default body text — used everywhere by default.
+- **Title** (`#222222`): Section sub-titles, list-item titles.
+- **Body Strong** (`#424242`): Tab-bar labels at rest.
+- **Body Muted** (`#666666`): Footer policy links, secondary descriptions.
+- **Tertiary** (`#5F5F5F`): Chip-button text (e.g. 현재 위치로).
+- **Placeholder** (`#9E9E9E`): Search-input placeholder.
+- **Disabled** (`#B5B5B5`): Disabled controls.
+- **Icon Default** (`#8F8F8F`): Footer regulatory text, icon default.
+- **Icon Subtle** (`#AAAAAA`): Decorative icons.
+
+### Surface
+
+- **Canvas** (`#FFFFFF`): Page background.
+- **Subdued** (`#F9F9F9`): Footer block fill.
+- **Muted** (`#F5F5F5`): Search-input fill, chip rest state.
+- **Cool** (`#F2F5F7`): Optional cool-tinted surface.
+- **Cool Alt** (`#F0F4FA`): Info-tint surface paired with `#186ADE`.
+
+### Borders
+
+- **Hairline Alpha** (`#00000014`): Default hairline divider (8% black).
+- **Border Default** (`#E4E4E4`): Standard card and input border.
+- **Border Cool** (`#DCE3E8`): Cool-themed surface border.
+
+### Support cool-ink (rare; used in editorial / magazine module)
+
+- **Cool Ink Deep** (`#1C2B36`), **Mid** (`#3E5463`), **Soft** (`#7A909E`), **Light** (`#9FB1BD`).
+
+### Semantic
+
+- **Info** (`#186ADE`) / **Info Soft** (`#75B1FF`) / **Info Tint** (`#F0F4FA`)
+- **Success** (`#43C478`) / **Success Strong** (`#077D55`) / **Success Tint** (`#EBF7ED`)
+- **Danger** (`#D91F11`): Distinct from brand orange — semantic red is darker, redder. Don't confuse.
+- **Warning** (`#F5C518`)
+- **Premium Purple** (`#8F49DE`): Reserved for premium-tier badges (e.g. members-only restaurants).
+
+### Overlay
+
+- **Counter Dim** (`rgba(20,24,29,0.74)`): Swiper slide-counter pill.
+- **Scrim 70/60** (`rgba(0,0,0,0.7)`, `rgba(0,0,0,0.6)`): Modal/sheet backdrops.
+
+## 3. Typography Rules
+
+### Font Family
+
+- **Primary**: `Pretendard, -apple-system, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif`
+- **No brand display font.** No headline accent. Pretendard alone carries the entire system. This is a deliberate restraint — the photography is the brand.
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Notes |
+|------|------|--------|-------------|-------|
+| Section Title | 20px | 700 | 150% | `음식종류별 BEST`, `캐치 매거진`, search hero label `어디로 가시나요?` |
+| Big Section | 18px | 700 | 150% | Larger card titles |
+| Card Title | 16px | 600 | 150% | Restaurant card titles in list / detail surfaces |
+| Body Default | 14px | 400 | 150% | **Dominant** — 900 of 1149 sampled elements; nav labels, list items, body |
+| Tab Label | 14px | 400 | 150% | Bottom-tab labels |
+| Chip Label | 14px | 500 | 150% | Geo chips, filter chips |
+| Search Input | 13px | 500 | 150% | Placeholder color `#9E9E9E` |
+| Neighbourhood Chip | 13px | 500 | 150% | `청담`, `압구정·로데오` style |
+| Caption | 12px | 400 | 150% | Timestamps, secondary meta |
+| Footer Body | 11px | 400 | 150% | Regulatory disclosure text |
+| Policy Link | 11px | 500 | 150% | Footer `서비스 이용약관` row |
+| Micro Meta | 10px | 500 | 150% | Slide counter `2 / 25`, bottom-tab compact mode |
+
+### Principles
+
+- **150% line-height is a system-wide contract.** Every typography token across ~35 distinct slots ships `line-height: 150%`. Don't break this — vertical rhythm depends on it.
+- **400 dominates, 700 punctuates.** Weight distribution observed: 400 = 91%, 500 = 5%, 700 = 2%, 450 = 2%, 600 = <1%. The "weight rhythm" is binary — body or title, almost nothing in between.
+- **No tracking adjustments observed** — `letter-spacing: normal` is universal.
+- **Micro text below WCAG body floor**: 10–11px appears on slide counters and legal disclosures. For ports to Latin-script translations, elevate these to ≥12px.
+
+## 4. Radius & Shape
+
+The geometry is **hard-square by default**:
+
+| Use | Radius | Frequency |
+|---|---|---|
+| Default chrome (canvas, sections, list rows, dividers, search input) | `0px` | 1063 of 1149 sampled elements (92%) |
+| Photo thumbnail (rasterised, inside Swiper) | `4px` (also `4.05px` legacy) | 40 |
+| Interactive control (button, card pill, filter pill) | `8px` | 29 |
+| Avatar / circular icon | `50%` | 13 |
+| **Primary CTA pill** | `12px` | 3 |
+| Pill-full (rare, special-case) | `999px` | 1 |
+
+The visual signature is the **absence** of softening on the chrome. Sharp corners frame food photography the way a magazine frames a photograph. When porting: do **not** apply a global `border-radius: 8px` reset — you will lose the brand entirely.
+
+## 5. Elevation
+
+Five-tier shadow ladder defined in `:root`, but used sparingly on the home surface (only 2 distinct shadows fired across 3000+ elements observed). Depth is mostly carried by **borders + surface tints**.
+
+| Tier | Token | Recipe |
+|---|---|---|
+| xs | `--shadow-xs` | `0 1px 2px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.08)` |
+| sm | `--shadow-sm` | `0 2px 8px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.08)` |
+| drop | `--shadow-drop` | `0 2px 12px rgba(0,0,0,.12)` |
+| md | `--shadow-md` | `0 6px 12px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08), 0 0 4px rgba(0,0,0,.08)` |
+| lg / modal | `--shadow-lg` | `0 16px 20px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08), 0 0 8px rgba(0,0,0,.08)` |
+
+Reserve elevation for: floating action buttons over photography, bottom sheets, sticky search bars on scroll, modal surfaces. Don't fire on cards-at-rest — borders or hairline alpha (`#00000014`) handle separation.
+
+## 6. Spacing & Layout
+
+Observed spacing scale (px): **4 / 8 / 12 / 16 / 20 / 24 / 32 / 45 / 60**.
+
+- **Mobile-first**: WebView shell with `status-bar-top` and `status-bar-padding-top` classes — the design target is the in-app surface, not desktop.
+- **Section paddings**: `pb-45` and `mb-16` legacy utility classes — 45px bottom-of-section, 16px between modules.
+- **Horizontal scrolling lists** dominate discovery — `음식종류별 BEST` is a swipe-row of best-of pills, not a vertical grid.
+- **Bottom tab bar** owns the lowest 56–60px of the viewport.
+
+## 7. Iconography & Photography
+
+- **Photography-first**. The home flow is dominated by 4:3 and landscape food photography. Tile thumbnails carry a subtle `4px` radius — the only soft-corner surface in the system.
+- **Icons are line-style**, rendered as inline SVG; default stroke color `#8F8F8F` (icon-default), darkening to `#000` on active states.
+- **No illustration system observed** on the home surface. Magazine articles inside 캐치 매거진 carry editorial photography rather than custom illustration.
+
+## 8. Component Patterns
+
+- **Primary CTA pill**: `#FF3D00` fill, `#FFF` text, 14px/500 Pretendard, `12px` radius, ~44px tall — only one variant observed. Single-color, single-shape, single-CTA discipline.
+- **Search input**: `#F5F5F5` fill, sharp `0px` corners, 13px/500 placeholder `#9E9E9E`, inline search icon left.
+- **Chip / pill row**: 13–14px/500 ink, no fill at rest, no border at rest — separation by spacing alone (chips at `청담`, `압구정·로데오`, etc.).
+- **Geo-toggle button** (현재 위치로): 14px/500, ink `#5F5F5F`, leading geo icon — text-style action button.
+- **Best-of horizontal pill** (호텔 뷔페, 스시 오마카세): Image-led tile + 14px/400 ink label below — no card chrome, just photo + name.
+- **Bottom tab bar**: 5 tabs (홈 / 저장 / 내 주변 / 마이다이닝 / MY), icon-over-label, 14px/400 ink default; active state inferred (not captured live this pass — flagged).
+- **Swiper hero**: 25-slide carousel with counter pill (`2 / 25 / 전체`) on `rgba(20,24,29,0.74)` overlay.
+- **Footer disclosure block**: `#F9F9F9` surface, 14px/400 corporate info, 11px/500 policy links separated by `|` pipe glyphs, 11px/400 regulatory disclaimer.
+
+## 9. Accessibility & Locale
+
+- **WCAG contrast** — `#000` on `#FFF` body is 21:1 (max); `#222`/`#FFF` titles are 16.1:1; `#FF3D00`/`#FFF` CTA pill is **3.7:1** — **fails AA for normal text but passes AA for large text (18pt+/14pt bold equivalent)**. Since the CTA pill ships 14px/500 (below the bold threshold), this sits at the **borderline AA fail** for body. The system as shipped accepts the trade-off; ports must either bold the CTA label or darken the orange to `#E63600` (≈4.6:1) for strict AA.
+- **Micro text below body floor**: 10–11px slide counters and footer disclaimers are below WCAG body recommendations. Ports to Latin scripts (where stroke widths increase) should elevate to ≥12px.
+- **No landmark elements observed in initial capture** — `<main>` is present but no `<aside>` / explicit `role` annotations on the bottom tab bar. A11y debt; flag for ports.
+- **Locale convention**: Korean restaurant-reservation flows assume KR mobile carriers, KakaoTalk-style identity, and 24h reservation windows. The 마이다이닝 (My Dining) IA spine is loyalty-flavoured, not transaction-flavoured — ports should consider whether the destination market expects a "Reservations" history rather than a "Dining" hub.
+
+## 10. Voice & Microcopy
+
+**Voice shape** (analyst characterisation — not verbatim CatchTable copy): **curatorial-warm, gerund-light, second-person-implied**. The on-surface copy treats the user as a diner choosing a story, not a customer completing a transaction.
+
+Don'ts:
+- Don't write "Book now." The brand's invitation is softer.
+- Don't write "X% off" stickers across photography. The system is photograph-respectful.
+- Don't write urgency timers. Magazine, not flash sale.
+
+Voice samples (fresh OmD-original characterisations, **not** lifted from CatchTable copy — three options to triangulate the shape):
+
+1. *"오늘의 자리, 천천히 골라보세요."* — invitation framing, soft imperative.
+2. *"이번 주말, 어디서 드실래요?"* — question framing, peer-to-peer warmth.
+3. *"미식의 시작, 한 자리에서."* — slogan-shape, factual + warm.
+
+**IP guardrail**: The title-tag phrase "즐거운 미식 생활의 시작" is quoted **once** in §11 as a factual brand-narrative reference and is **not** adopted as headline copy in any sample above. The gerund-lite, curatorial register is documented as a *shape*, not reproduced.
+
+## 11. Brand Narrative (factual provenance)
+
+CatchTable is operated by **주식회사 와드** (WAD Inc.), founded by **용태순** (Yong Tae-soon, current 대표/CEO). Headquartered in **Bundang, Gyeonggi-do** (corporate disclosure observed on the home footer, 2026-05-15). The service positions itself as a premium-leaning restaurant-reservation platform with editorial inflection — the 캐치 매거진 module on the home surface signals that the brand treats discovery as guidebook-style curation, not a transactional booking listing. Title-tag positioning observed on the home surface: "캐치테이블 | 즐거운 미식 생활의 시작" (factual evidence of curatorial-warm positioning, **not** adopted as design copy).
+
+**FILL IN** (verification deferred — Crunchbase / DART access needed): founding year, total funding raised, employee headcount, investor list, monthly active users, reservation volume. These are reported in Korean trade press but were not verified at OmD attribution fidelity in this pass.
+
+## 12. Personas (illustrative — for portable design briefs only)
+
+> Personas are illustrative sketches derived from observable IA decisions (e.g. 마이다이닝 hub, 호텔 뷔페 / 스시 오마카세 / 한우 오마카세 best-of pillars). They are **not** based on internal CatchTable research and should be treated as analyst-inferred FILL-IN placeholders.
+
+- **The Anniversary Planner** — 30s couple in Seoul; books quarterly for birthdays / anniversaries; values curation over price; uses 저장 (Save) before deciding.
+- **The Omakase Regular** — 40s professional; books monthly; uses 마이다이닝 as a memory aid (where did I go, what did I eat); cares about repeat-discount tiers.
+- **The Out-of-Town Visitor** — late 20s traveller in town for 2 days; uses 내 주변 + 캐치 매거진 to discover; books 24–48h ahead; one-shot user (low return).
+
+## 13. Anti-Patterns
+
+Things CatchTable's design **avoids** — and which a port must avoid to keep the inspiration:
+
+- ❌ Flooding the surface with brand orange. Orange is a single-CTA color, not a section-fill color.
+- ❌ Softening every corner. 92% of chrome is `0px` radius — sharpness is the brand.
+- ❌ Adding a display / brand-typography font. Pretendard alone is the entire system.
+- ❌ Firing shadows on cards at rest. Depth = borders + hairline alpha.
+- ❌ "Book now" urgency rhetoric or countdown timers. Voice is curatorial, not transactional.
+- ❌ Discount stickers stamped on food photography. Photography is sovereign.
+- ❌ Breaking the 150% line-height contract. Every text slot ships 150% — don't compress.
+- ❌ Treating desktop as the primary canvas. Design ships to mobile WebView; desktop is a porthole.
+
+## 14. Motion (partially captured — flagged)
+
+Motion tokens were **not** captured in this CDP pass — only entry-fade on Swiper transitions was visibly inferred. The home Swiper uses a default Swiper.js horizontal slide (cubic-ease, ~300ms). Detailed motion tokens (durations, easings, FAB rise, sheet present, tab-switch) require a follow-up UPDATE pass with interaction-triggered capture. **Flagged**.
+
+## 15. Footer / Verification
+
+- **DS surfaces probed and result**:
+  - `design.catchtable.co.kr` → DNS no-resolve (000)
+  - `tech.catchtable.co.kr` → DNS no-resolve (000)
+  - `www.catchtable.co.kr/brand` → 302 redirect (no brand portal)
+  - `github.com/catchtable` → 200 but only 3 public repos (`prerender-java`, `claude-hud`, `brand-review-tool`); **no design-system / Storybook / tokens repo**
+  - `getdesign.md/catchtable` → "No designs found for 'catchtable'"
+  - `styles.refero.design/?q=catchtable` → no result cards
+  - **Result**: **Tier 1 official DS = authoritative NEGATIVE.** The system lives in production code as a vanilla-extract token sheet — captured here directly via CDP (145 `:root` vars on `app.catchtable.co.kr/`).
+
+- **Live capture method**: Chrome DevTools Protocol over `localhost:9222`, `websocket-client` with `suppress_origin=True`, `Runtime.evaluate` against `document.documentElement` for full `:root` custom-property enumeration plus a 3000-element `getComputedStyle` frequency analysis. Browser: Chrome/148.0.7778.97. Captured `2026-05-15T07:10Z`.
+
+- **Surfaces inspected**: `https://app.catchtable.co.kr/` (35 element samples, 145 `:root` vars, 3000-element frequency table) + `https://app.catchtable.co.kr/ct/shop/list?categoryName=서울` (4 element samples — degraded desktop shell, used to confirm primary CTA spec).
+
+- **Proof artefacts**:
+  - `assets/_reference/.live-inspect-proof.json` — 10 raw_samples (≥5 floor), full frequency proof, 33-color token map, 5-tier shadow ladder.
+  - `assets/_reference/.live-inspect-raw.json` — provenance manifest.
+  - `assets/_reference/tokens.json` — normalised colour / typography / radius / elevation / spacing.
+  - `assets/_reference/fonts.json` — Pretendard stack + weight-role map.
+  - `assets/_reference/structure.json` — IA + heading outline + tone-observed.
+  - `_research.md` — 5-tier source map + IP guardrails + flags.
+
+- **IP guardrails**: Brand assets (logo, name, primary `#FF3D00`) referenced for inspiration only. Title-tag positioning phrase quoted **once** as §11 narrative evidence; **not** reproduced as design copy. §10 voice samples are fresh OmD analyst paraphrases. Token values reproduced as factual CSS-custom-property values under analytical fair-use.
+
+- **Confidence**: **High** for tokens, type, radius, elevation, colour, IA spine, footer disclosure. **Medium** for personas (analyst-inferred from IA, not from internal research). **Low / Flagged** for motion (not captured), restaurant-detail page, list page, sell/reservation flow, MY tab — all require an UPDATE pass via mobile-emulated CDP.
+
+- **Verification date**: 2026-05-15.

package/web/references/channeltalk/DESIGN.md

@@ -0,0 +1,374 @@
+---
+id: channeltalk
+name: Channel Talk
+country: KR
+category: saas
+homepage: "https://channel.io"
+primary_color: "#4f46e5"
+logo:
+  type: github
+  slug: channel-io
+verified: "2026-05-14"
+omd: "0.1"
+ds:
+  name: Bezier
+  url: "https://github.com/channel-io/bezier-react"
+  type: system
+  description: Channel Talk's open-source design system — Bezier (MIT). Inter + Noto KR/JP type stacks, token/component/icon packages, marketing-vs-product type cliff documented.
+  og_image: "https://opengraph.githubassets.com/d5fd6836ec938de2c8399cf28b2ceabc49104fbbf86e937f9e89983f1b50d638/channel-io/bezier-react"
+---
+
+# Design System Inspiration of Channel Talk
+
+## 1. Visual Theme & Atmosphere
+
+Channel Talk's marketing surface (`channel.io`) reads as a confident **B2B customer-service messenger** that has openly bet the company on the AI-agent shift. The page operates on a near-white canvas (`#FFFFFF` body with `#FCFCFC` / `#F7F7F8` surface tints from the Bezier `grey` ramp) and uses translucent off-black (`rgba(0,0,0,0.85)`) for body text rather than a hard `#000` — a small but characteristic warmth that softens the otherwise engineering-leaning palette. The signature accent observed in product chrome is **Cobalt 400** (`#329BE7`) — Channel's primary brand blue — while the homepage AI manifesto sections drop into a dark plum-purple canvas (`rgba(25,3,49,0.898)`) that visually quarantines the AI agent story from the surrounding helpdesk product story.
+
+Typography is **Inter** (with `NotoSansKR` / `NotoSansJP` tied for fallback depending on locale). The Bezier DS product scale tops out at **36px / 44px line-height**, but the marketing surface deliberately breaks that ceiling for editorial hero/sectional moments — a 64px / 88px-lh / -1.5px-tracking `h1` and a 54px / 72px-lh `h2` give the homepage a sectional, almost manifesto rhythm that the in-product chrome never uses. Negative tracking is light by default (`-0.1px` at 15-17px, `-0.4px` at 22-36px), tightening at the marketing tier (`-1px` at 48px, `-1.5px` at hero).
+
+What distinguishes Channel Talk visually is its **radius ladder discipline**: Bezier exposes 2 / 3 / 4 / 6 / 8 / 12 / 16 / 20 / 32 / 44 / 42% — and the marketing surface uses each tier intentionally. Primary CTAs land at **18px** (pill-tending without becoming capsules), product cards at **20px**, the bottom "Experience It Yourself" CTA band at **32px**, and small chips at **8px**. Cobalt 400 hover treatment also lives in the alpha ladder — `#329BE7` solid → `#329BE73D` / `#329BE71A` for subtle ghost states — a sign of a mature semantic-token system, not improvised tinting.
+
+**Key characteristics**
+- Canvas: white (`#FFFFFF`) with grey-50 / grey-100 surface tints (`#FCFCFC` / `#F7F7F8`)
+- Body text: translucent off-black `rgba(0, 0, 0, 0.85)` (141/118 sampled elements observed live)
+- Brand accent: **Cobalt 400 `#329BE7`** (`bezier.cobalt.400` + alpha ladder 10/20/30/40)
+- AI manifesto canvas: dark plum `rgba(25, 3, 49, 0.898)` (homepage AI section only)
+- Type: **Inter** primary, Bezier KR/JP stacks fall through Noto Sans KR/JP
+- Marketing hero: 64px / weight 700 / 1.375 line-height / `-1.5px` tracking
+- Radius ladder used by tier — 8px chips → 18px CTAs → 20px cards → 32px CTA bands
+- Easing default: `cubic-bezier(0.3, 0, 0, 1)` with 150 / 300 / 450ms duration tokens
+
+## 2. Color Palette & Roles
+
+Source of truth: `github.com/channel-io/bezier-react/packages/bezier-tokens/src/global/color.json` (Bezier Design System, MIT). Each hue ships **300 / 400 / 500** weights plus a 4-step alpha ladder per weight (e.g., `300-40` = 40% alpha) — surfaced below by canonical role.
+
+### Brand / accent
+
+- **Cobalt 400** (`#329BE7`): primary brand blue — Channel Talk's product-chrome accent (live: 12 of 118 sampled elements)
+- **Cobalt 300** (`#47C8FF`): lighter cobalt — illustrative / surface highlight
+- **Cobalt 500** (`#327AB8`): cobalt heavy — pressed / hover-on-light
+- **Cobalt 400-30** (`#329BE74D`) / **400-20** (`#329BE733`) / **400-10** (`#329BE71A`): hover / focus / subtle ghost fills
+
+### Foundation neutrals (`bezier.grey`)
+
+- **Grey 50** (`#FCFCFC`): elevated surface
+- **Grey 100** (`#F7F7F8`): canvas tint
+- **Grey 200** (`#EFEFF0`): divider light
+- **Grey 500** (`#A7A7AA`): muted text
+- **Grey 700** (`#464748`): body text on light (dark theme inverse)
+- **Grey 800** (`#313234`): heading on dark
+- **Grey 850** (`#2A2B2D`): dark surface
+- **Grey 900** (`#242428`): deepest dark — also `rgb(36,36,40)` observed live as primary CTA bg
+
+### Black / White alpha (`bezier.black` / `bezier.white`)
+
+- **Black 85** (`#000000D9` = `rgba(0,0,0,0.85)`): canonical body text — 141 / 118 elements in live capture
+- **Black 60** (`rgba(0,0,0,0.6)`): secondary text
+- **Black 40 / 30 / 22 / 20 / 15 / 8 / 5 / 3**: full alpha ladder for borders, overlays, disabled tints
+- **White 100** (`#FFFFFF`): primary surface
+- **White 90 / 80 / 60 / 40 / 20 / 12 / 8 / 5**: full alpha ladder for inverted scrims, overlays
+
+### Semantic hue family (each `300 / 400 / 500` + alpha 40/30/20/10)
+
+- **Blue** 300 `#6687FF` · 400 `#5E56F0` · 500 `#4E40C9` — info / link-secondary
+- **Teal** 300 `#3CDDCD` · 400 `#0FB3A3` · 500 `#449C8A`
+- **Green** 300 `#3ACF5A` · 400 `#31A552` · 500 `#41904F` — success
+- **Olive** 300 `#CAD548` · 400 `#A0A540` · 500 `#818628`
+- **Yellow** 300 `#FDD353` · 400 `#EDBC40` · 500 `#C39E37` — caution
+- **Orange** 300 `#FFAB5C` · 400 `#F4800B` · 500 `#C57417`
+- **Red** 300 `#FF5C5C` · 400 `#E94E58` · 500 `#AC3E46` — error / destructive
+- **Pink** 300 `#EC6FD3` · 400 `#CB48AD` · 500 `#A32E92`
+- **Purple** 300 `#B570FF` · 400 `#915CE0` · 500 `#6B23B3`
+- **Navy** 300 `#647CC9` · 400 `#3A4F8D` · 500 `#333D5B`
+
+### Marketing-only theatrical colors (homepage chrome, not Bezier tokens)
+
+- **AI canvas plum** (`rgba(25,3,49,0.898)`): the "AI Handles The Routine / You Handle The Strategy" panel
+- **AI plum deep** (`rgb(60,3,54)`): nested AI panel
+- **Inbox card pink** (`rgb(250,154,240)`): single illustrative card surface — not in token source
+
+## 3. Typography Rules
+
+### Font stack (Bezier `font.family`)
+
+- **Sans (KR locale)**: `Inter, NotoSansKR, "Noto Sans KR", NotoSansJP, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif`
+- **Sans (JP locale)**: `Inter, NotoSansJP, "Noto Sans JP", NotoSansKR, "Noto Sans KR", ...same fallbacks`
+- **Mono**: `ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace`
+- **Marketing display (homepage chrome only)**: `BildV5, "BildV5 Fallback"` (observed on 1 of 118 sampled elements — not a product token)
+
+### Product-chrome scale (Bezier `typography.size`)
+
+| Token | Size | Line height | Letter spacing |
+|---|---|---|---|
+| 11 | 11px | 16px | — |
+| 12 | 12px | 16px | — |
+| 13 | 13px | 18px | — |
+| 14 | 14px | 18px | — |
+| 15 | 15px | 20px | -0.1px |
+| 16 | 16px | 24px | -0.1px |
+| 17 | 17px | 24px | -0.1px |
+| 18 | 18px | 24px | — |
+| 22 | 22px | 28px | -0.4px |
+| 24 | 24px | 32px | -0.4px |
+| 30 | 30px | 36px | -0.4px |
+| 36 | 36px | 44px | -0.4px |
+
+Weights ship at **400 (regular)** and **700 (bold)** only — Bezier does not stock a 500/600 mid-weight in product chrome.
+
+### Marketing-surface extension (homepage observed live)
+
+| Role | Size | Weight | Line height | Letter spacing |
+|---|---|---|---|---|
+| Hero h1 | 64px | 700 | 88px | -1.5px |
+| Section h2 (XL, on dark) | 54px | 600 | 72px | -1.5px |
+| Section h2 (LG) | 48px | 600 | 64px | -1px |
+| CTA label (hero) | 18px | 600 | 26px | -0.4px |
+| Section "View Details" lead | 20px | 700 | 30px | -0.5px |
+| Nav link | 15px | 400 | 21.45px | normal |
+
+Note: weights 500 / 600 appear on marketing-surface headings but NOT in the Bezier source font weights — treat marketing scale as a brand-layer extension, not a product-chrome token.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (hero CTA — marketing surface)**
+- Background: `#242428` (grey 900, live captured as `rgb(36, 36, 40)` after rendering)
+- Text: `#FFFFFF`
+- Radius: 18px
+- Padding: 8px 24px
+- Label: 18px / weight 600 / 26px line-height / -0.4px tracking
+- Height: ~64px (label area; outer wrapper drives height)
+- Use: top-of-funnel "Sign Up for Free" only
+
+**Secondary (subtle pill — section CTAs)**
+- Background: `rgba(0, 0, 0, 0.05)`
+- Text: `rgba(0, 0, 0, 0.85)`
+- Radius: 16px
+- Padding: 8px 20px
+- Label: 20px / weight 700 / 30px line-height / -0.5px tracking
+- Height: ~54px
+- Use: "View Details" mid-section pivots; not a primary action
+
+**Tertiary (text link)**
+- Background: transparent
+- Text: `rgba(0, 0, 0, 0.6)`
+- Padding: 4px 6px
+- Border: none (underline on hover inferred from convention; not directly captured)
+- Use: "Learn more" inline references
+
+**Cobalt accent (in-product, inferred from Bezier semantic tokens)**
+- Background: `#329BE7` (cobalt 400)
+- Hover: `#329BE7` over `rgba(50, 155, 231, 0.2)` ghost fill (live observed `rgba(50,155,231,0.2)` = `#329BE733` = cobalt 400-20)
+- Text: `#FFFFFF`
+- Radius: 6px or 8px (product chrome — Bezier 6/8 tokens)
+- Use: primary action inside Channel Talk's product (Inbox CTA, send-message, etc.)
+
+### Cards
+
+**AI Messenger feature card (marketing)**
+- Background: per-card theatrical color (e.g., `rgb(250, 154, 240)` pink for Inbox card)
+- Text: `rgba(0, 0, 0, 0.85)`
+- Radius: 20px
+- Padding: section-driven (no padding on outer `a` wrapper; inner content gets its own)
+- Width: 1160px on 1280-viewport (`100% - 120px` two-col gutters)
+- Height: 400px (fixed feature-card height)
+- Use: each Inbox / Meet / Team Chat / Workflow / Marketing / Docs surface gets one of these
+
+**CTA section wrapper ("Experience It Yourself")**
+- Background: transparent (content inside is the colored block)
+- Radius: 32px
+- Padding: 16px horizontal page-edge inset, vertical-driven
+- Width: ~1248px (`100% - 32px`)
+- Use: bottom-of-page conversion band
+
+### Navigation
+
+- Nav menu items: Inter 15px / weight 400 / 21.45px line-height
+- Color: `rgba(0, 0, 0, 0.85)`
+- Padding: 10px 16px 8px 0px (asymmetric — visual underline indicator on bottom only)
+- Active indicator: 2px bottom border (border-bottom captured as `0px 0px 2px` on three sides + bottom)
+- Logo link: 194×40px wrapper, fg `rgb(82, 84, 99)` (grey-tinted)
+- Menu toggle button (mobile): `#FFFFFF` bg, 8px radius
+
+### Form inputs
+
+- Source of truth: `bezier-tokens/src/semantic/input.json` (1.4KB — full input semantic surface in Bezier)
+- Surface (resting): `#FFFFFF` with `Black 8` (`rgba(0,0,0,0.05)`) border
+- Surface (focus): cobalt 400-30 (`#329BE74D`) outline ring
+- Radius: 6px or 8px (product chrome)
+- Padding (medium): vertical 8px, horizontal 12px (inferred from Bezier 6/8 sizing patterns)
+
+## 5. Layout Principles
+
+**Page max width** (marketing): ~1248px content with 16px page-edge inset on 1280 viewport.
+
+**Grid**: 2-up / 3-up product card rows; the All-in-One AI Messenger section uses a horizontal pill nav (Inbox / Meet / Team Chat / Workflow / Marketing / Docs) that pivots the entire card content in place rather than scrolling — a non-trivial interaction pattern.
+
+**Spacing scale**: Bezier doesn't publish a separate spacing token file — instead, padding values cluster at: 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 60 / 64 / 80px (inferred from observed live values; Bezier semantic tokens use these as scale stops).
+
+**Radius scale** (Bezier `radius`): 2, 3, 4, 6, 8, 12, 16, 20, 32, 44px, plus a special `42%` token for circular avatars (used by `bezier-react`'s avatar size scale where 42% gives the visual rounding without committing to a fixed px value).
+
+**Surface elevation**: see §6.
+
+## 6. Depth & Elevation
+
+Source: `bezier-tokens/src/semantic/elevation.json` (2.3KB). Bezier exposes a semantic elevation ladder rather than raw `box-shadow` tokens — every elevation is paired with a background surface so dark-theme inversion is automatic.
+
+- **Level 1** (resting card): `Grey 50` (`#FCFCFC`) surface + minimal shadow
+- **Level 2** (interactive card): `Grey 100` (`#F7F7F8`) surface + slight shadow
+- **Level 3** (popover / dropdown): subtle drop-shadow + `Black 8` border instead of pure shadow
+- **Level 4** (modal / sheet): full shadow + dimmed scrim (`Black 30` / `rgba(0,0,0,0.3)`)
+
+Live homepage chrome leans **flat** — virtually no `box-shadow` captured across 118 elements; depth is signaled via surface tint + border alpha, not shadow.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use **Inter** as the type voice — never substitute a different sans for product-chrome.
+- Apply translucent off-black (`rgba(0,0,0,0.85)`) for body text — never pure `#000`.
+- Honor the Bezier radius ladder by tier — 8px for chips, 18-20px for CTAs/cards, 32px for full-bleed CTA bands.
+- Use Cobalt 400 `#329BE7` as the **only** brand accent in product chrome.
+- Reach for the Bezier alpha ladder (`-10` / `-20` / `-30`) before inventing new tints.
+- Top out at **36px** for in-product type; reserve >36px for marketing surfaces only.
+
+### Don't
+- Don't introduce a 5th radius value between Bezier tokens (e.g., 24px is not in the ladder).
+- Don't add font weights between 400 and 700 inside product chrome — Bezier only ships those two.
+- Don't decorate with semantic hues (red / yellow / green) — they are reserved for status semantics.
+- Don't translate marketing's plum AI canvas (`rgba(25,3,49,0.898)`) into product chrome — it's a homepage-only rhetorical device.
+- Don't use `BildV5` for product UI — it's a marketing display face.
+
+## 8. Responsive Behavior
+
+Marketing breakpoints (inferred from live capture at 1280-viewport):
+- 768px / 896px / 1024px / 1280px
+
+The product app (Inbox / Meet / Team Chat) is a desktop-first SaaS surface — Bezier components ship with `size` prop (`xs / s / m / l / xl`) rather than viewport-driven responsive behavior; the host app sets size programmatically based on layout context. The marketing site does respond fluidly with a mobile MenuToggleButton (8px radius, white surface) replacing the desktop nav under ~768px.
+
+## 9. Agent Prompt Guide
+
+### Quick reference
+
+- **Canvas**: `#FFFFFF` body, `#FCFCFC` / `#F7F7F8` surface tints
+- **Body text**: `rgba(0, 0, 0, 0.85)` — *never* `#000`
+- **Brand accent**: Cobalt `#329BE7`
+- **Type**: Inter 15-16px body, 18-24px subheads (product); 48-64px marketing headlines
+- **Radius**: 8 / 18 / 20 / 32 — pick the tier, don't interpolate
+- **Easing**: `cubic-bezier(0.3, 0, 0, 1)` at 150 / 300 / 450ms
+
+### Example component prompts
+
+- *"Build a Channel-Talk-styled SaaS dashboard hero. White (#FFFFFF) canvas, Inter 64px / weight 700 / 88px line-height / -1.5px tracking, text rgba(0,0,0,0.85). Primary CTA: bg #242428, text #fff, 18px radius, padding 8px 24px, label Inter 18px / weight 600 / -0.4px tracking. Secondary CTA: bg rgba(0,0,0,0.05), text rgba(0,0,0,0.85), 16px radius."*
+- *"Build an AI-handles-routine manifesto section. Dark plum canvas rgba(25,3,49,0.898), Inter 54px / weight 600 / 72px line-height / -1.5px tracking, two-line headline with the second line color-shifted lighter as visual call-and-response."*
+- *"Build a Bezier product modal. Grey-100 (#F7F7F8) surface, 12px radius, 24px padding, Black-30 scrim, transition s (150ms) cubic-bezier(0.3, 0, 0, 1)."*
+
+## 10. Voice & Tone
+
+Channel Talk's voice is **operator-pragmatic + AI-evangelical**. The marketing surface speaks as a Korean-origin B2B platform that has staked its 2025-26 narrative on the AI-agent transition — every section pivots back to how AI takes "the routine" so human teams can take "the strategy."
+
+| Context | Tone |
+|---|---|
+| CTA | Direct verb. "Sign Up for Free" / "View Details" / "Learn more" |
+| Marketing headline | Manifesto-shaped, present-tense. "The future of customer service is AI." "AI handles the routine. You handle the strategy." |
+| Feature copy | Compound noun-led. "All Chats In One Place." "All-in-One AI Messenger." |
+| Product (Inbox) | Pragmatic operator-speak (inferred from Bezier component naming: `Inbox`, `Workflow`, `Meet` — verbs/nouns, no "experiences") |
+| Error | Specific, action-paired (e.g., "Message not sent. Retry") — convention inferred from Bezier semantic-tokens framing |
+
+**Voice samples** (live channel.io 2026-05-14, paraphrased to avoid verbatim brand copy in derivative work)
+
+- AI-era positioning: *"The future of customer service is AI."* (homepage hero) <!-- verified: channel.io/en 2026-05-14, used only as voice reference, not as derived copy -->
+- AI/human split: *"AI handles the routine. You handle the strategy."* (homepage AI section) <!-- verified: channel.io/en 2026-05-14, voice reference only -->
+- Compound positioning: *"All-in-One AI Messenger"* (section h2) <!-- verified: channel.io/en 2026-05-14 -->
+
+**IP guardrail (DO NOT verbatim).** Any DESIGN.md or downstream artifact derived from this reference must **rewrite** Channel Talk's marketing taglines in its own voice — these voice samples document *tone shape*, not borrowable copy. Fresh derivation patterns (use these as templates instead): "Routine, automated. Strategy, yours." / "AI for the queue. You for the moves that matter." / "Every channel. One inbox." — none of which appear verbatim on channel.io.
+
+**Forbidden phrases.** "AI-powered" without specifics. "Revolutionary support." "Next-generation CRM." Anything that promises AI without naming the surface (Inbox / Meet / Workflow) it operates on.
+
+## 11. Brand Narrative
+
+*Some facts in this section carry partial verification — see footer for source map.*
+
+Channel Talk is operated by **Channel Corp** (주식회사 채널코퍼레이션) [channel.io/en/team], a Korean SaaS company whose current CEO is **Choi Si-won (최시원)** [channel.io/en/team]. The company's roots trace to a Korean startup originally named **ZOYI Corp**, founded around 2014 [secondary source — confidence moderate]; the rename to Channel Corp followed the product's pivot from offline-retail analytics to the SaaS customer-messenger that ships today. Channel Talk's primary positioning through ~2023 was as "the all-in-one business messenger" competing with Intercom on smaller-team economics + Korean/Japanese market fit; the 2024-26 narrative has shifted explicitly to **AI agent infrastructure**, with the **ALF** brand surface (AI Agent for customer inquiries + AI Agent for internal work) now sharing main-nav placement with the historical Inbox/Meet/Team Chat product line [channel.io/en about page].
+
+By the metrics Channel itself publishes [channel.io/en/team footer 2026-05-14]: **234,545+ cumulative channels** deployed, **170 million monthly support messages**, **1,286,781+ AI-resolved cases** cumulative, **2,135+ companies using ALF**, **98% uptime**, **4.8/5 G2 rating**. Engineering compliance: **ISMS** (Korean information security certification), **ISO information protection certification**, AWS-hosted infrastructure.
+
+The most distinctive engineering signal is **Bezier** — Channel's openly published, MIT-licensed design system [github.com/channel-io/bezier-react] shipping `bezier-react` (274+ stars) + `BezierSwift` (native iOS) + a canonical `bezier-tokens` package that powers both. Few Korean SaaS companies maintain a public token-grade DS at this depth, and the fact that the marketing site's homepage renders against the same primitives (Inter, the cobalt accent, the radius ladder) is itself the strongest claim about Channel's product-discipline.
+
+*Unverified at time of writing*: precise founding year (2014 vs neighboring year), founder list beyond current CEO, total funding raised, exact HQ city within Korea. These are flagged in the verification footer for a follow-up UPDATE pass.
+
+## 12. Principles
+
+1. **One brand color does the lifting.** Cobalt 400 (`#329BE7`) is the only brand accent — semantic hues (red/yellow/green/blue) are reserved for status. *UI implication*: don't decorate with the semantic palette; pick cobalt or nothing.
+2. **Inter, always — Noto fills the locale gap.** Korean and Japanese product rendering must keep Inter primary; Noto Sans KR/JP only resolves CJK characters Inter doesn't ship. *UI implication*: never substitute a single Korean-first stack — break the dual-locale resolution.
+3. **Radius is a ladder, not a slider.** 2 → 3 → 4 → 6 → 8 → 12 → 16 → 20 → 32 → 44px. *UI implication*: pick the rung that matches component scale; never interpolate (24 is not a Bezier rung).
+4. **Translucent off-black over pure black.** Body text is `rgba(0,0,0,0.85)`. *UI implication*: the 0.15 alpha is a deliberate atmospheric softening — preserve it on light surfaces.
+5. **Marketing breaks the product ceiling on purpose.** 64px hero, 54-48px section headlines, 600-weight intermediate — all marketing-only. *UI implication*: never bring those tokens into product chrome; the visual cliff between marketing and product is part of the brand register.
+6. **Dark theme is paired surface + elevation.** Bezier ships dark-theme as a full semantic mirror, not a CSS filter. *UI implication*: every elevation level has a paired light/dark surface — never invert color without inverting elevation.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by publicly visible Channel Talk user segments (Korean/Japanese DTC ecommerce, K-beauty, SaaS support, mid-market team CS leads) — not real individuals.*
+
+**Yoonseo Han, 31, Seoul.** Customer-experience lead at a K-beauty DTC brand on Cafe24. Has the Channel Talk Inbox open in a pinned tab from 09:00 to 19:00 KST. Just turned ALF on for tier-1 FAQs (size exchange, shipping ETA) — measures the deflection weekly and reports it to her CCO.
+
+**Ren Takahashi, 38, Tokyo.** Support manager at a B2B SaaS that uses Channel Talk for both customer Inbox and internal Team Chat. Cares deeply about JP/KR locale resolution (Inter + Noto), keyboard-shortcut macros, and the team-handoff UX when ALF escalates to a human agent.
+
+**Jiwon Park, 27, Seongnam.** Frontline CS agent on a 5-person team. Lives in Inbox. Will defect to any tool with cleaner conversation-history scroll-back and faster `cmd+k` search. Doesn't care about the AI narrative — cares that ALF closed 60 of her 100 daily tickets so she can focus on the 40 that need her.
+
+**Sungho Lee, 44, Busan.** RevOps lead at a mid-market commerce platform. Integrated Channel Talk with Channel's Meet (Call) for outbound retention plays. Reads the weekly Workflow dashboard. Reports cost-per-resolved-ticket to the founder.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no conversations)** | Cobalt-tinted illustrated panel + single CTA "Connect a channel" (inferred from Bezier `EmptyContent` component name) |
+| **Empty (ALF disabled)** | Subtle prompt: "Turn on ALF to deflect tier-1 tickets" + single cobalt CTA |
+| **Loading (conversation history)** | Skeleton message bubbles in `Grey 100` (`#F7F7F8`) — no shimmer animation, just static surface tint (Bezier's flat depth signature) |
+| **Loading (ALF response)** | Three-dot typing indicator with ALF avatar (cobalt accent ring) |
+| **Error (sync failure)** | Top-of-Inbox banner in `Red 400` (`#E94E58`) at `red-400-20` alpha fill + "Retry" link |
+| **Error (ALF escalation needed)** | Inline below message bubble, `Yellow 400` (`#EDBC40`) status dot + "Hand off to human" CTA |
+| **Success (ticket closed)** | Subtle row tint shift to `Green 400` at `green-400-10` (`#31A5521A`) — no animation |
+| **Success (ALF resolved)** | Resolution badge on conversation row — cobalt outlined chip |
+| **Skeleton (inbox list)** | `Grey 100` row blocks, no shimmer, transition fades when real content lands |
+| **Disabled (no permission)** | Component opacity 40% + permission tooltip on hover |
+| **Loading (ALF reasoning trace)** | Per-step expandable trace: "Searching knowledge base..." → "Drafting response..." → "Awaiting confirmation" |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `transition.duration.s` | 150ms | Hover, focus, small surface tints |
+| `transition.duration.m` | 300ms | Modal open, popover, sheet |
+| `transition.duration.l` | 450ms | Page transitions, large surface swaps |
+| `transition.timing-function.default` | `cubic-bezier(0.3, 0, 0, 1)` | All transitions unless overridden |
+
+Bezier ships exactly **one** easing curve as default — `cubic-bezier(0.3, 0, 0, 1)` — a sharp-out / soft-in shape that arrives quickly then settles. No bouncy or elastic curves in the source. The marketing site's section transitions (the AI-Messenger card pivots between Inbox / Meet / Team Chat / Workflow) appear to use the `m` duration with the default ease.
+
+`prefers-reduced-motion: reduce` → durations collapse toward 0ms, transforms become opacity-only (convention; not explicitly documented in source but consistent with Bezier's accessibility framing).
+
+---
+
+**Verified:** 2026-05-14
+**Tier 1 sources (live + canonical DS):**
+- `channel.io/en` — live DOM via CDP (Chrome DevTools Protocol over localhost:9222) 2026-05-14, 118 element samples with full `getComputedStyle` capture (proof file: `assets/_reference/.live-inspect-proof.json`, 10 raw_samples retained ≥ 5-minimum threshold)
+- `github.com/channel-io/bezier-react/tree/main/packages/bezier-tokens/src/global` — canonical Bezier DS token JSON files (color 6.7KB, font 3.0KB, typography 2.7KB, radius 463B, transition 945B, opacity 66B, z-index 361B) fetched via `gh api` 2026-05-14
+- `github.com/channel-io/bezier-react/tree/main/packages/bezier-tokens/src/semantic` — elevation 2.3KB + input 1.5KB + light-theme/dark-theme directories
+
+**Tier 2 sources:** `styles.refero.design/?q=channel+talk` and `getdesign.md/channeltalk` not consulted this pass (Bezier is the Tier-1 canonical source, making Tier-2 third-party indexes redundant for this reference); to be checked in a follow-up UPDATE.
+
+**Tier 2 (Philosophy/founders):** `channel.io/en/about` (positioning + metrics + tagline), `channel.io/en/team` (CEO + metrics + compliance). Founder list beyond current CEO, exact founding year, total funding raised — *unverified* at this pass, flagged in §11 and below.
+
+**Style ref:** `intercom` (closest peer: B2B customer messaging + AI agent positioning; warm dual-product chrome ↔ cobalt-disciplined product chrome contrast deliberate).
+
+**Conflicts unresolved:**
+- Founding year: secondary sources suggest ZOYI Corp lineage ~2014; Channel-side surfaces consulted do not confirm year. Flag for UPDATE.
+- Founder list: only current CEO Choi Si-won verified from Channel surfaces; co-founders not enumerated.
+- Total funding / HQ city: not extractable from channel.io surfaces consulted; Crunchbase blocked WebFetch (403); requires Tier 2 source on UPDATE pass.
+
+**IP guardrails applied:**
+- §10 voice samples documented for tone-shape reference only, **not derivable as verbatim copy** in downstream DESIGN.md generations. Fresh derivation patterns provided inline.
+- Brand assets (logo, marketing photography) NOT mirrored into `assets/_reference/`; only computed-style raw samples + canonical Bezier DS token JSON (MIT-licensed, redistribution-permitted) captured.
+- Bezier tokens are MIT-licensed at source — reproduction in this DESIGN.md is within license terms with attribution.
+
+**Earlier mistakes reverted:** none (first capture of this reference).