oh-my-design-cli 1.3.8 → 1.5.0

package/web/references/classum/DESIGN.md

@@ -0,0 +1,217 @@
+---
+id: classum
+name: Classum
+display_name_kr: Classum (클라썸)
+country: KR
+category: education
+homepage: "https://www.classum.com"
+primary_color: "#ff4438"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=classum.com&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+---
+
+# Design System Inspiration of Classum (클라썸)
+
+## 1. Visual Theme & Atmosphere
+
+Classum is a Seoul-built EdTech platform for universities and corporate L&D, and its marketing surface treats the screen the way a good classroom treats a whiteboard — quiet canvas, structured columns, one bright signal where attention must land. The body background sits at a barely-tinted lavender-gray (`#F6F6F9`), a half-step off pure white that makes elevation read without shadows, and the dominant card radius is a generous 20px that softens the otherwise dense, multi-section Webflow page composition. Type is set entirely in Pretendard Variable, the open-source Korean optical-sized sans by orioncactus, served from jsDelivr and antialiased aggressively — a deliberate choice that signals "we trust the open Korean web stack" rather than commissioning custom display type.
+
+The brand's color discipline is unusually tight for an EdTech site: long stretches of neutral gray-violet surface punctuated by a single high-saturation red (`#FF4438`) that lives almost exclusively on primary CTAs ("도입 문의" / 도입 문의 = "request adoption inquiry"). Accent blues, violets and teals appear inside marketing illustrations and feature pills, but the page's interactive grammar is fundamentally two-color: muted lavender for everything, red when you should click. The result reads as B2B-confident without being corporate-cold — closer to a research lab's recruiting page than a typical SaaS hero.
+
+Elevation is almost entirely flat. The CTA observed live had `box-shadow: none`, cards lean on radius and background contrast instead, and the only depth signal is the lavender canvas pulling cards forward without a stated z-axis. For a product whose actual application is a discussion-heavy LMS (Q&A threads, instructor responses, AI chatbot suggestions), the marketing site's flatness is a thesis: comprehension comes from layout clarity, not from chrome.
+
+**Key Characteristics:**
+- Lavender-gray canvas (`#F6F6F9`) instead of pure white — softens dense B2B information density
+- Single saturated brand red (`#FF4438`) reserved strictly for primary CTAs
+- Pretendard Variable as the only typeface — open-source Korean sans, jsDelivr-delivered
+- 20px dominant card radius, 8px CTA radius, 999px pills for status chips
+- Flat shadow language — `box-shadow: none` on primary CTA, depth through bg contrast
+- 14px / 1.43 lh body baseline — tight Korean reading rhythm, not Western 16px default
+- Webflow-built site, Channel Talk live chat — typical Korean B2B SaaS stack
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Signal Red** (`#FF4438`): Primary CTA fill only — "도입 문의", "소개서 받기" booking CTAs. Never used on body type, never on decorative blocks.
+- **Ink** (`#232334`): Primary heading color on light surfaces — a dark navy-charcoal, not true black. Warmer than `#000`.
+- **White** (`#FFFFFF`): Card and modal surface — used wherever content needs to lift off the lavender canvas.
+
+### Surface & Background
+- **Canvas** (`#F6F6F9`): Page background — the lavender-gray that defines the whole site mood.
+- **Surface** (`#FFFFFF`): Card / modal / sticky-nav surface.
+- **Subtle** (`#F0F2F8`): Tertiary fills, alternating rows, soft section dividers.
+- **Hero Dark** (`#06080D`–`#121215`): Inverted hero/footer band — the rare dark surface where white type takes over.
+
+### Neutrals & Text
+- **Ink** (`#232334`): Primary headings and body emphasis.
+- **Slate** (`#49495A`): Secondary body text — descriptions, captions.
+- **Mute** (`#666B80`): Tertiary labels, metadata, breadcrumb.
+- **Subtle** (`#758696`): Disabled / inert text.
+- **Border** (`#B5B9C8`): Card borders, divider rules.
+
+### Accent (illustration-only)
+- **Sky** (`#0A84FF`) / **Cobalt** (`#243CE7`): Hyperlinks and product-mark accents.
+- **Violet** (`#A567E4`): AI-feature illustration accents.
+- **Teal** (`#00C3D0`): Skill/competency data visualization.
+- **Green** (`#009A5A` / `#34C759`): Success states, growth metrics in case-study charts.
+
+### Semantic
+- Classum does not expose a formal semantic palette publicly; on the marketing surface, semantic color appears almost exclusively inside illustration assets. Inferred semantic mapping below for downstream use.
+- **Success**: `#34C759` (matches iOS system green — likely intentional given Pretendard's Apple-adjacent stack).
+- **Warning**: `#FFB020` (illustration-derived).
+- **Danger**: `#FF4438` (same as brand red — implies CTAs and destructive actions share visual weight; downstream consumers should split this).
+
+### Gradient System
+- The site avoids type gradients entirely. Visual gradients appear only in hero illustration backgrounds (blue-violet washes behind product mockups). Functional UI is fully flat.
+
+## 3. Typography Rules
+
+### Font Family
+- **All roles**: `Pretendard Variable` — single typeface across hero, body, nav, CTA, footer. The variable axis covers weights 100–900; observed weights in production are 300 / 400 / 500 / 600 / 700.
+- **Source**: `https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css` (SIL OFL 1.1).
+- **Fallback stack**: `-apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif` — Korean-first system fallbacks before Western ones.
+- **Rendering**: `-webkit-font-smoothing: antialiased`, `text-rendering: optimizeLegibility` — applied globally.
+
+### Type Scale (observed live)
+- **Hero H1**: 52px / 72.8px line-height / weight 700 — used on the inverted dark hero band.
+- **CTA**: 15px / 22.5px / weight 600 — primary button label.
+- **Nav link**: 14px / 20px / weight 400.
+- **Body / default**: 14px / 20px / weight 400 — note this is *one step below* the Western 16px default, a deliberate Korean-density choice.
+- **Display caption** (illustration labels): observed 11–13px / weight 500–600.
+
+### Weight Discipline
+Production CSS frequencies: 700 (55 occurrences) > 600 (32) > 400 (16) > bold-keyword (11) > 500 (11) > 300 (6). The system relies on **bold-vs-regular contrast** rather than mid-weight subtlety — when a Classum surface needs hierarchy, it jumps from 400 to 600/700, rarely passing through 500.
+
+### Korean Treatment
+Pretendard's optical sizing handles Korean syllables (한글) at the same metrics as Latin without manual `lang="ko"` overrides. Classum does not appear to use any letter-spacing adjustment for Korean (`letter-spacing: normal` on every observed sample) — trusting Pretendard's default kerning.
+
+## 4. Spacing, Radius, Shadow
+
+### Radius (CSS bundle frequency)
+- `20px` (×18 — dominant card radius)
+- `var(--r-12)` (×12)
+- `999px` (×10 — pill chips)
+- `10px` (×9)
+- `30px` (×8 — large feature cards)
+- `100%` (×8 — circular avatars)
+- `8px` (×7 — CTA buttons)
+- `16px` (×7)
+- `4px` (×7 — input chips)
+
+The radius spectrum is wide but disciplined: CTAs at 8px, content cards at 20px, hero feature cards at 30px, pills at 999px. There is no 2px / 6px / 14px noise — Classum picks ratios cleanly.
+
+### Spacing
+- Container max-width and inner padding are Webflow-grid-driven; observed CTA padding `6px 16px`. The lavender canvas leaves wide unbranded margins between sections — vertical rhythm comes from 80–120px section padding.
+
+### Shadow
+- The captured CTA had `box-shadow: none`. The CSS bundle does include `box-shadow` rules but they are reserved for floating elements (modals, dropdowns, the Channel Talk widget). Marketing-surface depth is canvas-vs-card, not z-axis.
+
+## 5. Component Patterns
+
+- **Primary CTA**: red fill (`#FF4438`), white label, weight 600, 8px radius, 6×16 padding, no shadow, no hover-lift observed (Webflow default opacity dim).
+- **Secondary CTA**: outline or text-only link, ink color, often paired right-of-primary.
+- **Nav**: 14px / 400 inline horizontal menu, login + "도입 문의" red CTA right-aligned, sticky on scroll.
+- **Cards**: white surface on lavender canvas, 20px radius, no border, no shadow — bg contrast alone defines the card boundary.
+- **Pills / chips**: 999px radius, used for feature tags and "신규" status markers inside hero illustrations.
+- **Forms**: not exposed on public surface (gated behind "도입 문의" form modal via Channel Talk).
+- **Footer**: dark band (`#06080D`–`#121215`), white type, social icons + app-store badges + legal links.
+
+## 6. Visual Style
+
+- **Photography vs illustration**: heavily illustration-led. Product mockup screenshots (LMS dashboards, AI chat surfaces) are the primary content, framed inside browser-chrome mockups on gradient backdrops.
+- **Iconography**: line + filled hybrid, weight 1.5–2px strokes, matching Pretendard's geometric character.
+- **Charts / data**: case-study sections lean on horizontal bar / arc gauges with the accent palette (teal, green, violet).
+- **Mascot / character**: none observed.
+
+## 7. Voice & Microcopy Posture
+
+Classum's marketing voice (Korean) is **direct, B2B, outcome-oriented** — sentences are short declarative, present-tense, and verb-final per Korean syntax. Korean honorifics are formal `~합니다` style, not the casual `~해요` style seen in C2C Korean SaaS like Toss or Daangn. English voice (on the same site's translated sections) mirrors this: short claims, no exclamation marks, no marketing hyperbole. Calls to action are functional verbs (`문의`, `받기`, `보기`) — Classum does not pun or use playful imperatives.
+
+**Voice tendencies** (paraphrased, not quoted):
+- Lead with the operational benefit (efficiency, data consolidation), follow with the human outcome (autonomous growth, communication).
+- Use AI as a modifier, not as a noun headline ("AI 기반 LMS" vs "AI for education").
+- Audience-segmented copy: separate doors for universities and corporate HR, never a unified "for everyone" pitch.
+
+> **IP note**: this section paraphrases only. Verbatim Classum taglines are not reproduced in this DESIGN.md.
+
+## 8. Interaction & Motion
+
+- Webflow-default page transitions only — no custom motion library detected in the CSS bundle.
+- Scroll-triggered fades on section reveal (Webflow IX2).
+- No marquee, no parallax beyond Webflow defaults, no auto-rotating hero carousel.
+- Live chat (Channel Talk) is the one persistent interactive element bottom-right.
+
+## 9. Site Architecture (observed)
+
+```
+business.classum.com/
+├── Hero (dark band, AI 에듀테크 솔루션 positioning)
+├── Product pillars (4): AI LMS / Learning Community / Classum Connect / Skill Solution
+├── Audience split: 대학 vs 기업 HRD
+├── Case studies
+├── Resources (브로셔, 블로그, 채용)
+└── Footer (dark, legal + social + app badges)
+```
+
+Top-nav surfaces: AI 기반 LMS · 학습 커뮤니티 · AI 상담 챗봇 · 스킬 솔루션 · 리소스 · 로그인 · 도입 문의 (red CTA).
+
+---
+
+## 10. Brand Philosophy (paraphrased, not quoted)
+
+Classum's product thesis treats communication as the unit of learning — questions, answers, threaded discussion, and instructor presence are the primary surfaces, while content delivery is secondary. The marketing surface reflects this by privileging audience-segmented narrative (universities and HR-led enterprises each get their own doorway) over generic feature lists. AI is positioned as a labor-multiplier for educators and L&D managers, not as a replacement narrator — every AI feature on the site is framed alongside a human role it supports (TA, HR manager, instructor).
+
+## 11. Design Principles (inferred from surface)
+
+1. **One signal color, one type family.** Red lives on CTAs, Pretendard does every text role. Restraint is the brand.
+2. **Korean-density typography.** 14px body, 1.43 lh — accept that Korean readers parse syllables faster and don't pad like Western sites.
+3. **Flat by default, depth on demand.** Marketing pages are shadow-free; reserve elevation for floating UI (modals, chat).
+4. **Audience-first IA.** Split surfaces by buyer (university vs HR) before splitting by feature.
+5. **Open-source over proprietary.** Pretendard, Webflow, Channel Talk — Classum optimizes for time-to-iterate, not for owning every layer.
+
+## 12. Anti-patterns (what Classum's surface refuses)
+
+- No multi-color CTA palette — there is one button color, one job.
+- No serif accents, no all-caps display type, no decorative scripts.
+- No glassmorphism, no skeuomorphic shadow stacks.
+- No emoji-led marketing headlines (rare for a 2026 Korean SaaS — a deliberate signal of B2B seriousness).
+- No "everyone benefits" generic pitches — every section names its audience.
+
+## 13. Personas (inferred for downstream OmD use)
+
+- **대학 운영팀 (University Operations Lead)**: needs LMS + Q&A unification across departments. Cares about TA workload reduction, instructor adoption, FERPA-adjacent Korean privacy posture.
+- **기업 HRD 매니저 (Corporate L&D Manager)**: needs measurable skill assessment + scalable internal community. Cares about completion rates, skill-gap analytics, integration with HRIS.
+- **AI 도입 검토자 (AI Procurement Reviewer)**: needs vendor with clear data-handling story, evaluates Classum Connect against in-house GPT pilots.
+
+## 14. Accessibility Posture (observed, not certified)
+
+- Pretendard Variable rendered at 14px with `-webkit-font-smoothing: antialiased` — legible at small sizes, but 14px Korean body sits just at WCAG floor; downstream consumers should consider 15–16px base for broader audiences.
+- Primary CTA `#FF4438` on white = ~4.3:1 contrast (AA for large text, borderline for 14px). White CTA label on `#FF4438` background = ~4.6:1 — passes AA for body, narrowly.
+- No `prefers-reduced-motion` overrides detected.
+- Channel Talk widget injects its own focus order; keyboard-only navigation on the marketing site is otherwise clean.
+
+## 15. Verification Footer
+
+**Verified:** 2026-05-14
+**Tier 1 — Live inspect (succeeded):**
+- CDP `getComputedStyle` × 6 raw samples (hero h1, nav, primary CTA, secondary link, body, section card) on `https://business.classum.com/` — captured in `assets/_reference/.live-inspect-proof.json`.
+- Production CSS bundle frequency analysis on `https://cdn.prod.website-files.com/67b08d840cb9f278763c8005/css/classum-web.webflow.shared.ee81640c2.css` (13,904 lines).
+
+**Tier 1 — Official DS lookup (negative result, documented):**
+- `classum.com/brand` — page title only, no DS/brand guideline content surfaced.
+- No public Figma library, no `design.classum.com`, no GitHub org with token repo found.
+- Classum operates as a closed B2B SaaS without published brand guidelines as of 2026-05-14.
+
+**Tier 2 — Third-party indexes (both empty):**
+- `getdesign.md/classum` → "No designs found for 'classum'." (consistent with KR-10 systemic finding that English directories under-index Korean SaaS).
+- `styles.refero.design/?q=classum` → no entry returned.
+
+**Conflicts unresolved:** none — Tier 1 live data was internally consistent across CSS bundle and runtime samples.
+
+**IP guardrails applied:**
+- Brand assets (logo, screenshots) referenced by URL only, not redistributed.
+- No verbatim taglines reproduced — §7 voice analysis is paraphrased.
+- Voice mimicry kept abstract (tone descriptors, not phrase templates).

