oh-my-design-cli 1.8.6 → 1.9.0

package/web/references/sony/DESIGN.md

@@ -0,0 +1,234 @@
+---
+id: sony
+name: ソニー
+country: JP
+category: consumer-tech
+homepage: "https://www.sony.com/"
+primary_color: "#000000"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=sony.com&sz=128"
+verified: "2026-07-13"
+omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: public-corporate-home, url: "https://www.sony.com/en/", inspected: "2026-07-13" }
+    - { id: products, kind: public-products-catalog, url: "https://www.sony.com/en/SonyInfo/products/", inspected: "2026-07-13" }
+    - { id: electronics, kind: public-products-catalog, url: "https://www.sony.com/en/SonyInfo/products/#electronics", inspected: "2026-07-13" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://www.sony.com/en/", captured: "2026-07-13" }
+    - { id: products-live, kind: product-surface, url: "https://www.sony.com/en/SonyInfo/products/", captured: "2026-07-13" }
+    - { id: electronics-live, kind: product-surface, url: "https://www.sony.com/en/SonyInfo/products/#electronics", captured: "2026-07-13" }
+    - { id: sst-type-project, kind: official-doc, url: "https://www.sony.com/en/SonyInfo/design/stories/sst-font/", captured: "2026-07-13" }
+    - { id: purpose-values, kind: official-doc, url: "https://www.sony.com/en/SonyInfo/CorporateInfo/purpose_and_values/", captured: "2026-07-13" }
+    - { id: corporate-history, kind: official-doc, url: "https://www.sony.com/en/SonyInfo/CorporateInfo/History/", captured: "2026-07-13" }
+    - { id: corporate-blog, kind: official-doc, url: "https://www.sony.com/en/SonyInfo/blog/2021/04/08/", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.primary": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.colors.canvas": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::h1", captured: "2026-07-13" }
+    "tokens.colors.muted": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::p.m-text-lead", captured: "2026-07-13" }
+    "tokens.typography.family.ui": { surface_id: home, source_id: home-live, method: fontfaceset-and-computed-style, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.typography.family.display": { surface_id: products, source_id: products-live, method: fontfaceset-and-computed-style, selector: "surface-2::h1.m-h1", captured: "2026-07-13" }
+    "tokens.typography.display.size": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::h1.m-h1", captured: "2026-07-13" }
+    "tokens.typography.display.weight": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::h1.m-h1", captured: "2026-07-13" }
+    "tokens.typography.display.lineHeight": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::h1.m-h1", captured: "2026-07-13" }
+    "tokens.typography.display.use": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::h1.m-h1", captured: "2026-07-13" }
+    "tokens.typography.body.size": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::p.m-text-lead", captured: "2026-07-13" }
+    "tokens.typography.body.weight": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::p.m-text-lead", captured: "2026-07-13" }
+    "tokens.typography.body.lineHeight": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::p.m-text-lead", captured: "2026-07-13" }
+    "tokens.typography.body.use": { surface_id: products, source_id: products-live, method: live-inspect, selector: "surface-2::p.m-text-lead", captured: "2026-07-13" }
+    "tokens.spacing.header-block": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.spacing.header-inline": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.rounded.sharp": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.components.header-navigation-link.type": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.components.header-navigation-link.bg": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.components.header-navigation-link.fg": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.components.header-navigation-link.radius": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.components.header-navigation-link.padding": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.components.header-navigation-link.font": { surface_id: home, source_id: home-live, method: fontfaceset-and-computed-style, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+    "tokens.components.header-navigation-link.use": { surface_id: home, source_id: home-live, method: live-inspect, selector: "home::[data-omd-capture=\"1\"]", captured: "2026-07-13" }
+tokens:
+  source: live-extract
+  extracted: "2026-07-13"
+  colors:
+    primary: "#000000"
+    canvas: "#ffffff"
+    muted: "#656565"
+  typography:
+    family: { ui: "SST W20 Roman", display: "SST W20 Bold" }
+    display: { size: 30, weight: 700, lineHeight: 42, use: "Public products-catalog page title" }
+    body: { size: 16, weight: 400, lineHeight: 32, use: "Public products-catalog lead copy" }
+  spacing: { header-block: 20, header-inline: 13 }
+  rounded: { sharp: 0 }
+  components:
+    header-navigation-link: { type: listItem, bg: "#000000", fg: "#ffffff", radius: 0, padding: "20px 13px", font: "14px/400 SST W20 Roman", use: "Public corporate-home header navigation link; selector home::[data-omd-capture=\"1\"]" }
+  components_harvested: true
+---
+
+# Design System Inspiration of ソニー
+
+## 1. Visual Theme & Atmosphere
+
+Sony Group is a Japanese creative-entertainment and technology company whose businesses span games and network services, music, pictures, electronics, imaging and sensing. Its public English corporate portal lets that breadth sit behind a notably restrained frame: black header bands, white content planes, quiet gray editorial copy, and the compact, sharp-cornered SST navigation treatment captured here. The identity has roots in a 1946 company founded to marry technological work with cultural contribution; Sony’s current Purpose is to fill the world with emotion through creativity and technology. The Group’s 2021 management transition sharpened the distinction between Sony Group Corporation and the Sony Corporation electronics business, while retaining a people-centered creative-entertainment identity. This reference documents the measured public portal and products-catalog grammar, not an authenticated consumer-device, PlayStation, entertainment-service, or commerce application. [History](https://www.sony.com/en/SonyInfo/CorporateInfo/History/) · [Purpose & Values](https://www.sony.com/en/SonyInfo/CorporateInfo/purpose_and_values/) · [Corporate blog](https://www.sony.com/en/SonyInfo/blog/2021/04/08/)
+
+The supplied 2026-07-13 evidence covers the English corporate home and two public products-catalog URLs at 1440×900. All three carry the same header-link geometry; the products pages additionally provide the measured title and lead-copy hierarchy. They are public corporate/product-catalog domains, not evidence for logged-in product workflows or native-device UI.
+
+**Key characteristics:**
+- Black `#000000` header navigation links with white `#ffffff` labels and sharp corners.
+- White `#ffffff` page planes with repeated `#656565` editorial text on the public products catalog.
+- Loaded SST W20 Roman UI text and SST W20 Bold headings, both limited to the recorded public surfaces.
+- 20px vertical and 13px horizontal padding on the observed header navigation link.
+
+## 2. Color Palette & Roles
+
+### Observed public portal and catalog colors
+
+- **Header black** (`#000000`): observed as the `tmpl-headerNavItem_label` fill on all three captured public surfaces.
+- **Canvas white** (`#ffffff`): observed behind the products-catalog title and lead content.
+- **Editorial gray** (`#656565`): observed on the products-catalog lead and card text; retain as a local public-catalog text value rather than a universal semantic gray.
+
+The collector also recorded blue `#0000ee` default-link rendering and isolated dialog/control colors. They are not promoted as Sony brand, action, or status tokens because the packet does not establish those roles on a matching Sony-owned component.
+
+## 3. Typography Rules
+
+### Evidence classes
+
+**Official product-use and type context.** Sony Design describes SST as an original corporate typeface developed for consistent, distinctive, and legible experiences across products, services, advertising, stores, online, manuals, and product packaging. It says SST was planned for many languages and uses a mix of sharp geometry and readability; it also describes planned use in Xperia, BRAVIA, and PlayStation touchpoints. This is first-party product/use context, not a license to redistribute or substitute the font. [SST Type Project](https://www.sony.com/en/SonyInfo/design/stories/sst-font/)
+
+**Live computed surface-use.** The supplied capture records `SST W20 Roman` as loaded/high with 725 visible uses across badge, body, button, card, dialog, heading, and list-item roles. `SST W20 Bold` is loaded/high with 56 visible uses. On the public products catalog, `m-h1` is 30px/700/42px SST W20 Bold and `m-text-lead` is 16px/400/32px SST W20 Roman. The public home’s repeated header label is 14px/400/14px SST W20 Roman.
+
+**Official distributed brand asset / license boundary.** Sony’s SST project identifies SST as a Monotype trademark and explains its design and multilingual development. The reviewed first-party source does not grant a public transferable webfont or redistribution license. Keep that design history separate from runtime availability and do not render a substitute as SST.
+
+**Declared-only.** FontAwesome, SST W20 Bold Italic, SST W20 Condensed, SST W20 Heavy, SST W20 Italic, SST W20 Light, SST W20 Medium, SST W20 Ultra Light, and the SST W55 faces appear only as declared font-face assets with zero visible uses in this packet. They are not typography tokens.
+
+**System and unresolved.** `Arial` and `sans-serif` are fallback/system occurrences; `Times` and SST W20 Regular are unresolved computed families. None is a Sony substitute or a tokenized brand fact.
+
+## 4. Component Stylings
+
+### Public header navigation
+
+**Dark header navigation link**
+- Background: `#000000`
+- Text: `#ffffff`
+- Radius: 0px
+- Padding: 20px 13px
+- Font: 14px / 400 / SST W20 Roman
+- Use: Public corporate-home `a.tmpl-headerNavItem_label`; representative selector `home::[data-omd-capture="1"]`, repeated across all three captured surfaces.
+
+### Public products catalog
+
+**Catalog title typography**
+- Background: `#ffffff`
+- Text: `#333333`
+- Radius: 0px
+- Font: 30px / 700 / SST W20 Bold
+- Use: Public products-catalog `h1.m-h1`; representative selector `surface-2::h1`.
+
+**Catalog lead copy**
+- Background: `#ffffff`
+- Text: `#656565`
+- Radius: 0px
+- Font: 16px / 400 / SST W20 Roman
+- Use: Public products-catalog `p.m-text-lead`; representative selector `surface-2::p`.
+
+### Observed interaction boundary
+
+The packet records one `dialog-open` interaction on the corporate home. Its target geometry and controls are not promoted into a Sony dialog token because the capture does not establish a selector-backed, Sony-owned default dialog treatment. No generic hover, focus, pressed, disabled, error, toast, tab, toggle, or input state is asserted.
+
+---
+**Verified:** 2026-07-13
+**Tier 1 sources:** https://www.sony.com/en/, https://www.sony.com/en/SonyInfo/products/, https://www.sony.com/en/SonyInfo/products/#electronics, https://www.sony.com/en/SonyInfo/design/stories/sst-font/
+**Tier 2 sources:** https://getdesign.md/sony and https://styles.refero.design/?q=sony were both attempted through built-in web retrieval; both returned an internal error, so neither supplied a value or an absence determination.
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+The three supplied surfaces were captured at 1440×900. The repeated header label has 20px vertical and 13px horizontal padding, while the measured products title and lead establish a 30px/42px then 16px/32px public-catalog reading hierarchy. The packet does not establish a universal content grid, mobile breakpoint, checkout layout, or authenticated-product navigation model.
+
+## 6. Depth & Elevation
+
+The representative header link, catalog title, and lead-copy samples report `box-shadow: none`. The observed hierarchy comes from black/white contrast, image/content blocks, and typographic scale. No Sony-wide card, menu, modal, tooltip, or floating elevation scale is claimed.
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Keep the public-header link’s measured black/white polarity, sharp corners, and 20px × 13px padding together.
+- Use SST W20 Roman and Bold only when the authorized family is available and only for the public-surface roles documented here.
+- Preserve the observed public products-catalog hierarchy of 30px/700 title and 16px/400 lead copy where that same surface pattern is intended.
+- Keep corporate portal, catalog, device, entertainment-service, and authenticated-product claims in their own evidence domains.
+
+### Don't
+
+- Do not render Arial, sans-serif, Times, or an unresolved SST W20 Regular result as though it were Sony SST.
+- Do not turn the browser-default blue link or isolated dialog color into a Sony action token.
+- Do not infer a responsive grid, generic card treatment, form control, or consumer-product UI from this public portal capture.
+- Do not promote declared-only SST variants or FontAwesome as visible Sony UI typography.
+
+## 8. Responsive Behavior
+
+No alternate viewport was supplied. This reference has no Sony-specific mobile navigation, breakpoint, grid-collapse, or touch-target claim.
+
+## 9. Agent Prompt Guide
+
+### Quick reference
+
+- Public header navigation link: `#000000` background, `#ffffff` text, 0px radius, 20px 13px padding, SST W20 Roman 14px/400.
+- Public products-catalog title: SST W20 Bold 30px/700/42px on white.
+- Public products-catalog lead: SST W20 Roman 16px/400/32px with `#656565` text on white.
+
+### Boundary-aware prompt
+
+"Apply Sony’s captured English public-portal header link only where that exact public-navigation context is wanted: black fill, white 14px SST W20 Roman label, square corners, and 20px 13px padding. Keep products-catalog headings at the separately observed SST W20 Bold 30px/700/42px hierarchy. Do not invent a Sony form, card, app, or system-font substitute."
+
+## 10. Voice & Tone
+
+Sony’s first-party corporate language is purpose-led, imaginative, and precise: it pairs creativity and technology with emotional outcomes, while its SST story explains usability through concrete, legibility-focused reasoning.
+
+| Do | Don't |
+|---|---|
+| Lead with the human or creative outcome, then name the technology. | Present technology as an end in itself. |
+| Use direct, calm language for product and corporate information. | Inflate ordinary catalog information with unverified superlatives. |
+| Make inclusiveness and legibility concrete when describing experience. | Treat corporate values as proof of a specific UI token. |
+
+- Purpose sample — “Fill the world with emotion” is Sony’s official Purpose wording. [Purpose & Values](https://www.sony.com/en/SonyInfo/CorporateInfo/purpose_and_values/)
+- Product sample — describe SST as sharp, readable, and designed for many languages only in the scope Sony Design gives it. [SST Type Project](https://www.sony.com/en/SonyInfo/design/stories/sst-font/)
+- Corporate sample — use the current identity of a creative entertainment company with a technology foundation when describing the Group, not as an interface specification. [Corporate blog](https://www.sony.com/en/SonyInfo/blog/2021/04/08/)
+
+## 11. Brand Narrative
+
+Sony began in 1946 as Tokyo Tsushin Kogyo, with a founding prospectus that linked a free and open-minded technical workplace to contribution to Japanese culture. The Sony name arrived in 1958; the official history positions a willingness to do what had not been done before as a continuing part of the Group story. [History](https://www.sony.com/en/SonyInfo/CorporateInfo/History/)
+
+Its current Purpose is to fill the world with emotion through creativity and technology. Sony’s stated values—Dreams & Curiosity, Diversity, Integrity & Sincerity, and Sustainability—give that broad portfolio a common direction without collapsing its different businesses into one product surface. [Purpose & Values](https://www.sony.com/en/SonyInfo/CorporateInfo/purpose_and_values/)
+
+At the 2021 Group-management transition, Sony described its identity as a creative-entertainment company with a solid foundation of technology and its corporate direction as getting closer to people. Kenichiro Yoshida’s attributed direction, “Pioneer the future with dreams and curiosity,” is an official leadership message, not a component rule. [Corporate blog](https://www.sony.com/en/SonyInfo/blog/2021/04/08/) · [Careers message](https://www.sony.com/en/SonyInfo/Careers/message/index.html)
+
+## 12. Principles
+
+1. **Connect creativity with technical clarity.** Sony frames both as necessary to create emotion. *UI implication:* explain what a feature enables before detailing its mechanism.
+2. **Design for legibility across touchpoints.** The SST project emphasizes readability, small-size recognition, and multilingual consistency. *UI implication:* keep the documented SST roles distinct; never mask a fallback as SST.
+3. **Get closer to people without collapsing evidence domains.** Sony’s corporate direction is people-centered across diverse businesses. *UI implication:* do not use a corporate portal’s header geometry as proof of a native device or service pattern.
+4. **Leave unmeasured patterns absent.** The packet supports a narrow set of public portal facts. *UI implication:* avoid filling in cards, form states, and responsive rules from generic conventions.
+
+## 13. Personas
+
+These are evidence-bounded stakeholder roles, not demographic or behavioral research personas.
+
+- **Creators and creative partners** — Sony’s corporate narrative describes creators as central to its creative-entertainment identity. Their needs and workflows are not measured by this public portal packet.
+- **People experiencing Sony content and products** — Sony’s Purpose is directed at emotional experiences for people; this does not establish a specific consumer journey or device interface.
+- **Corporate and product-information visitors** — the captured users of the public portal/catalog can read company and product information through the observed header and editorial hierarchy; no further intent is inferred.
+
+## 14. States
+
+| State | Evidence boundary |
+|---|---|
+| Dialog open | One corporate-home interaction records `dialog-open`; no selector-backed Sony dialog geometry or component token is asserted. |
+
+No empty, loading, error, success, skeleton, disabled, hover, focus, pressed, selected, or validation state values are present in the canonical tokens because the supplied packet does not establish them for a matching Sony-owned component.
+
+## 15. Motion & Easing
+
+The packet contains no measured duration, easing, transition, or animation property suitable for a Sony motion token. Leave motion values absent rather than deriving them from the public portal or a generic system.

package/web/references/soop/DESIGN.md

@@ -0,0 +1,261 @@
+---
+id: soop
+name: "숲"
+display_name_kr: "숲"
+country: KR
+category: consumer-tech
+homepage: "https://www.sooplive.co.kr/"
+primary_color: "#0182ff"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=sooplive.co.kr&sz=256"
+verified: "2026-07-13"
+omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-14"
+  surfaces:
+    - { id: home, kind: public-product-home, url: "https://www.sooplive.com/", inspected: "2026-07-13" }
+    - { id: home-repeat, kind: duplicate-public-product-home, url: "https://www.sooplive.com/", inspected: "2026-07-13" }
+    - { id: esports, kind: public-product-esports, url: "https://esports.sooplive.com/", inspected: "2026-07-13" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://www.sooplive.com/", captured: "2026-07-13" }
+    - { id: esports-live, kind: product-surface, url: "https://esports.sooplive.com/", captured: "2026-07-13" }
+    - { id: brand-guide, kind: official-doc, url: "https://res.sooplive.com/policy/contents/brand_guide.html", captured: "2026-07-14" }
+    - { id: creative-guide, kind: brand-asset, url: "https://static.file.sooplive.co.kr/da_guide_file/2024/10/24/SOOP_CreativeGuide.pdf", captured: "2026-07-14" }
+    - { id: esg-overview, kind: official-doc, url: "https://corp.sooplive.com/esg/2024/index.php?page=overview", captured: "2026-07-14" }
+    - { id: esg-user-feedback, kind: official-doc, url: "https://corp.sooplive.com/esg/2023/index.php?page=winwin", captured: "2026-07-14" }
+    - { id: pretendard-license, kind: license, url: "https://github.com/orioncactus/pretendard/blob/main/LICENSE", captured: "2026-07-14" }
+  claims:
+    "tokens.colors.primary": &homeComputed { surface_id: home, source_id: home-live, method: selector-backed-computed-style, captured: "2026-07-13" }
+    "tokens.colors.surface-subtle": *homeComputed
+    "tokens.colors.foreground": *homeComputed
+    "tokens.colors.muted": *homeComputed
+    "tokens.colors.chip-surface": *homeComputed
+    "tokens.typography.family.ui": { surface_id: home, source_id: home-live, method: computed-family-backed-by-loaded-font-face, captured: "2026-07-13" }
+    "tokens.typography.body.size": *homeComputed
+    "tokens.typography.body.weight": *homeComputed
+    "tokens.typography.body.lineHeight": *homeComputed
+    "tokens.typography.body.use": { surface_id: home, source_id: home-live, method: selector-provenance, captured: "2026-07-13" }
+    "tokens.typography.list-title.size": *homeComputed
+    "tokens.typography.list-title.weight": *homeComputed
+    "tokens.typography.list-title.lineHeight": *homeComputed
+    "tokens.typography.list-title.use": { surface_id: home, source_id: home-live, method: selector-provenance, captured: "2026-07-13" }
+    "tokens.spacing.search-input-inline-start": *homeComputed
+    "tokens.spacing.search-input-inline-end": *homeComputed
+    "tokens.spacing.chip-inline": *homeComputed
+    "tokens.rounded.search-input": *homeComputed
+    "tokens.rounded.chip": *homeComputed
+    "tokens.shadow.none": *homeComputed
+    "tokens.components.home-search-input.type": { surface_id: home, source_id: home-live, method: selector-provenance, captured: "2026-07-13" }
+    "tokens.components.home-search-input.bg": *homeComputed
+    "tokens.components.home-search-input.fg": *homeComputed
+    "tokens.components.home-search-input.radius": *homeComputed
+    "tokens.components.home-search-input.padding": *homeComputed
+    "tokens.components.home-search-input.height": *homeComputed
+    "tokens.components.home-search-input.font": *homeComputed
+    "tokens.components.home-search-input.states": { surface_id: home, source_id: home-live, method: no-interaction-recorded, captured: "2026-07-13" }
+    "tokens.components.home-search-input.use": { surface_id: home, source_id: home-live, method: selector-provenance, captured: "2026-07-13" }
+  conflicts: []
+tokens:
+  source: reconciled
+  extracted: "2026-07-13"
+  note: "Only selector-backed public SOOP product-surface values are tokens. Corporate, brand-guide, advertising, esports, declared-only-font, and license evidence remain separate domains; no fallback or unobserved interaction value is promoted."
+  colors:
+    primary: "#0182ff"
+    surface-subtle: "#f6f6f9"
+    foreground: "#17191c"
+    muted: "#757b8a"
+    chip-surface: "#e8ebed"
+  typography:
+    family:
+      ui: "Pretendard"
+    body: { size: 14, weight: 400, lineHeight: "16.8px", use: "Repeated public-home text and the measured search input; the loaded product family is Pretendard." }
+    list-title: { size: 15, weight: 400, lineHeight: "18px", use: "Observed public-home title and metadata samples only; no complete display scale is claimed." }
+  spacing:
+    search-input-inline-start: 16
+    search-input-inline-end: 70
+    chip-inline: 8
+  rounded:
+    search-input: 45
+    chip: 30
+  shadow:
+    none: "none"
+  components:
+    home-search-input: { type: input, bg: "#f6f6f6", fg: "#525661", radius: "45px", padding: "0px 70px 0px 16px", height: "45px", font: "14px / 400 / 16.8px / Pretendard", states: "default only; interactionCount 0 and no hover, focus, pressed, disabled, or error value was retained", use: "Repeated public-home input, selectors home::[data-omd-capture=\"2\"] and surface-2::[data-omd-capture=\"2\"]." }
+  components_harvested: true
+---
+
+# 숲 — Design Reference
+
+## 1. Visual Theme & Atmosphere
+
+SOOP is a Korean live-streaming and creator platform whose public ecosystem brings live channels, community discovery, esports, and developer-linked services under one service name. The company changed its name from AfreecaTV to SOOP in 2024, and its official ESG material describes the current direction as an AI- and data-connected global platform, including a global-service launch and overseas operating hubs. On the captured public routes, that platform breadth resolves into a compact, feed-oriented interface: charcoal and blue sit beside pale gray discovery surfaces, with small rounded topic chips, a prominent pill search field, and dense creator/content rows. The visual impression is operational rather than editorial—an environment for finding a broadcast, a category, or an esports context quickly. This reference keeps that public product expression distinct from corporate identity material, advertising specifications, and any authenticated broadcaster or viewer flow.
+
+**Key characteristics:**
+
+- `#0182ff` is a selector-backed public blue accent; it is visible as a local link/underline/action treatment, not a universal filled CTA.
+- `#f6f6f9` and `#e8ebed` form repeated pale discovery and chip surfaces, with `#17191c` and `#757b8a` supplying the public text hierarchy.
+- The measured home search control is 45px high with a 45px radius; nearby topic chips use a 30px radius.
+- The supplied bundle includes three snapshots, but the first two are the same SOOP home URL. It records no interaction transitions.
+
+## 2. Color Palette & Roles
+
+### Selector-backed public product colours
+
+- **Public Blue** (`#0182ff`): observed on public-home anchor `home::[data-omd-capture="4"]` and on esports link/underline samples. It is a local public accent, not a general primary-button fill.
+- **Subtle Discovery Surface** (`#f6f6f9`): repeated on public-home content-link/card samples such as `home::[data-omd-capture="30"]`.
+- **Foreground** (`#17191c`): repeated public-home title and metadata text, including `home::p` samples.
+- **Muted** (`#757b8a`): repeated small chip/metadata text, including the public-home chip samples.
+- **Chip Surface** (`#e8ebed`): observed behind public-home 20px topic-chip samples such as `home::[data-omd-capture="57"]`.
+
+### Brand and marketing boundary
+
+SOOP’s official brand guide treats the name, marks, BI, and CI as protected company assets, and its advertising creative guide specifies creative-copy treatments. Those documents establish brand-use and advertising context, not computed product UI tokens. The catalog `primary_color` and the public-blue token therefore retain only the captured `#0182ff` evidence; no brand-guide image colour, advertising colour, or esports-only variation is substituted into the home product system.
+
+## 3. Typography Rules
+
+### Evidence classes
+
+| Evidence class | Family and boundary |
+|---|---|
+| Official product-use | No inspected first-party statement establishes a proprietary SOOP product type family. The official advertising creative guide uses Pretendard for specified ad-copy examples, which is advertising guidance rather than a declaration of every product route. |
+| Live computed surface-use | Pretendard is loaded with high confidence, has 1,401 visible uses across body, button, heading, input, list-item, and text roles, and is backed by SOOP-hosted FontFace URLs. It is the only promoted UI-family token. |
+| Official distributed brand asset | No official distributed SOOP brand font asset was established in the reviewed sources. |
+| Declared-only | FOUREYES, Gmarket, Noto Sans, NotoSansThai, SSFlowerRoadRegular, and swiper-icons have declared font faces but no visible captured usage. They are not UI-family tokens. |
+| License | Pretendard’s upstream repository publishes the SIL Open Font License 1.1. That licence confirms the upstream font asset, not an additional SOOP-specific licence grant. |
+
+### Captured hierarchy
+
+| Role | Family | Size | Weight | Line height | Evidence boundary |
+|---|---|---:|---:|---:|---|
+| Public body and search | Pretendard | 14px | 400 | 16.8px | repeated public-home text and measured home search input |
+| Public list title / metadata | Pretendard | 15px | 400 | 18px | observed public-home title and metadata samples only |
+
+Do not label any declared-only face as a loaded SOOP UI family. Conversely, do not replace the loaded Pretendard token with a system fallback while presenting it as product typography.
+
+## 4. Component Stylings
+
+### Public-home search
+
+**Search Input**
+- Background: `#f6f6f6`
+- Text: `#525661`
+- Radius: 45px
+- Padding: 0px 70px 0px 16px
+- Height: 45px
+- Font: 14px / 400 / 16.8px / Pretendard
+- States: Default only. The supplied bundle records `interactionCount: 0`; no hover, focus, pressed, disabled, or error value is retained.
+- Use: Repeated public-home input `home::[data-omd-capture="2"]` and `surface-2::[data-omd-capture="2"]`.
+
+The detector records 54 component variants across the supplied snapshots, but only this repeated, selector-backed input is promoted. It preserves measured default geometry without recasting link rows as buttons or creating a generic card, badge, menu, dialog, toast, toggle, tab, or authentication component. `interactionKinds: 0` and `interactionCount: 0` remove only unobserved interactive states; they do not remove this default input measurement.
+
+---
+**Verified:** 2026-07-13
+**Tier 1 sources:** https://www.sooplive.com/ ; https://esports.sooplive.com/ ; https://res.sooplive.com/policy/contents/brand_guide.html ; https://static.file.sooplive.co.kr/da_guide_file/2024/10/24/SOOP_CreativeGuide.pdf ; https://corp.sooplive.com/esg/2024/index.php?page=overview ; https://corp.sooplive.com/esg/2023/index.php?page=winwin
+**Tier 2 sources:** https://getdesign.md/soop and https://styles.refero.design/?q=soop were both attempted on 2026-07-14. Built-in retrieval returned internal errors for both paths, so neither supplied a competing token or component claim.
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+The supplied public snapshots are `1440×900`. Their evidence supports a compact horizontal search area, dense content-list discovery, pale content panels, and 20px-high pill-like topic chips. It does not establish a page grid, breakpoint system, mobile layout, authenticated viewer layout, broadcaster studio, or a reusable card inventory. The duplicate home snapshot corroborates values but is not a separate route or responsive state.
+
+## 6. Depth & Elevation
+
+The promoted search input has `box-shadow: none`, and the static product samples do not establish a reusable elevation scale. Pale fill, text hierarchy, and radius—not shadow—are the only measured separation cues retained here. Esports controls with darker fills remain a separate surface and are not converted into a global SOOP depth rule.
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Preserve the loaded Pretendard family and the measured 14px/400 public-input hierarchy when recreating the documented sibling.
+- Use `#0182ff` only as the documented local public accent, with pale `#f6f6f9` / `#e8ebed` discovery surfaces and clear charcoal text hierarchy.
+- Keep the search input’s 45px pill geometry separate from the 30px topic-chip geometry.
+- Treat creator, community, esports, corporate, advertising, and developer surfaces as distinct evidence domains.
+
+### Don't
+
+- Don't turn a blue text/underline sample into a universal blue filled CTA, error, success, or selected-state colour.
+- Don't substitute FOUREYES, Gmarket, Noto Sans, NotoSansThai, SSFlowerRoadRegular, or a system fallback for loaded Pretendard.
+- Don't convert the detected links and list rows into a button taxonomy without button semantics in the supplied evidence.
+- Don't invent hover, focus, pressed, disabled, validation, modal, toast, or motion values from this zero-interaction capture.
+
+## 8. Accessibility & Content
+
+The evidence supports compact 12–15px public text roles and a 45px search-control height, but it does not provide keyboard traversal, focus styling, contrast-ratio results, live-region behaviour, validation messaging, or screen-reader labels. Reuse meaningful visible labels and retain the measured text hierarchy where the documented input is recreated; do not claim a SOOP accessibility standard or WCAG conformance from static computed styles alone.
+
+## 9. Reference Scope & Evidence
+
+This reference uses `artifacts/reference-evidence/soop.json` as the only raw computed-style, font, component, and interaction evidence. It contains public SOOP home, a duplicate SOOP home snapshot, and public SOOP esports. First-party brand, advertising, company/ESG, and upstream font-license sources supply narrative context only. getdesign and Refero were both attempted but returned internal retrieval errors, so no Tier 2 number, component, or historical interpretation is promoted. Raw proof, the conflict matrix, source boundaries, and confidence ledger are retained in `.verification.md` and `_research.md`.
+
+## 10. Voice & Tone
+
+First-party SOOP materials frame the service around user-led media, feedback-informed improvement, creator participation, and global expansion. The advertising creative guide uses concise hierarchy for its example copy; the following are application guidance, not extracted product strings.
+
+| Do | Don't |
+|---|---|
+| Lead with the live content, community, or action a person can take now. | Bury the next useful action under abstract platform language. |
+| Keep labels compact enough for dense discovery contexts. | Treat a promotional slogan as a substitute for a stream, category, or creator label. |
+| Describe change or policy clearly when it affects creators or viewers. | Imply platform endorsement, partnership, or an official viewpoint without evidence. |
+
+Illustrative, not extracted product copy:
+
+- “지금 보고 싶은 방송을 찾아보세요.” *(illustrative; discovery-first)*
+- “관심 있는 카테고리의 라이브를 확인하세요.” *(illustrative; compact action)*
+- “변경된 안내와 다음 단계를 함께 확인하세요.” *(illustrative; clear service communication)*
+
+## 11. Brand Narrative
+
+SOOP’s corporate name changed from AfreecaTV Co., Ltd. to SOOP Co., Ltd. in March 2024, according to the company’s statutory name-change disclosure. The current official brand guide identifies SOOP as both the company’s representative service name and a company trademark. That continuity matters: the new name is not treated here as a detached campaign asset, but as the shared public identity around a long-running live-streaming service and its creator ecosystem.
+
+The company’s 2024 ESG overview describes a transition toward an AI- and data-connected global platform. It records the launch of SOOP’s global service and operating bases across the United States, Thailand, Hong Kong, and Vietnam as part of a global-brand direction. The product capture reflects only the public Korean SOOP home and esports routes; it does not establish parity across regions or authenticated experience.
+
+SOOP’s public ESG material also describes a platform in which streamers produce live and VOD content, build fan communities, and receive direct support through platform mechanisms. Its user-satisfaction material says service improvement combines company-level change with feedback incorporated from planning. These statements give useful ecosystem and evolution context, but they do not create a token, component, or user-flow claim beyond the supplied surfaces.
+
+## 12. Principles
+
+1. **Users participate in the media.** SOOP’s ESG material describes a user-led media vision and a creator/viewer ecosystem.
+   *UI implication:* make the content, community, and current action legible before secondary promotion.
+2. **Feedback is an input to improvement.** The company says it combines top-down service improvement with feedback reflected from the planning stage.
+   *UI implication:* distinguish an explanation, a choice, and a confirmation so feedback-sensitive changes are understandable.
+3. **Creator ecosystems are part of the product context.** SOOP describes streamers creating live/VOD content and operating fan communities.
+   *UI implication:* do not flatten creator identity, content status, and community metadata into one indistinguishable label.
+4. **Global expansion is operational, not merely cosmetic.** The 2024 overview links global service and overseas bases to platform development.
+   *UI implication:* do not use a local public-web sample as evidence for all regions, languages, or roles.
+
+## 13. Personas
+
+These are stakeholder categories supported by first-party SOOP materials, not synthetic personas, satisfaction scores, or behavioural research findings.
+
+### Viewer and community participant
+
+The public product and ESG materials describe people discovering and participating around live and VOD content. The packet does not establish a viewer’s signed-in task flow, device preference, or accessibility needs.
+
+### Streamer / content creator
+
+SOOP’s ESG material describes streamers producing content, operating fan communities, and receiving direct support through platform mechanisms. No broadcaster studio, earning, or moderation control is captured here.
+
+### Developer or integration partner
+
+The official developer service provides platform and service APIs plus an extension-program market. This confirms a platform stakeholder group, not a design system or an extension UI pattern for the captured consumer routes.
+
+## 14. States
+
+No product-state specification is inferred. The table records the smallest useful boundary for future source-backed additions without creating values or copy.
+
+| Category | Captured evidence boundary |
+|---|---|
+| Empty | No empty state captured. |
+| Loading | No loading state captured. |
+| Error — validation | No validation-error state captured. |
+| Error — service/system | No service or system-error state captured. |
+| Success | No success or confirmation state captured. |
+| Skeleton | No skeleton state captured. |
+| Disabled | No disabled state captured. |
+| Focus | No focus state or transition captured. |
+| Hover | No hover state or transition captured. |
+| Pressed | No pressed state or transition captured. |
+
+## 15. Motion & Easing
+
+The supplied bundle records `interactionKinds: 0` and `interactionCount: 0`. It establishes no duration, easing curve, transition, animation, carousel movement, or reduced-motion contract. Motion tokens are therefore absent; add them only from a source-specific observed interaction or official specification.