KRAFTON

KRAFTON is a South Korean game publisher and developer whose digital identity is built entirely in monochrome — deep black surfaces carry white type and logotypes while a proprietary KRAFTON typeface, Zalando Sans Expanded, and Poppins work in concert to communicate ambition at cinematic scale.

1. Visual Theme & Atmosphere

KRAFTON's corporate site operates as a dark-mode-first canvas where the page body is assigned the class Bg-black, the footer background is #000000, and the cookie-consent overlay uses #0a0a0a. This near-total blackness is not merely decorative; it positions each game property and studio card as a self-contained illuminated world against the void, echoing the brand's "Pioneer the Undiscovered" manifesto. The rare white surface — appearing only on inner article pages — feels like daylight breaking through. Motion is purposeful and cinematic: content tiles ascend 100px with an opacity fade over 0.8 s (ease-out), hero backgrounds reveal themselves in a 0.4 s parallax bloom with a 0.2 s delay, and a 5px diagonal-skewed progress bar crowns the header on scroll. Typography scales dramatically between breakpoints — a 140px custom-font logotype on desktop collapses gracefully through responsive vw units, maintaining the feeling of largeness even on mobile. Hover interactions on text links extend a thin 2px underline from left to right over 0.3 s, lending restraint to a design that could otherwise feel aggressive.

2. Color Palette & Roles

• Brand Black: #000000 — primary background (homepage, footer, header bar, mega-menu backdrop)
• Site Black: #0a0a0a — cookie-consent bar background; near-black alternate
• Dark Surface: #393939 — footer divider lines, dark-mode border, footer header background
• Body Background: #ffffff — inner page (article/single) background
• Body Text: #555555 — default body copy color
• Content Text: #222222 — rich-text body, table data
• Mid Gray: #777777 — secondary labels, nav hover (Bg-black context)
• Muted Gray: #ADADAD — input placeholder text
• Disabled Gray: #DDDDDD — scrollbar track, disabled borders
• Alert Red: #ED2929 — required-field markers and error states (#E84847 alternate)
• Link Blue: #3D7FD9 — inline hyperlink color in article content
• White Text: #ffffff — all text on black/dark surfaces including nav, footer copy

3. Typography Rules

KRAFTON uses a four-family hierarchy. "KRAFTON" is a proprietary display face used exclusively for the 140 px hero logotype (single weight, normal style). "Zalando Sans Expanded" (weights 200–900, hosted via Google Fonts and self-hosted woff2) serves editorial and marketing headings — the vision tagline "PIONEER THE UNDISCOVERED" and core values use this face in a large, expanded treatment. "Poppins" (weights 400/500/700) covers all navigation, download buttons, footer links, and language selectors. "Noto Sans" / "Noto Sans KR" / "Noto Sans SC" (weights 300/400/500/700) covers Korean, Chinese, and Japanese body copy globally.

Base body: 14 px / 1.7 line-height, #555555, weight 400, word-break: keep-all.
PageHeader title: 70 px bold, color #000 (light pages).
Hero large logotype: 140 px, font-family "KRAFTON".
Article/Single body: 16 px / 1.9, H1 1.30em, H2 1.24em, H3 1.18em.
Navigation: Poppins, default 18 px on hamburger button, weight 600.
Language selector links: Poppins 13 px, color #A2A2A2.
Footer copyright: Poppins 12 px, rgba(255,255,255,0.4).

4. Component Stylings

Download Button

Primary (White Background)

• Background: #ffffff
• Text: #000000
• Border: 2px solid #000000
• Padding: 8px 43px 8px 15px
• Font: 14px / 700
• Transition: background-color 0.1s

Hover (Inverted)

• Background: #000000
• Text: #ffffff
• Border: 2px solid #000000
• Transition: background-color 0.1s

Search Input

Default

• Background: #ffffff
• Text: #222222
• Border: 2px solid #000000
• Height: 46px
• Padding: 12px 20px
• Font: 15px / 500

Placeholder

• Text: #ADADAD
• Font: 15px / 500

Tab Navigation (ThirdDepthTab)

Default Tab

• Background: #f7f7f7
• Text: #000000
• Font: 19px / 500
• Height: 2.4em

Active Tab

• Background: #000000
• Text: #ffffff
• Font: 19px / 700

Download Link (Text + Underline)

Default