package/web/references/claude/DESIGN.md

@@ -1,6 +1,15 @@
 ---
-omd: 0.1
-brand: Claude (Anthropic)
+id: claude
+name: Claude (Anthropic)
+country: US
+category: ai
+homepage: "https://claude.ai"
+primary_color: "#cc785c"
+logo:
+  type: simpleicons
+  slug: anthropic
+verified: "2026-05-15"
+omd: "0.1"
 ---
 
 # Design System Inspiration of Claude (Anthropic)

package/web/references/clay/DESIGN.md

@@ -1,3 +1,22 @@
+---
+id: clay
+name: Clay
+country: US
+category: design-tools
+homepage: "https://www.clay.com"
+primary_color: "#ffd23f"
+logo:
+  type: github
+  slug: clay-run
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Clay Newsroom
+  url: "https://www.clay.com/press"
+  type: brand
+  description: Clay's official press kit and co-branding guidelines.
+---
+
 # Design System Inspiration of Clay
 
 ## 1. Visual Theme & Atmosphere

package/web/references/clickhouse/DESIGN.md

@@ -1,3 +1,22 @@
+---
+id: clickhouse
+name: ClickHouse
+country: US
+category: backend-devops
+homepage: "https://clickhouse.com"
+primary_color: "#fff100"
+logo:
+  type: simpleicons
+  slug: clickhouse
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: ClickHouse Design
+  url: "https://clickhouse.design"
+  type: system
+  description: ClickHouse brand hub plus the Click UI design system and component library.
+---
+
 # Design System Inspiration of ClickHouse
 
 ## 1. Visual Theme & Atmosphere

