oh-my-design-cli 1.8.7 → 1.9.0

package/web/references/kakaogames/DESIGN.md

@@ -0,0 +1,220 @@
+---
+id: kakaogames
+name: 카카오게임즈
+country: KR
+category: consumer-tech
+homepage: "https://www.kakaogames.com/"
+primary_color: "#000000"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=kakaogames.com&sz=128"
+verified: "2026-07-13"
+omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: public-marketing, url: "https://kakaogames.com/", inspected: "2026-07-13" }
+    - { id: error, kind: public-utility, url: "https://kakaogames.com/error/", inspected: "2026-07-13" }
+    - { id: company-about, kind: corporate, url: "https://kakaogames.com/en-us/about/", inspected: "2026-07-13" }
+    - { id: suit-license, kind: font-license, url: "https://github.com/sun-typeface/SUIT/blob/main/LICENSE", inspected: "2026-07-13" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://kakaogames.com/", captured: "2026-07-13" }
+    - { id: error-live, kind: product-surface, url: "https://kakaogames.com/error/", captured: "2026-07-13" }
+    - { id: company-about-doc, kind: official-doc, url: "https://kakaogames.com/en-us/about/", captured: "2026-07-13" }
+    - { id: suit-license, kind: license, url: "https://github.com/sun-typeface/SUIT/blob/main/LICENSE", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.ink": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.hero-on-dark": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.footer-muted": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.family.ui": { surface_id: home, source_id: home-live, method: font-face-and-computed-style, captured: "2026-07-13" }
+    "tokens.typography.hero.size": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.hero.weight": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.hero.lineHeight": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.hero.tracking": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.hero.use": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.section-title.size": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.section-title.weight": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.section-title.lineHeight": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.section-title.tracking": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.section-title.use": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.footer.size": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.footer.weight": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.footer.lineHeight": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.footer.tracking": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.footer.use": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.spacing.card-bottom": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.rounded.none": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.rounded.news-item": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.shadow.none": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-game-card.type": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-game-card.radius": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-game-card.padding": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-game-card.use": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-hero-arrow.type": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-hero-arrow.fg": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-hero-arrow.radius": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-hero-arrow.padding": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-hero-arrow.height": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-hero-arrow.states": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.home-hero-arrow.use": { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+tokens:
+  source: live-extract
+  extracted: "2026-07-13"
+  colors:
+    ink: "#000000"
+    hero-on-dark: "#ffffff"
+    footer-muted: "#898989"
+  typography:
+    family: { ui: "SUIT Variable" }
+    hero: { size: 50, weight: 700, lineHeight: 1.2, tracking: 0, use: "Homepage desktop hero title only." }
+    section-title: { size: 34, weight: 600, lineHeight: 1, tracking: 0, use: "Homepage section heading only." }
+    footer: { size: 14, weight: 300, lineHeight: 1.4, tracking: 0, use: "Homepage footer information only." }
+  spacing: { card-bottom: 40 }
+  rounded: { none: 0, news-item: 4 }
+  shadow: { none: "none" }
+  components_harvested: true
+  components:
+    home-game-card: { type: card, radius: 0, padding: "0px 0px 40px", use: "home::div.card; static homepage game-card wrapper, observed at 248px × 437px." }
+    home-hero-arrow: { type: button, fg: "#000000", radius: 0, padding: "0px", height: 60, states: "Default only: 60px × 60px; the capture reports 0 interaction snapshots, so no hover, focus, pressed, disabled, or active value is recorded.", use: "home::[data-omd-capture=\"1\"] (.btn-arrow.btn-arrow--prev) on the homepage hero." }
+---
+
+# Design System Inspiration of 카카오게임즈
+
+## 1. Visual Theme & Atmosphere
+
+카카오게임즈 is a Korean publisher and developer that operates mobile, PC online, and console games across casual, subculture, and hardcore MMORPG genres. Founded in Korea in 2016, the company’s current official account describes a global studio-and-partnership model rather than a single-platform game label. Its public homepage expresses that broad catalogue through a high-contrast editorial shell: oversized black type, image-led game promotion, stark white hero copy, and restrained utility text instead of a persistent product-dashboard language. The current evolution documented by the company is expansion of its global development and publishing reach through studios and multiple platforms; the sources reviewed do not document a separate visual-identity rebrand. [Official company profile](https://kakaogames.com/en-us/about/)
+
+**Key Characteristics:**
+
+- A global games portfolio, not a single authenticated gameplay interface
+- Black-led public typography with white hero copy and quiet gray footer information
+- Image-led homepage promotion paired with large category labels
+- Measured public marketing and error-surface values kept distinct from unobserved in-game interfaces
+
+## 2. Color Palette & Roles
+
+- **Ink** (`#000000`): dominant observed public text and border color on all three supplied captures.
+- **Hero on dark** (`#ffffff`): observed homepage hero title and subtitle text.
+- **Footer muted** (`#898989`): observed footer information text.
+
+The capture also exposes browser-default blue links (`#0000ee`) and transparent surfaces. Neither is promoted as a Kakao Games brand color: the first is not selector-backed brand treatment, and the second is not an opaque color token.
+
+## 3. Typography Rules
+
+### Evidence classes
+
+- **Live computed surface-use:** **SUIT Variable** is the only loaded, high-confidence family in the supplied artifact. It has 224 observed uses across body, button, card, heading, list-item, and text roles, with a matching jsDelivr source URL. It is a public homepage/error-surface fact, not evidence for game-client UI.
+- **Official distributed asset and license:** SUIT’s official repository licenses the font under SIL Open Font License 1.1. This establishes the font asset’s license boundary; it does not make SUIT a Kakao Games-owned typeface. [SUIT license](https://github.com/sun-typeface/SUIT/blob/main/LICENSE)
+- **Declared-only:** `swiper-icons` is declared in the artifact but has zero visible usage. It is not a token.
+- **Fallback context:** Apple system faces, AppleSDGothicNeo-Regular, Malgun Gothic, 맑은 고딕, dotum, and 돋움 occur after SUIT Variable in the captured declaration. They are fallbacks, never substitutes for SUIT.
+- **Unresolved:** no official Kakao Games custom-font asset or in-game product-font declaration was found in the reviewed sources; none is inferred.
+
+### Observed hierarchy
+
+| Role | Family | Size | Weight | Line height | Boundary |
+|------|--------|------|--------|-------------|----------|
+| Homepage hero | SUIT Variable | 50px | 700 | 60px | `.title-main.only-pc` only |
+| Homepage section title | SUIT Variable | 34px | 600 | normal | `.section__title` only |
+| Homepage footer info | SUIT Variable | 14px | 300 | 19.6px | `.footer-info__item` only |
+
+## 4. Component Stylings
+
+### Homepage game card
+
+**Observed default**
+- Radius: 0px
+- Padding: 0px 0px 40px
+- Use: `home::div.card`; static game-card wrapper observed at 248px × 437px on the homepage.
+
+### Homepage hero arrow
+
+**Observed default**
+- Text: `#000000`
+- Radius: 0px
+- Padding: 0px
+- Height: 60px
+- State: Default only, at 60px × 60px; `interactionCount` is 0, so no hover, focus, pressed, disabled, or active value is recorded.
+- Use: `home::[data-omd-capture="1"]` (`.btn-arrow.btn-arrow--prev`) on the homepage hero.
+
+The supplied artifact records 19 variants but zero interaction kinds and zero interaction snapshots. It therefore retains measured default card and arrow geometry while omitting unobserved interactive states. Other captured rows and links remain list items unless actual button semantics were observed.
+
+---
+**Verified:** 2026-07-13
+**Tier 1 sources:** https://kakaogames.com/; https://kakaogames.com/error/; https://kakaogames.com/en-us/about/; https://github.com/sun-typeface/SUIT/blob/main/LICENSE
+**Tier 2 sources:** https://getdesign.md/kakaogames (attempted; no usable Kakao Games record returned); https://styles.refero.design/?q=kakaogames (attempted; no usable Kakao Games style record returned)
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+The public homepage uses a promotional hero followed by content modules rather than an application shell. The captured game-card wrapper measures 248px × 437px in one homepage variant and carries 40px bottom padding. No authenticated game-client grid, inventory layout, player profile arrangement, or responsive breakpoint is asserted.
+
+## 6. Depth & Elevation
+
+The representative homepage cards and controls have `box-shadow: none` in the supplied artifact. No elevation scale, modal treatment, floating panel, or in-game overlay shadow is established.
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Keep public catalogue surfaces typographically direct and image-led.
+- Use SUIT Variable only where the public-surface provenance is appropriate.
+- Preserve the documented 40px card-bottom spacing and square corners for the captured game-card wrapper.
+- Treat the 60px arrow as a default-only public control.
+
+### Don't
+
+- Do not recast browser-default blue links as a brand token.
+- Do not substitute a system fallback and call it SUIT Variable.
+- Do not use public homepage components as evidence for a game client, account system, store, or gameplay HUD.
+- Do not invent hover, focus, pressed, disabled, error, or success styles from this capture.
+
+## 8. Responsive Behavior
+
+The supplied evidence contains 1440px-wide captures only. It does not establish mobile typography, breakpoints, touch-target rules, carousel behavior, or game-client responsiveness.
+
+## 9. Agent Prompt Guide
+
+Use this reference for the observed Kakao Games public web shell, not for a game UI. Start with black `#000000` text, white `#ffffff` hero text when it sits on an existing dark/image field, SUIT Variable, square card geometry, and no shadow. Preserve the source boundary: do not generate in-game navigation, combat HUDs, account flows, store states, or interaction variants as though they were captured facts.
+
+## 10. Voice & Tone
+
+The official company profile frames games as cultural content that can connect people across regions and describes its mission as “Uniting the World Through Games.” Its values center on challenge, connection, and expansion. That supports a global, energetic, and inviting corporate register; it is not a verified in-game localization or microcopy system. [Official company profile](https://kakaogames.com/en-us/about/)
+
+| Do | Don't |
+|----|-------|
+| Lead with the game, platform, or community value. | Claim a player-facing phrase is official when it is not in a reviewed source. |
+| Make global reach concrete through genres, platforms, or collaboration. | Reduce diverse titles to one genre or audience. |
+| Keep corporate language clear and outward-looking. | Invent an in-game tone guide from the corporate mission. |
+
+Illustrative, not official UI copy: “Discover a new world to play together.” · “Find your next adventure across platforms.” · “Share the game with players everywhere.”
+
+## 11. Brand Narrative
+
+Kakao Games says it was founded in Korea in 2016 and has grown into a global comprehensive gaming company with offices in Europe, Japan, and other regions. Its stated operating scope combines publishing, development studios, and partnerships across mobile, PC online, and console games. [Official company profile](https://kakaogames.com/en-us/about/)
+
+Its published mission, “Uniting the World Through Games,” positions games as cultural content that connects people across regions and environments. The company’s public account of its current direction emphasizes high-quality content for global users, varied genres, and expansion beyond a single platform. This narrative is company context, not proof of any unobserved visual token.
+
+## 12. Principles
+
+1. **Challenge through new experiences.** The company describes innovation, technology, and new opportunities as ways to deliver distinctive gaming experiences. *UI implication:* do not translate this into an unverified novelty visual treatment.
+2. **Connection across players and regions.** The official values describe global player community and listening to players. *UI implication:* keep locale, community, and accessibility decisions evidence-led per product surface.
+3. **Expansion across genres and platforms.** The company presents a portfolio that reaches beyond one platform or genre. *UI implication:* do not force every title into one generic game UI pattern.
+4. **Joyful creation.** The corporate-culture statement links team creativity and joy to player enjoyment. *UI implication:* use this as narrative context, not an invented component or motion rule.
+
+## 13. Personas
+
+These are stakeholder archetypes derived from the company’s published audience and operating scope, not synthetic research personas.
+
+- **Global player:** seeks games across different genres and platforms; product-specific needs remain unverified here.
+- **Studio or publishing partner:** participates in Kakao Games’ development-and-partnership model; no partner portal UI is captured.
+- **Portfolio visitor:** browses public information about titles and the company; this is the surface the supplied evidence covers.
+
+## 14. States
+
+No visual empty, loading, error, success, skeleton, or disabled-state treatment is established by the supplied capture. The `/error/` route is a public utility surface, but it does not provide selector-backed error-component styling in this evidence bundle. Absence of a measured state is not a license to fill it with a generic pattern.
+
+## 15. Motion & Easing
+
+No duration, easing curve, transition property, or animation-state value is preserved in the supplied evidence. The homepage includes carousel-related controls, but the artifact contains zero interaction snapshots, so its motion behavior is omitted.