oh-my-design-cli 1.3.9 → 1.5.1

package/web/references/bunjang/DESIGN.md

@@ -0,0 +1,308 @@
+---
+id: bunjang
+name: Bunjang
+display_name_kr: 번개장터
+country: KR
+category: ecommerce
+homepage: "https://m.bunjang.co.kr"
+primary_color: "#d80c18"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=bunjang.co.kr&sz=256"
+verified: "2026-05-14"
+omd: "0.1"
+---
+
+# Design System Inspiration of Bunjang (번개장터)
+
+## 1. Visual Theme & Atmosphere
+
+Bunjang is what happens when Korea's first generation of mobile flea-market sellers — high-school sneakerheads, K-pop merch traders, used-iPhone flippers — grow up and demand an interface that respects their hustle. The home screen is a near-monochrome canvas: pure white (`#ffffff`) underneath, near-black text (`#191919`), and a single accent — **Bunjang Red** (`#d80c18`) — used so sparingly that when it appears, it lands. There is no gradient sweep, no shadow ladder, no marketing flourish. Depth is signaled by 1px gray-100 (`#e5e5e5`) borders and the occasional gray-50 (`#f6f6f6`) tint behind the footer or as a placeholder for an image that hasn't loaded yet. The aesthetic is **trader-tool sober** — adjacent to Karrot's warm-orange neighborliness, but Bunjang is less "친근한 동네 이웃" and more "거래 정확하게 끝내자."
+
+The atomic unit is the **portrait product card** — a 81:100 vertical thumbnail (the brand has formalized this with `--bun-ui-aspect-ratio-vertical: 81 / 100`), price in 16px/700, title in 14px/500 gray-600, a single meta row in 12px/500 gray-300 ("19시간 전 · 지역 · 찜 N"), and a top-right heart button outlined against the photo with a 10% inner glow so it stays legible no matter what photo the seller uploaded. Cards stack 2-up on mobile, 4-up on desktop, and they go on, and on, and on — because Bunjang's defining promise is that *the next listing you scroll to could be exactly the thing you've been searching for at the price you've been waiting for.*
+
+Pretendard Variable carries 100% of UI text. There is no display face, no custom logotype anywhere outside the rounded-square app icon. The brand voice rides entirely on Pretendard's weight axis — 400 for body, 500 for secondary, 700 for price. The "Bun UI" internal design system (private; CSS custom-property prefix `--bun-ui-*` visible in production) provides the radius, aspect-ratio, z-index, and safe-area tokens; the rest is `--color-*` semantic ladders.
+
+**Key Characteristics:**
+- **Bunjang Red** (`#d80c18`) as a *scarcity asset* — exclusively reserved for the single highest-intent CTA on a surface (e.g. "앱 다운로드", "번개장터 앱으로 시작하기")
+- 81:100 portrait thumbnail as the canonical product photo (phones, sneakers, K-pop goods photograph taller than they are wide)
+- Pretendard Variable as the only typeface — three weights (400/500/700), no italics
+- No box-shadow anywhere in sampled production code — depth is borders + tints, not elevation
+- Two-tier card economics: basic card vs. service-tagged card (`안전결제` escrow chip, `감정완료` luxury-auth chip, `내폰시세` price-verified chip)
+- Mobile-first at 390px baseline — `m.bunjang.co.kr` is the canonical web surface; desktop is a courtesy
+- Korean text dominates; the system stack handles incidental Latin (prices use Hindu-Arabic numerals + "원" suffix)
+- Bottom of the home page is always an app-install rail — web is a discovery funnel, the app is the trade venue
+
+## 2. Color Palette & Roles
+
+All colors below were extracted from production `:root` CSS custom properties (`getComputedStyle(document.documentElement)`) on 2026-05-14. Token names preserve Bunjang's own naming.
+
+### Primary
+- **Bunjang Red** (`#d80c18`) — `--color-primary` / `--color-red-500`. The single brand accent. Used on `_variant-primary` buttons only. Pressed-state would darken toward `#c00b15` (interpolated; not directly observed in computed styles since no hover state was captured).
+- **Pure White** (`#ffffff`) — `--color-white`. Page background, card surface, primary CTA text color.
+- **Gray-900** (`#191919`) — `--color-gray-900`. Primary text. Used on body, all headings, prices.
+
+### Neutral Scale
+The gray ladder is unusually granular — 11 stops. This is the spine of Bunjang's depth system.
+- `--color-gray-900` `#191919` — primary text
+- `--color-gray-800` `#333333` — strong secondary text
+- `--color-gray-700` `#4c4c4c` — secondary button text
+- `--color-gray-600` `#666666` — product card title, footer text
+- `--color-gray-500` `#7f7f7f` — tertiary text
+- `--color-gray-400` `#8c8c8c` — icon-only buttons, banner-close ×
+- `--color-gray-300` `#999999` — meta / timestamp / "19시간 전"
+- `--color-gray-200` `#b2b2b2` — disabled-ish placeholder text
+- `--color-gray-150` `#cccccc` — strong dividers
+- `--color-gray-100` `#e5e5e5` — secondary button border, light dividers
+- `--color-gray-70` `#f0f0f0` — subtle row hover / pressed bg
+- `--color-gray-50` `#f6f6f6` — footer surface, image placeholder bg (also aliased as `--color-gray`)
+- `--color-gray-10` `#fafafa` — barely-tinted section divider
+
+### Semantic Tiers (4-stop ladders)
+- **Red** — `--color-red-{50: #fdf3f3, 100: #fbe7e8, 400: #f5c2c5, 500: #d80c18}` — error / destructive / primary share the 500
+- **Green** — `--color-green-{50: #edf9f7, 100: #dbf2ee, 400: #a6dfd5, 500: #00a587}` — success / available / verified-OK (note: a teal-leaning green, not a Korean-marketplace stoplight green)
+- **Blue** — `--color-blue-{50: #ebf5ff, 100: #d9ebff, 400: #b3d7ff, 500: #027aff}` — informational link / verified info (e.g. `내폰시세` price-check confirmed)
+- **Yellow** — `--color-yellow-{50: #fffbed, 100: #fff6db, 400: #ffeaa6, 500: #ffc200}` — warning / highlight
+
+### Specialty Tiers (Bunjang's distinctive contribution)
+These two ladders don't appear in generic DS palettes — they map to Bunjang's escrow + luxury-authentication services.
+- **Care** — `--color-care-{50: #FDF4E2, 100: #F8ECD3, 300: #F6E5C3, 500: #FFE1A6}` — warm amber / cream, used on the `감정완료` (authentication-complete) badge family for luxury items (watches, bags, K-pop signed goods). It's the color of "this thing is worth careful handling."
+- **Safe** — `--color-safe-{50: #EFF2FE, 100: #E1E7FE, 300: #7775E3, 400: #6458E2, 500: #5558A8}` — a cool indigo / blue-violet ladder used on `안전결제` (escrow) chips. Distinct from informational blue — it specifically signals "Bunjang holds the money until both parties confirm."
+
+### Partner Brand Colors (social login only)
+- `--color-brand-kakao` `#fae100` + `--color-brand-kakao-2` `#3c1e1e` (KakaoTalk yellow + dark text)
+- `--color-brand-naver` `#03cf5d`
+- `--color-brand-facebook` `#1877f2` (+ gradient variant `#00B2FF → #006AFF`)
+- `--color-brand-twitter` `#1da1f2`
+- `--color-brand-line` `#00b900`
+- `--color-brand-band` `#21c531`
+- `--color-brand-apple` `#000000`
+
+These are NOT brand-extension colors — they are partner-correct fills for federated login buttons only. Never reuse them in Bunjang chrome.
+
+## 3. Typography
+
+One family. Three weights. No exceptions.
+
+- **Family:** Pretendard Variable, fallback `sans-serif`. Self-hosted from a Bunjang CDN. Verified across 211/211 sampled DOM nodes — there is no second typeface anywhere in the production tree.
+- **Weights:** 400 (regular), 500 (medium), 700 (bold). No 600 stop observed; the visual hierarchy jumps directly from 500 to 700, which is why prices feel as urgent as they do — they're not just "a little heavier," they're *significantly* heavier.
+
+### Observed scale (mobile)
+| Size | Weight | Role | Color |
+|---|---|---|---|
+| 20px | 700 | Section title ("오늘의 추천 아이템") | gray-900 |
+| 18px | 700 | Subsection title / large emphasis | gray-900 |
+| 16px | 400 | Default body, CTA label | gray-900 / white-on-red |
+| 16px | 700 | **Price** | gray-900 |
+| 15px | 500 | Search input value + placeholder | gray-900 |
+| 14px | 500 | Product card title | gray-600 (`#666`) |
+| 13px | 700 | Compact emphasized chip | varies |
+| 12px | 500 | Meta / timestamp / region | gray-300 (`#999`) |
+
+Line-height is `normal` (browser default) for almost every node — Bunjang relies on padding and explicit gap, not line-height, for vertical rhythm. The single exception observed: the search input forces `line-height: 18px` to align caret height across browsers.
+
+Letter-spacing is `normal` everywhere. Hangul stems are never tightened.
+
+## 4. Iconography & Imagery
+
+- **Logo:** A 100×100 rounded-square app icon (radius 22px) with a stylized lightning-bolt mark inside a gradient field. The web wordmark sits next to it in Pretendard 700. The logo icon SVG is served from `https://static.bunjang.co.kr/web/ui/logo-icon.svg`.
+- **System icons:** Inline SVG, 20×20 default, fill via `path[fill]` attribute (not CSS) — fill `#191919` for foreground, `#8c8c8c` for muted (close ×, secondary nav).
+- **Heart (찜) button:** outlined SVG with a 10% black-fill inner shape underneath, so the white outline reads against any thumbnail. Tapped state: solid red fill (`--color-red-500`).
+- **Product thumbnails:** `loading="lazy"`, served from `media.bunjang.co.kr` with a `?crop=` parameter (e.g. `media.bunjang.co.kr/product/{id}_1_{ts}_w1200.jpg?crop=0`). Aspect ratio forced to 81/100 via inline `--aspectRatioVar__1nf1jaf0: var(--bun-ui-aspect-ratio-vertical)`.
+- **Photo aesthetic:** seller-uploaded, unedited, often well-lit-but-amateur. The platform does not impose a photography style — Bunjang's identity comes from *containing* heterogeneous photos consistently, not from prescribing what they look like.
+- **No illustrations** observed in the home-page surface. No mascot. No empty-state cartoons in sampled nodes.
+
+## 5. Spacing, Radius & Elevation
+
+### Radius
+- `4px` — small chip / banner CTA (XS variant: "앱 다운로드")
+- `6px` — primary CTA, secondary CTA, thumbnail container (`--radiusVar__1j9duj80: 6px`)
+- `20px` — soft large chip
+- `999px` — circular icon button, pill counter chip, heart button hit area
+- Token: `--bun-ui-radius-pill: 999px`
+
+### Spacing
+Bunjang does not expose a numeric spacing scale via CSS variable. Observed padding patterns:
+- CTA button padding: `12px 20px` (medium), `8px 12px` (XS), `16px 20px` (XL/full-width)
+- Footer padding: `20px 132px 40px` desktop, tighter on mobile
+- Section vertical rhythm: ~24-32px between sections
+- Card grid gap: ~12-16px
+
+### Elevation
+**There is no box-shadow on any sampled element.** Depth comes from:
+1. A 1px solid `#e5e5e5` border (secondary buttons, dividers)
+2. A `#f6f6f6` background tint (footer surface, image placeholders)
+3. A 10% black inner-fill on overlay icons (heart button against bright thumbnails)
+4. A `rgba(0,0,0,0.3)` semi-transparent bubble for overlay chips (carousel counter "1 / 10")
+
+This is a deliberate choice. Bunjang treats every surface as a *transparent ledger* — you can see what's there, you can see how it's edged, but nothing floats. The product is the photograph; the chrome shouldn't compete for elevation.
+
+## 6. Layout & Grid
+
+- Page max-width tokens: `--layout-width-xsmall: 480px` / `--layout-width-small: 640px` / `--layout-width-large: 1240px` / `--layout-width-full: 100vw`
+- Canonical viewport: **390px mobile** (m.bunjang.co.kr is mobile-first; desktop centers content within 1240px with generous side gutters)
+- Drawer width: `--drawer-width: 480px` (used for category drawer, filter sheet)
+- Product grid: 2-col mobile / 4-col desktop, card gap ~12-16px
+- iOS safe-area: `--bun-ui-sat`, `--bun-ui-sab`, `--bun-ui-sal`, `--bun-ui-sar` (top/bottom/left/right inset variables; populate at runtime on iPhone)
+
+## 7. z-index Tokens
+
+Bunjang ships explicit named z-index tokens — a sign of an internal DS that's gone through stacking-context disputes:
+- `--z-index-sticky: 100`
+- `--z-index-footer: 100`
+- `--z-index-header: 200`
+- `--z-index-widget: 500`
+- `--z-index-drawer-dim: 900`
+- `--z-index-drawer: 1000`
+- `--z-index-popup-dim: 1100`
+- `--z-index-popup: 1200`
+- `--z-index-snackbar: 1500`
+
+Snackbar (transient toast) sits on top of everything — confirms Bunjang's preference for transient, non-blocking feedback over modal interruption.
+
+## 8. Components — atomic anatomy
+
+### Button (Bun UI `_button_1cw4e_1`)
+Three variants × four sizes observed in class names: `_variant-{normal|primary|…}` × `_size-{XS|M|XL}` × `_full`.
+
+| variant | bg | text | border | radius | size XS pad | size M pad | size XL pad |
+|---|---|---|---|---|---|---|---|
+| primary | `#d80c18` | `#ffffff` | none | 4-6px | `8 12` | — | `16 20` |
+| normal (secondary) | `#ffffff` | `#4c4c4c` | `1px solid #e5e5e5` | 6px | — | `12 20` | — |
+
+### Search input (Bun UI `_input_au7f1_17`)
+- Pretendard Variable, 15px / 500 / `#191919`
+- Line-height: 18px (explicit override for caret alignment)
+- Transparent background — the rounded pill container behind it carries the visual chrome
+- Placeholder: "검색" (or contextual)
+
+### Product Card (Bun UI `_container_15rjm_1`)
+```
+┌─────────────────┐ ← Thumbnail
+│                 │    aspect-ratio: 81 / 100
+│      [img]    ♡│   border-radius: 6px
+│                 │    bg #f6f6f6 (placeholder)
+│                 │   heart absolute top-right, 40×40 hit
+└─────────────────┘    SVG fill=none stroke=#fff + 10% black inner glow
+  600,000원            ← Price: 16px / 700 / #191919
+  맥북에어 m1 2020...    ← Title: 14px / 500 / #666 (1-2 lines)
+  19시간 전 · 강남 · 찜2 ← Meta: 12px / 500 / #999
+```
+
+Card variants add a single small chip (4-6px radius) above the title row:
+- `안전결제` — `--color-safe-*` ladder, indigo
+- `감정완료` — `--color-care-*` ladder, warm amber
+- `내폰시세` — `--color-blue-*` ladder, info blue
+
+### Header
+- Hamburger (left) — 20×20 icon button
+- Logo wordmark (clickable, /)
+- Search input (center, flex-grow)
+- Right cluster: notification bell, wishlist heart, login button or avatar
+- Sticky at z-index 200
+
+### App-Download Top Banner
+- Sticky above header at z-index 100 (footer/sticky tier)
+- Logo icon 32×32 + body copy + primary CTA chip + close ×
+- Dismissible (close × on right)
+
+## 9. Microcopy & Voice (analysis-only — do not transplant phrases verbatim)
+
+Bunjang's voice on the home surface is **direct, fast, lower-case-energy even when written in Korean.** Sentences default to plain `~해요/세요` register without exclamation marks. The brand does NOT shout.
+
+Observed patterns:
+- CTAs use verbs over nouns: "앱 다운로드" not "앱 다운로드 페이지로"
+- App-install nudges acknowledge the user's autonomy: the banner copy frames the app as a *better* path, not the only path
+- Product cards never editorialize the listing — no "🔥 인기!" "마지막 1개!" — the only emphasis comes from typography weight on the price
+- Time stamps are conversational ("19시간 전") not absolute ("2026-05-13 22:14")
+- Region is abbreviated to the smallest disambiguating unit ("강남" not "서울특별시 강남구")
+
+**Voice principles when you write Bunjang-tier copy:**
+1. **Verb-first, present-tense.** Push the next action; don't describe the current state.
+2. **No urgency manufacturing.** Bunjang trusts that scarcity is already real — there are 6 million listings and the user knows it.
+3. **Specificity over enthusiasm.** "오늘 19시간 전 등록" beats "방금 막!"
+4. **The price is the headline.** Never write a marketing line above a price; let the price be loud and let the title be quiet.
+5. **Respect the trader.** Both buyer and seller are users — never copy that flatters one side at the other's expense.
+
+## 10. Patterns & Anti-Patterns
+
+### Patterns this DS encodes
+- **Restraint of red.** A single hex (`#d80c18`) marks one action per surface. Red is a finite resource; spending it on everything makes it worth nothing.
+- **Portrait product photography.** 81:100 is non-negotiable — designers crop, not photographers re-shoot.
+- **Borders, not shadows.** Every depth signal is a 1px gray-100 line or a gray-50 fill.
+- **Typography as hierarchy.** No need for color emphasis on the price when 16px/700 vs. 14px/500 already does the work.
+- **Service tiers are colorways.** Safe = indigo; Care = warm amber; Verified = info blue. Each chip teaches the user the brand's product taxonomy without copy.
+
+### Anti-patterns to refuse
+- ❌ Red used for secondary or tertiary actions (drains the primary).
+- ❌ Square or square-ish thumbnails on product cards (breaks the 81:100 vertical convention and makes phones / sneakers look stunted).
+- ❌ Box-shadow on cards or buttons (introduces an elevation language the rest of the system rejects).
+- ❌ Mixing Noto Sans KR, Apple SD Gothic Neo, or a display face — Pretendard Variable is the contract.
+- ❌ Heart icon without the 10% black inner glow — it disappears on bright photos.
+- ❌ Manufactured urgency copy ("마지막 1개!", "지금 바로!"). The platform's depth IS the urgency.
+- ❌ Modal interruptions where a snackbar would do (z-index 1500 is meant for non-blocking confirmation, not consent gates).
+
+## 11. Brand Voice Summary
+
+If Karrot is your warm neighbor who'll meet you at the playground after work, Bunjang is the high-volume trader at the next desk who already has the link, the price, and the timestamp — and who will absolutely close the deal before lunch. Both serve the same market; they serve it from completely different temperaments.
+
+Bunjang's interface earns trust by being *unsentimental about its job*. White canvas, monochrome type, one red button. The promise is not warmth — it's **velocity and price discovery**. Six million listings, sort by lowest, scroll until you find it. The internal DS (`bun-ui`) is the rails; the marketplace is the freight.
+
+## 12. When to draw inspiration from Bunjang
+
+Use this reference for:
+- C2C / P2P marketplaces where listing volume is the value proposition
+- Surfaces where the user's primary mode is **scanning many similar items** (resale, classifieds, vertical commerce)
+- Brands that need to feel **trustworthy without being formal** — escrow / payments / verification services that prove credibility through small color-coded chips rather than long copy
+- Mobile-first Korean (or East-Asian) audiences who expect Pretendard-grade type rendering and won't accept laggy infinite scroll
+- Products where **one CTA per surface** is the right discipline (vs. dashboards with five competing primaries)
+
+Do NOT use this reference for:
+- Premium / luxury brands where shadows, gradients, and curated photography are the value
+- Editorial commerce where the photo deserves a 4:5 or 1:1 art-directed frame
+- B2B SaaS where information density and table-rendering trump scrollable feeds
+
+---
+
+## Verification footer
+
+**Verified:** 2026-05-14
+**Verifier:** omd:add-reference live capture
+**URL:** https://m.bunjang.co.kr/
+
+### Tier 1 — Live inspection (PASS)
+- Chrome DevTools Protocol over `:9222` (websocket, `suppress_origin=True` to bypass `--remote-allow-origins` block)
+- Two viewport captures: desktop 1280×713 dpr=2 + mobile-emulated 390×844 dpr=3 (iPhone UA)
+- 73 CSS custom properties extracted from `:root` via `getComputedStyle(document.documentElement)`
+- 211 DOM nodes sampled across header / nav / cards / buttons / footer / price / heart / meta
+- 9 raw_samples preserved in `assets/_reference/.live-inspect-proof.json`
+- Logo SVG archived in `assets/_reference/logo-icon.svg`
+
+### Tier 1 — Official published DS (NEGATIVE — documented)
+Attempted lookups (all 2026-05-14):
+- `https://design.bunjang.co.kr/` → DNS no-resolve (000)
+- `https://bun-ui.bunjang.co.kr/` → DNS no-resolve (000)
+- `https://tech.bunjang.co.kr/` → DNS no-resolve (000)
+- `https://brand.bunjang.co.kr/` → DNS no-resolve (000)
+- `https://company.bunjang.co.kr/` → DNS no-resolve (000)
+- `https://blog.bunjang.co.kr/` → DNS no-resolve (000)
+- `https://medium.com/bunjang-tech/` → 404
+- `https://github.com/bunjang` → 200 but **org has no public repos / members / packages**
+- `https://www.npmjs.com/package/@bunjang/bun-ui` → 403 (package does not exist on public npm)
+
+**Conclusion:** Bunjang operates a real, mature internal design system branded **"Bun UI"** (proven by `--bun-ui-*` CSS-variable prefix, vanilla-extract class-name patterns `Box__7nn0kn17`, `Flex__wsrgth3`, `Typography_typography__1wr8iu13`, and explicit z-index/radius/aspect-ratio token families). However, as of the verification date there is **no public Storybook, no public npm package, no published documentation site, and no public GitHub presence**. The DS exists; the public artifacts do not.
+
+### Tier 2 — 3rd-party indexes (NEGATIVE)
+- `https://getdesign.md/bunjang` → "No designs found for 'bunjang'"
+- `https://styles.refero.design/?q=bunjang` → no entry
+
+Consistent with the KR-10 systemic finding (2026-05-13 audit): English-tooling-oriented DS directories have weak Korean coverage.
+
+### Tier 3 — Reconciliation
+This DESIGN.md reconciles Tier 1 live capture as the sole authoritative source. Token names, hex values, type scale, radius scale, z-index scale, aspect-ratio tokens, and semantic palette ladders are all taken verbatim from production CSS custom properties. Component anatomy and microcopy patterns are observed from rendered DOM and live text, then re-described in our own analytical voice — **no taglines or copy are transplanted verbatim**. Brand red, gray ladder, and Bun UI primitives are documented as a *reference* for downstream design work, not for re-use of brand assets.
+
+### IP / asset guardrails
+- Logo SVG is archived in `assets/_reference/` for verification of capture fidelity only — **not for downstream use** in derivative products
+- No taglines, no marketing copy, no product-listing text is reproduced verbatim
+- Brand color names ("Bunjang Red"), service-feature names ("안전결제", "감정완료", "내폰시세") are used descriptively for accurate documentation — they are not appropriated as product names
+- Voice analysis in §9 describes patterns observed in production; the practical guidance is original interpretation

package/web/references/cal/DESIGN.md

@@ -1,3 +1,17 @@
+---
+id: cal
+name: Cal.com
+country: US
+category: productivity
+homepage: "https://cal.com"
+primary_color: "#111827"
+logo:
+  type: simpleicons
+  slug: caldotcom
+verified: "2026-05-15"
+omd: "0.1"
+---
+
 # Design System Inspiration of Cal.com
 
 ## 1. Visual Theme & Atmosphere

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.