package/web/references/cohere/DESIGN.md

@@ -1,3 +1,23 @@
+---
+id: cohere
+name: Cohere
+country: US
+category: ai
+homepage: "https://cohere.com"
+primary_color: "#39594d"
+logo:
+  type: github
+  slug: cohere-ai
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Cohere Newsroom
+  url: "https://cohere.com/newsroom"
+  type: brand
+  description: Cohere's press kit with logos, symbols, and media resources.
+  og_image: "https://cdn.sanity.io/images/rjtqmwfu/web3-prod/0750efbc3db33b1a67bc77575525b076f0137f26-1200x630.jpg?w=1200&h=630"
+---
+
 # Design System Inspiration of Cohere
 
 ## 1. Visual Theme & Atmosphere

package/web/references/coinbase/DESIGN.md

@@ -1,3 +1,17 @@
+---
+id: coinbase
+name: Coinbase
+country: US
+category: fintech
+homepage: "https://www.coinbase.com"
+primary_color: "#0052ff"
+logo:
+  type: simpleicons
+  slug: coinbase
+verified: "2026-05-15"
+omd: "0.1"
+---
+
 # Design System Inspiration of Coinbase
 
 ## 1. Visual Theme & Atmosphere

package/web/references/composio/DESIGN.md

@@ -1,3 +1,17 @@
+---
+id: composio
+name: Composio
+country: US
+category: backend-devops
+homepage: "https://composio.dev"
+primary_color: "#6366f1"
+logo:
+  type: github
+  slug: composiohq
+verified: "2026-05-15"
+omd: "0.1"
+---
+
 # Design System Inspiration of Composio
 
 ## 1. Visual Theme & Atmosphere