• Text: #222222
• Font: 15px / 500
• Underline: linear-gradient(#000000,#000000) 0 2px, width 0
• Transition: background-size 0.2s ease-out

Hover

• Underline: expands to 100% 2px

---

Verified: 2026-06-03 Tier 1 sources: https://www.krafton.com (homepage HTML + inline CSS), https://www.krafton.com/wp-content/themes/krafton/style.css, https://www.krafton.com/wp-content/themes/krafton/assets/css/component.css, https://www.krafton.com/wp-content/themes/krafton/assets/css/header.css, https://www.krafton.com/wp-content/themes/krafton/assets/css/footer.css, https://www.krafton.com/wp-content/themes/krafton/assets/css/page.css, https://www.krafton.com/about/brandcenter/, https://www.krafton.com/en/about/vision/ Tier 2 sources: getdesign.md/krafton — NOT LISTED (0 DESIGN.md files). refero — no result for KRAFTON KR. Conflicts unresolved: none

5. Layout Principles

The site uses a max-width 1280px centered container with 40px horizontal padding on desktop (.site-container). The header container uses proportional 4.11458vw gutters to stay edge-aligned. At breakpoints 1300–1025 px the container shifts to 98.461vw max-width, at 1024–768 px it becomes full-width with 2.607vw padding, and below 767 px padding expands to 4.25vw–6.25vw. The homepage body (Bg-black) has overflow:hidden to contain parallax video backgrounds. Inner pages receive padding-top: 220px to clear the sticky header. Mega-menu columns use a table/table-cell layout pattern consistent with a pre-flex-era codebase. Bottom-margin utility classes step in increments of 5–10 px from 15 px to 140 px, providing the spacing rhythm.

6. Depth & Elevation

KRAFTON does not use drop shadows for component elevation. Depth is expressed instead through two mechanisms: (1) dark background bleed — game and studio cards appear as self-lit images floating on the black void, creating apparent foreground/background separation without shadows; (2) the SiteHeaderBar, a 5px diagonal-skewed element at the top of the header viewport that changes from #000 to #fff (on Bg-black pages) when the user scrolls (is-View state), creating a subtle kinetic highlight. The cookie-consent overlay uses background-color: rgba(0,0,0,0.64) to produce a scrim; popups use rgba(0,0,0,0.5). No box-shadow declarations appear in the brand's own CSS files.

7. Do's and Don'ts

Do

• Use the KRAFTON custom font for hero-scale logotype moments at 140 px or above
• Set all major page backgrounds to #000000; reserve #ffffff for body-copy pages only
• Apply Poppins for all Latin navigation, buttons, and footer links
• Use Noto Sans KR/SC/JP for any East Asian body copy to honour the multi-locale character set
• Animate content entrance with a combined translateY(100px) → translateY(0) + opacity 0 → 1 over 0.8 s ease-out
• Use a 2px solid #000000 border as the default frame for interactive white-surface components (search, download buttons)
• Scale typography proportionally using vw units between breakpoints to preserve the cinematic headline feeling

Don't

• Do not introduce drop-shadow on cards or containers — the brand achieves depth without shadows
• Do not use coloured CTAs; brand buttons are strictly black-on-white or white-on-black
• Do not mix the KRAFTON display font with body-weight copy — it is reserved for large-scale display only
• Do not break the max-width 1280px container with full-bleed section content without a dedicated full-bleed block pattern
• Do not use font-weight below 300 in navigation or body contexts
• Do not add border-radius to buttons or interactive controls — the brand uses sharp 0 px corners throughout

8. Responsive Behavior

Four explicit breakpoint ranges are defined in CSS:

The hamburger menu (SiteHeaderMapButton) is hidden at ≥1025 px with opacity:0; visibility:hidden. The mega-menu transforms from horizontal columns to full-screen mobile panels. Typography vw scaling means the 140 px hero becomes ~16.77 vw on mobile (≈108 px on 375 px screen). Video hero panels (KeyVisualVideoBox) use an opacity:0.6 black overlay (#000) that persists across all breakpoints. ThirdDepthTab collapses into an accordion on mobile.

9. Agent Prompt Guide

When building KRAFTON-style UI: set background:#000; color:#fff on all primary surfaces. Use font-family:"Zalando Sans Expanded", sans-serif at 600–800 weight for display headings; use font-family:"Poppins", sans-serif at 500 for nav links and buttons; use font-family:"Noto Sans","Noto Sans KR", sans-serif at 400 for body Korean copy. Buttons are rectangular with border:2px solid #000; background:#fff; color:#000 and invert to background:#000; color:#fff on hover with transition:background-color 0.1s. Entrance animations use transform:translateY(100px); opacity:0 transitioning to transform:translateY(0); opacity:1 over 0.8s ease-out. Text-link hover uses a pseudo-element underline that scales from 0 to 100% width over 0.3s ease-out. All border-radius values are 0. No box-shadows. If generating game cards, place imagery on #000 with no visible frame — let the image be the only light source.

10. Voice & Tone

Adjectives: pioneering, cinematic, direct

Voice samples (illustrative):

• Illustrative: "We pioneer the path to players' dreams. With bold imagination and breakthrough technology, we create unforgettable worlds for fans across the globe."
• Illustrative: "PIONEER THE UNDISCOVERED — our vision is not a destination. It is the act of moving into uncharted territory and making it a world worth living in."
• Illustrative: "Deep thinking and meticulous groundwork fuel our success. We don't rush into the undiscovered; we prepare to own it."

11. Brand Narrative

KRAFTON was founded in 2007 as Bluehole Studio, a small Korean game development company whose first major title, TERA, established a reputation for ambitious massively multiplayer experiences. Over the following decade the studio portfolio grew into a holding structure; in 2018 the parent company renamed itself KRAFTON — a compound that emphasises the act of crafting — to reflect its role as a creator of original intellectual property rather than a portfolio of acquired products.

The global moment arrived in 2017 with PUBG: Battlegrounds, which reached over 75 million copies sold and became a defining cultural touchstone for the battle-royale genre. KRAFTON went public on the Korea Stock Exchange in 2021, deploying that capital into studios across North America, Europe, and India. The studio network now spans PUBG Studios, Bluehole Studio, Striking Distance Studios, Unknown Worlds, Neon Giant, and more than a dozen additional teams creating games ranging from survival-horror to life-simulation.

The brand's governing philosophy is stated simply: "Pioneer the Undiscovered." This is not merely a tagline — it operationalises as five internal values: Aim for Bold Objectives, Depth Builds the Edge, Imagination + Technology, Fan-First Thinking, and Embrace Global Perspectives. Every product launch and communication is measured against whether it advances territory that has not been claimed before.

12. Principles

1. Pioneer the Undiscovered — seek problems no competitor has solved and genres no studio has fully defined. UI implication: Do not follow platform conventions blindly; introduce distinctive interaction patterns where the genre expects them least.

2. Depth Builds the Edge — deep research and meticulous groundwork underpin every creative decision. UI implication: Design systems must account for every state, edge case, and locale before shipping; shallow prototypes are not shippable artefacts.

3. Imagination + Technology — fuse creative vision with engineering capability. UI implication: Motion and micro-interaction must be intentional and technically precise, never decorative noise; every animated element should have a measurable purpose.

4. Fan-First Thinking — fans drive every decision from discovery to long-term retention. UI implication: Reduce friction on discovery surfaces (game listings, studio pages) so players can reach content within one or two interactions; information hierarchy privileges experience over brand-speak.

5. Embrace Global Perspectives — the brand operates across KR, EN, ZH, and JA locales simultaneously. UI implication: All typographic and layout decisions must degrade gracefully across character sets; reserve pixel-perfect vw scaling for Latin text and test all display scenarios in Korean first.

13. Personas

Illustrative Competitive Gamer — "Seungjae": A 24-year-old Korean PC-bang regular who monitors PUBG patch notes daily and filters the KRAFTON careers page for gameplay engineer roles. He reads the studio subpages to understand the technical depth behind favourite titles.

Illustrative Global IP Fan — "Mia": A 29-year-old based in São Paulo who discovered KRAFTON through PUBG Mobile and has since explored the Callisto Protocol and inZOI. She browses the games listing in English, using language selector prominently, and follows KRAFTON's Instagram for behind-the-scenes glimpses.

Illustrative Investor Analyst — "David": A 40-year-old institutional equity analyst in Hong Kong who tracks KRAFTON's IR page for quarterly earnings, share buyback announcements, and ESG disclosures. He needs dense information accessed in two clicks.

Illustrative Indie Developer — "Yuki": A 27-year-old Japanese developer studying the KRAFTON studios ecosystem to understand what kinds of team they might acquire. She reads the "Our Challenges" history page looking for signals about cultural fit and creative autonomy.

14. States

• Empty: Cards render as black-background placeholders with no content message; absence of game image signals "coming soon" implicitly through a darkened aspect-ratio box
• Loading (image): img[data-src] elements carry opacity:0 until the browser resolves src, at which point opacity:1 transitions via CSS
• Error (form): Required fields highlighted with color:#ED2929 on label; no border-color change observed in source CSS
• Error (link/status): Alert-red #E84847 / #ED2929 applied as .text-red utility to error messaging in body copy contexts
• Success: Positive states use color:#3D7FD9 (.text-blue) as affirmation colour in forms and news status labels
• Skeleton / Appear: .a-Opacity applies opacity:0; transition:opacity 1.6s ease-out until .is-Opacity is added; .a-OpacityTop applies opacity:0; transform:translateY(100px); transition:transform, opacity 0.8s ease-out with JS adding .is-OpacityTop to reveal on scroll
• Disabled: .is-Disable applies opacity:0.3 with cursor:default on anchor children and removes TextHoverLine underline animations
• Active Tab: background-color:#000000; color:#ffffff; font-weight:bold on .ThirdDepthTab-item.is-Current .ThirdDepthTab-link

15. Motion & Easing

Rules:

• All on-scroll entrance animations use ease-out to communicate confident arrival
• Hover micro-interactions target 0.1–0.3 s to feel immediate without being abrupt
• No entrance animation should use ease-in (elements never struggle to appear)
• The progress bar in the header uses a skew transform with transition-property:background-color; transition-duration:0.2s — keep this as the only element using colour transition on header scroll
• Parallax video backgrounds use animation-fill-mode:forwards to hold the final opacity:1 state without a reversal