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

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

Primary tasks

• Browse the publisher's game titles and company information
• See which games the publisher is currently promoting
• Read the company's account of its founding and global reach

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

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

• Background: rgba(255, 255, 255, 0.05)
• Radius: 0px
• Padding: 0px
• Height: 60px
• State: default on the prev/next pair (home::[data-omd-capture="1"] and "2"), 60px × 60px.
• Use: home::[data-omd-capture="1"] (.btn-arrow.btn-arrow--prev) on the homepage hero.
• Corrected 2026-09-30: the July record gave the arrow a text colour of #000000 and cited interactionCount 0 as the reason no state was recorded. The arrow's font size is 0px and #000000 is the page body's inherited colour, so that value described no visible label and is withdrawn; the interaction count covers expansions, not pointer states. The translucent fill was in the capture but unrecorded; it is added.

Homepage hero slide control

Default (home-slide-control): transparent, 0px 10px padding, 330px × 60px; home::[data-omd-capture="4"] to "6" (button.swiper-controlbar__btn) in the hero control bar. The button's own font size is 0px, so its label sits in a child the capture did not sample and no label style is claimed. The button with class active ("3") records the same captured values as its siblings, and the capture holds no opacity, so no selected value is declared.

Homepage game filter

Default (home-game-filter-tab): text #000000, 34px / 600 / normal SUIT Variable, no padding, 60px × 43px; home::[data-omd-capture="13"] and "14" inside li.game-filter__item. The button with class active ("12") records the same captured values, so no selected value is declared.

Notice bar

Title link (notice-bar-title-link): text #000000, 20px / 400 / normal SUIT Variable, 70px × 25px; home::[data-omd-capture="32"] inside h1.notice-bar__title, repeated on the error page (surface-2::[data-omd-capture="2"]). The ticker items beside it are p elements at #000000, 16px / 300 / 16px.

Prev/next buttons (notice-bar-slide-button): transparent, 26px × 26px; home::[data-omd-capture="33"] and "34" (button.btn-slide), repeated on the error page. Their font size is 0px, so no label style is claimed.

Footer text button

Default (footer-text-button): transparent, text #898989, 14px / 300 / 19.6px SUIT Variable, 20px high; home::[data-omd-capture="46"] and "47" (button.btn-text) in the footer information lines, repeated on the error page. "46" also carries class underline; the capture records no text decoration, so none is claimed.

Error-page outline link

Default (error-outline-link): transparent, border 1px #e0e0e0, 4px radius, 318px × 78px; surface-2::[data-omd-capture="1"], which the second error capture repeats. The link's own font size is 0px and its colour is the browser-default #0000ee, so its label sits in an unsampled child and no label style is claimed.

Homepage news and media items

News item (home-news-card): li.news-box__item with a 4px radius at 650px × 230px (two items). Its title paragraph holds all of the item text at #000000, 24.48px / 600 / 35.496px SUIT Variable.

Media item (home-media-card): li.media-box__item at 423px × 291px (three items). Its caption paragraph (423px × 52px) holds all of the item text at #000000, 16px / 400 / 16px, with 18px 0px 18px 28px padding.

The bundle holds no hover, pressed, or focus frame for any Kakao Games element (zero ::state-* samples on all three captures) and no interaction record, so no pointer or focus state is declared anywhere in this reference. Two active classes (hero control bar, game filter) carry no measured difference, so no selected treatment is declared either. Anchors whose own colour is the browser-default #0000ee (game-card, footer-menu, social, and certificate links) keep their visible labels in unsampled children and are not promoted.

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

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

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, disabled, or selected treatment is established by the supplied capture; the two active classes in §4 carry no measured difference. 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.