package/web/references/coupang/DESIGN.md

@@ -1,6 +1,21 @@
 ---
-omd: 0.1
-brand: Coupang
+id: coupang
+name: Coupang
+country: KR
+category: ecommerce
+homepage: "https://www.coupang.com"
+primary_color: "#000000"
+logo:
+  type: simpleicons
+  slug: coupang
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Coupang Media Assets
+  url: "https://news.coupang.com/coupang-media-assets-brand-guidelines-eng/"
+  type: brand
+  description: Coupang's official media-asset brand guidelines — logo usage, sizing, and attribution rules.
+  og_image: "https://news.coupang.com/wp-content/uploads/2023/01/Coupang_2_1609.jpg"
 ---
 
 # Design System Inspiration of Coupang (쿠팡)

package/web/references/cursor/DESIGN.md

@@ -1,3 +1,23 @@
+---
+id: cursor
+name: Cursor
+country: US
+category: developer-tools
+homepage: "https://www.cursor.com"
+primary_color: "#000000"
+logo:
+  type: simpleicons
+  slug: cursor
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Cursor Brand
+  url: "https://www.cursor.com/brand"
+  type: brand
+  description: Cursor's brand guidelines with logos, icons, and naming conventions.
+  og_image: "https://cursor.com/public/opengraph-image.png"
+---
+
 # Design System Inspiration of Cursor
 
 ## 1. Visual Theme & Atmosphere

