---
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.


---
Source: https://oh-my-design.kr/design-systems/soop · Raw twin of references/soop/DESIGN.md
Install 440 quality-graded references for your AI coding agent: npx oh-my-design-cli install-skills