package/web/references/dabang/DESIGN.md

@@ -0,0 +1,210 @@
+---
+id: dabang
+name: 다방
+display_name_kr: Dabang (다방)
+country: KR
+category: consumer-tech
+homepage: "https://www.dabangapp.com"
+primary_color: "#ff3478"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=dabangapp.com&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+---
+
+# Design System Inspiration of Dabang (다방)
+
+## 1. Visual Theme & Atmosphere
+
+Dabang's web product reads like a working tool that does not want to be looked at too long. The home surface is white, the map surface is whiter, and the chrome between them is a near-black `#222` neutral sitting at body weight 400 on top of Pretendard Variable. Where its direct competitor Zigbang reaches for a Bloomberg-terminal restraint and reserves orange exclusively for the wordmark, Dabang takes the opposite trade: a saturated brand pink — `#FF3478`, internally tokenised as `--pink-500` — sits on the logo and stays there. Action moves to a different color entirely. The functional accent is blue `#326CF9` (`--blue-500`), and it appears in two places only: the selected map marker, and the focus state on filter pills. That split — pink for identity, blue for behavior, near-black for everything else — is the structural decision that organizes the system.
+
+The map page is where the design's intent becomes visible. Filter chips sit on a 1px `#DFDFDF` border at a 42px pill radius, weight 500 text — full-round pills, not the 8/10px rectangles the rest of the Korean property cohort ships. The map canvas itself fills the viewport; price markers float over it as small rounded rectangles tinted by `--blue-500` when selected and a deep gray when default. There is no box-shadow anywhere on the production surface — 53 of 53 sampled elements returned `box-shadow: none`. Depth is borders and tints exclusively: a 1px hairline in `#DFDFDF` for separation, a `#EEF8FF` (the lightest blue-50) wash for hover, a `#F5F5F5` plate for muted sections. The product is engineered to be skimmed at speed; it does not perform visual weight.
+
+The token system is unusually complete for a Korean consumer property app. Captured directly off `:root` via CDP, Dabang exposes a full 8-hue × 10-step scale — blue, pink, gray, green, violet, yellow, red, plus an `-rgb` variant of each step (140 CSS custom properties total). The ramps are not decorative; they encode product reality. `--pink-500` is the brand wordmark. `--blue-500` is interaction. `--gray-900` (`#222`) is body text. `--green-500` (`#1ca885`) is reserved for verified-listing and "안심" trust signals (not observed live this pass, inferred from token semantics). The colored ramps not seen on the home or map surfaces (violet, yellow, red beyond 500) sit on `:root` waiting — Dabang built the system, then deployed only the slice it needed.
+
+The most striking single decision is the AI feature band. Where every other H1 on the home page is `font-weight: 700` (원/투룸, 아파트, 주택/빌라, 오피스텔, 분양 — all 18-20px, all bold), the AI personalized band reads "관심있는 [동] 주변, AI가 대신 찾아봤어요 🔍" at 24px / **400**. It is the largest heading on the page and the lightest. The choice signals an intentional voice: AI is conversational, AI does not shout, AI is the only place on the surface where an emoji is allowed. It is the one place the system relaxes — and it does so by going *lighter*, not bolder.
+
+**Key Characteristics:**
+- **Pretendard Variable** universal (100% — 53/53 samples)
+- **Pink-500 `#FF3478`** brand-mark only — never appears on functional UI on the map surface
+- **Blue-500 `#326CF9`** as the single functional accent — selected marker, focus ring, link emphasis
+- **Near-black `#222` (`--gray-900`)** as the dominant text token — 21/53 samples
+- **42px full-pill filter chips** with 1px `#DFDFDF` border — distinctive vs Zigbang's 10px chip default
+- **Zero box-shadow** across the production surface — depth is borders + tints exclusively
+- **Two pill radii co-exist**: 32px for entry CTAs (home search), 42px for filter strips (map) — a *contextual* radius ladder, not a flat scale
+- **Weight cliff 400 → 700** with only 2 occurrences of 500 across 53 samples — emphasis is binary
+- **AI band at 24px / 400** — the lightest large heading is the editorial signal of the AI surface
+
+## 2. Color Palette & Roles
+
+### Brand
+- **Dabang Pink** `#FF3478` (`--pink-500`): logo wordmark and brand-chrome accent. Used 2× in 32 home samples; **does not propagate** into the map product surface. This is the system's most disciplined rule — brand color stays in the brand layer.
+- **Map Canvas White** `#FFFFFF`: the dominant surface on `/map/onetwo`. Listing cards, filter pills, and chrome float above the map tiles with hairline borders separating them.
+
+### Text Neutrals (full gray ramp on `:root`)
+- `--gray-50` `#FCFCFC` · `--gray-100` `#FAFAFA` · `--gray-200` `#F5F5F5` · `--gray-300` `#EDEDED` · `--gray-400` `#DFDFDF` · `--gray-500` `#CCCCCC` · `--gray-600` `#979797` · `--gray-700` `#656565` · `--gray-800` `#434343` · `--gray-900` `#222222`
+- **Primary body text** = `--gray-900` `#222` (observed 21/53)
+- **Secondary text** = `--gray-700` `#656565` (2/53, footer / meta)
+- **Default border** = `--gray-400` `#DFDFDF` (7/21 map samples — single most-used border value)
+
+### Interactive
+- **Action Blue** `#326CF9` (`--blue-500`): selected marker fill, focus ring, primary link emphasis. The full blue ramp (50→900) is on `:root` for state escalation.
+- **Hover/active tint** `#EEF8FF` (`--blue-50`): the only tint observed live for hover/active surfaces.
+
+### Trust / Status (system-ready, not all observed live)
+- `--green-500` `#1CA885` inferred role: verified-listing / 안심 badge (semantic match to KR property convention).
+- `--red-500` `#E20724` inferred role: error / urgent / sold-out indicator.
+- `--yellow-500` `#FFB600` inferred role: warning / pending state.
+- `--violet-500` `#3E26FD` inferred role: premium / promoted-listing tier (the violet ramp is the cleanest mathematical ladder in the system — suggests reserved future-feature use).
+
+### Surface
+- **Page bg** `#FFFFFF` (17/53)
+- **Muted plate** `#F5F5F5` (`--gray-200`)
+- **Hover tint** `#EEF8FF` (`--blue-50`)
+- **Deep slate promo panel** `rgb(67, 77, 104)` — used once for a saved-search call-out band; off-ladder color, suggesting marketing-team override rather than token-system primitive.
+
+### Color discipline summary
+The system separates three layers with strict color rules:
+1. **Brand layer** (logo / wordmark) — `--pink-500` only.
+2. **Action layer** (selected / focus / link) — `--blue-500` only.
+3. **Content layer** (text / borders / surfaces) — gray ramp only.
+
+The other five hues (green, violet, yellow, red, beyond the 500 steps of blue/pink) are present on `:root` but not deployed on home or map chrome. They exist for status and state escalation, not decoration.
+
+## 3. Typography
+
+- **Family**: Pretendard Variable (100% of 53 samples). No display accent, no second family. Fallback chain inferred: Pretendard Variable → Pretendard JP Variable → -apple-system → BlinkMacSystemFont → system-ui → Apple SD Gothic Neo → Noto Sans KR → Malgun Gothic → sans-serif.
+- **Weights**: 400 (39/53), 700 (12/53), 500 (2/53). The system effectively ships a **binary weight rhythm** with 500 reserved for filter-chip labels on the map surface.
+- **Sizes observed**: 10 · 12 · 13 · 14 · 16 · 18 · 20 · 24 px. No 32 / 40 / 48 captured on the surfaces sampled — Dabang does not have a marketing hero typeface scale visible from product entry.
+- **Body default**: 16px / 400 / `--gray-900`.
+- **Section heads (categories)**: 18-20px / 700.
+- **AI band head**: 24px / 400 — the deliberate inversion (largest = lightest).
+- **Hierarchy logic**: position + weight, not size. The system trusts that "section title" reads as such because it sits at the top of a card grid, not because it is 40px.
+
+## 4. Spacing & Layout
+
+- **Base grid**: 8px (inferred from padding samples; not exhaustively token-mined this pass — flagged for UPDATE).
+- **Map canvas dominance**: ~70% of viewport width on `/map/onetwo` belongs to the map tile renderer; chrome (left listing rail, top filter strip) is built around not obscuring it.
+- **Listing rail**: floating left column, card-based, 1px `--gray-400` borders, no shadow.
+- **Filter strip**: horizontal pill row across the top of the map surface, 42px pill radius, 1px hairline border.
+- **Home page**: vertical card grid with section bands; AI band uses a different background tint to signal its different voice.
+
+## 5. Radius
+
+A **contextual ladder**, not a flat scale:
+- `0px` (31/53) — default for text containers, dividers, list items
+- `2px` (7/53) — tight chips, map markers
+- `4px` (3/53) — input fields
+- `8px` (5/53) — cards, secondary buttons
+- `12px` (2/53) — large card surfaces, promo panel
+- `32px` (1/53) — home search-entry pill
+- `42px` (1/53) — map filter chips
+- `50%` (2/53) — circular icon controls (bookmark, close)
+
+The two pill radii (32 and 42) co-exist because they signal different things: 32px is "tap to start a search," 42px is "filter you can toggle on/off mid-flow." The distinction is functional, not aesthetic.
+
+## 6. Elevation
+
+**Zero box-shadow** across 53 sampled production elements (100%). Depth is achieved exclusively by:
+1. 1px `--gray-400` borders
+2. Background-color steps (white → `--gray-200` → `--blue-50` tint)
+3. Z-stacking via position (filter strip > map; listing rail > map)
+
+This matches Bunjang's zero-shadow discipline and diverges from Zigbang (minor floating shadows on drawer) and most international property platforms (Zillow / Rightmove ship multi-tier shadow scales). The structural argument: shadows on a map surface fight the map's own visual depth (terrain tints, road shadows). Borders do not.
+
+## 7. Motion & State
+
+- Motion tokens **not captured** this pass (single static CDP capture; no animation timeline observed).
+- Filter chip state inferred (active → `--blue-500` border + `--blue-50` background; default → `--gray-400` border + white).
+- Hover state observed once as the `--blue-50` `#EEF8FF` background tint.
+- **Flagged for UPDATE**: full state matrix (hover / active / disabled / loading) and motion duration/easing tokens.
+
+## 8. Iconography & Imagery
+
+- **Map markers**: pill-shaped price-bearing markers — text content (e.g. "전세 3.2억") replaces the typical icon-only pin. This is the system's defining product affordance: price *is* the marker.
+- **Category icons**: light-line illustrative icons on the home category grid (원/투룸 · 아파트 · 주택/빌라 · 오피스텔 · 분양).
+- **AI band emoji**: 🔍 — the only emoji captured live on the home surface. Emoji presence is a voice signal, not a decorative pattern.
+- **Listing photography**: thumbnails likely portrait-oriented for mobile-first display (Bunjang uses 81:100; Dabang's exact aspect ratio not captured this pass — flagged).
+
+## 9. Accessibility & A11y Notes
+
+- Pretendard Variable + 16px body sits well above WCAG SC 1.4.4 floor.
+- `#222` text on `#FFF` background = 16.0:1 (passes AAA).
+- `#326CF9` action blue on white = 4.6:1 (passes AA for normal text).
+- **`#FF3478` brand pink on white = 3.4:1 — fails AA for body text**, passes AA only for large text ≥18.66px. Dabang appears to honor this by restricting pink to the wordmark and large-display contexts, not running body text in brand color. Downstream port should preserve this restriction.
+- **42px filter pills** comfortably exceed WCAG 2.5.5 minimum hit target (44px tap target measured center-to-edge of pill).
+- Map markers at 2px radius are visually crisp but may have hit-target debt at default zoom — flagged for verification.
+
+## 10. Voice & Tone
+
+Dabang's voice on the home surface is **functional with one moment of warmth**. Category labels are bare nouns (원/투룸 · 아파트 · 분양). Section heads are imperative-light ("우리동네 한눈에 보기" — "see your neighborhood at a glance"). Then the AI band drops the bold and adds an emoji: "관심있는 [동] 주변, AI가 대신 찾아봤어요 🔍" — "AI looked around your neighborhood for you 🔍". The verb-ending `-했어요` is casual-polite (반말 톤은 아니지만 격식체도 아닌 중간 톤). The rest of the page is `-합니다` or noun-only labels. The voice cliff is intentional: AI talks, the rest of the product labels.
+
+**OmD-original voice reconstructions** (illustrative, tone-shape-only, not adopted from Dabang surface):
+- "내가 살고 싶은 동네, 다 찾아봤어요" (warmth — match AI band register)
+- "원룸 137건. 지도에서 확인하세요" (functional — match category label register)
+- "조건 저장하면 새 매물 알려드려요" (utility — match notification register)
+
+The system rule: warmth lives in the AI surface; functionality lives in the chrome. Do not bleed casual `-요` endings into structural labels.
+
+## 11. Personas (factual inferred — public-survey-only)
+
+[FILL IN — Dabang user surveys/research not publicly indexed at OmD attribution fidelity.] Reported product positioning suggests:
+1. **20s-30s renter searching one-room / two-room (원/투룸)** — primary surface user; price-marker-first browsing
+2. **Newlyweds / first-home buyers searching apartment listings (아파트)** — secondary segment; broader filter use
+3. **Pre-construction subscribers tracking new-build offerings (분양)** — niche but visible nav slot
+
+§11 narrative is treated as **factual inference from public surface positioning**, not as adopted persona research. Any downstream use should re-validate with primary research.
+
+## 12. Anti-Patterns (don't steal)
+
+- **Do not stretch `--pink-500` into product chrome.** Dabang's discipline is to keep pink as wordmark-only; copying the color without the discipline produces a "saturated red-pink" experience that fights the map.
+- **Do not adopt the zero-shadow rule without the border discipline.** Removing shadow but not investing in clean 1px hairlines collapses depth entirely; borders are doing the work shadows would.
+- **Do not flatten the contextual radius ladder.** 32 and 42 px are *different decisions*; replacing both with "16px pill" loses the affordance distinction (entry-CTA vs toggle-filter).
+- **Do not propagate the 400-weight AI band tone elsewhere.** It works because the rest of the surface is 700-bold; making everything 400 collapses the voice cliff.
+- **Do not adopt the 14px Korean body density** without verifying line-height and letter-spacing on the target language. Dabang's 14-16px stack is tuned for Korean character rendering on Pretendard.
+
+## 13. Tokens-as-Shipped Summary
+
+```
+--pink-500    #FF3478   brand wordmark
+--blue-500    #326CF9   action / selected
+--gray-900    #222222   primary text
+--gray-700    #656565   secondary text
+--gray-400    #DFDFDF   default border
+--gray-200    #F5F5F5   muted plate
+--blue-50     #EEF8FF   hover tint
+--green-500   #1CA885   trust / verified (inferred role)
+--red-500     #E20724   error / urgent (inferred role)
+--yellow-500  #FFB600   warning (inferred role)
+--violet-500  #3E26FD   premium / promoted (inferred role)
+
+radius:  0 / 2 / 4 / 8 / 12 / 32 / 42 / 50%
+weight:  400 / 500(sparse) / 700
+font:    Pretendard Variable (100%)
+shadow:  none (100%)
+```
+
+## 14. Methodology & Sources
+
+- **Tier 1 — live product** (positive): Chrome DevTools Protocol :9222, `Runtime.evaluate` + `getComputedStyle` on `https://www.dabangapp.com/` (32 samples) and `https://www.dabangapp.com/map/onetwo` (21 samples) on 2026-05-15. 140 CSS custom properties extracted from `:root`. Full proof in `assets/_reference/.live-inspect-proof.json`.
+- **Tier 1 — official DS** (negative, authoritative): `design.dabangapp.com` / `brand.dabangapp.com` / `tech.dabangapp.com` / `docs.dabangapp.com` all DNS no-resolve. `dabangapp.com/brand` and `/design` return HTTP 200 but resolve to the SPA shell (title remains "부동산 필수 앱 다방") — no DS surface published. Parent company is Station3 (스테이션쓰리); `stationthree.com` returns 200 (corporate page), but no Tech / Design portal. GitHub `forgeinc/stationTHREE` (1 repo, corporate site) is the only org-level surface — no design-system / tokens / Storybook repo.
+- **Tier 2 — third-party DS indexes** (negative): `getdesign.md` search "dabang" → no entry. `styles.refero.design` search "dabang" / "다방" → no result cards. Consistent with the systemic KR-coverage gap logged in `2026-05-13-kr10.md` / `2026-05-14-kr10.md`.
+- **Tier 3 — competitor cross-reference** (consulted): `references/zigbang/DESIGN.md` (KR-real-estate direct competitor); `references/bunjang/DESIGN.md` (zero-shadow + KR-marketplace radius pattern).
+- **Tier 4 — corporate context**: Station3 Co., Ltd. (스테이션쓰리 주식회사), founded 2012, headquartered in Seoul. Dabang launched 2013 as 원룸/투룸 specialist; expanded to 아파트 + 분양 verticals in 2018-2021; current scope covers full-spectrum residential. Acquired by KCC Construction in 2022. Full corporate verification to attribution fidelity not completed this pass — flagged.
+- **Tier 5 — anti-pattern survey**: red+yellow "신규!" badge saturation typical of legacy KR property classifieds (네이버 부동산, 직방 pre-2022) used as the negative reference. Dabang's discipline reads against that legacy.
+
+## 15. Verification Footer
+
+- **Tier 1 live capture**: ✓ CDP :9222, 53 raw_samples, 140 :root vars, 2 surfaces — reproducible via `ws://localhost:9222/devtools/page/B7DFD59E5452E64CA14275E072BFAC20` on Chrome/148.
+- **Tier 1 official DS**: ✗ AUTHORITATIVE NEGATIVE. No public DS hub, no Storybook, no GitHub design-system repo. Production `:root` token set is the public artifact.
+- **Tier 2 indexes**: ✗ getdesign.md empty; ✗ styles.refero.design empty (dabang / 다방).
+- **Confidence**: High on §1-§6 (live-captured); Medium on §7-§8 (motion + iconography partially inferred); Low on §11 (personas FILL IN); High on §13 (token table is direct capture).
+- **IP guardrails**: Brand assets reference-only. No verbatim taglines. Voice fresh. Service-feature names used descriptively only.
+- **Flagged for UPDATE pass**:
+  - Product-detail page (개별 매물 상세) — spacing scale + price typography
+  - Filter modal / sort sheet — full state variants
+  - Mobile viewport 390×844 — Dabang is mobile-first
+  - Motion tokens — duration/easing
+  - Listing thumbnail aspect ratio
+  - Verified Station3 corporate timeline to attribution fidelity

package/web/references/dcard/DESIGN.md

@@ -1,6 +1,15 @@
 ---
-omd: 0.1
-brand: Dcard
+id: dcard
+name: Dcard
+country: TW
+category: consumer-tech
+homepage: "https://www.dcard.tw"
+primary_color: "#0086ff"
+logo:
+  type: github
+  slug: Dcard
+verified: "2026-05-15"
+omd: "0.1"
 ---
 
 # Design System Inspiration of Dcard

package/web/references/elevenlabs/DESIGN.md

@@ -1,3 +1,23 @@
+---
+id: elevenlabs
+name: ElevenLabs
+country: US
+category: ai
+homepage: "https://elevenlabs.io"
+primary_color: "#000000"
+logo:
+  type: simpleicons
+  slug: elevenlabs
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: ElevenLabs Brand
+  url: "https://elevenlabs.io/brand"
+  type: brand
+  description: ElevenLabs brand guidelines covering logo, symbol, and product sub-brands.
+  og_image: "https://elevenlabs.io/cover.png"
+---
+
 # Design System Inspiration of ElevenLabs
 
 ## 1. Visual Theme & Atmosphere