oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/kdan/DESIGN.md

@@ -0,0 +1,160 @@
+---
+id: kdan
+name: "Kdan Mobile"
+country: TW
+category: productivity
+homepage: "https://www.kdan.com"
+primary_color: "#00DC87"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=kdan.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+ds:
+  name: "kdan-ui"
+  url: "https://github.com/kdan-mobile-software-ltd/kdan-ui-revamp"
+  type: system
+  description: "Kdan's open-source UI token library (kdanGreen brand token + neutral scale + semantic colors)."
+---
+
+# Design System Inspiration of Kdan Mobile
+
+## 1. Visual Theme & Atmosphere
+
+Kdan Mobile presents itself as bold, modern, and developer-credible document software, the kind of digital-workflow SaaS that signs contracts and ships SDKs without losing its sense of energy. The atmosphere is built on a structural deep teal-black base (#002D37) that grounds the interface like ink on a signed page, punctuated by an electric-lime pop (#CAFF00) reserved for the loudest hero moments and the brand's own kdanGreen token (#00DC87) carried over from its open-source UI library. Type is set in Clear Sans, a humanist sans that keeps long documents and dense product copy legible while reading clean and unfussy. Corners are crisp at 4px — tight enough to feel precise and technical, never soft or playful. The overall effect is confident and high-contrast: a serious productivity tool from Tainan, Taiwan that still wants you to feel the charge of getting work done fast. It reads as energetic document software that respects both the signer and the integrating engineer.
+
+## 2. Color Palette & Roles
+
+- **kdanGreen / Brand primary** `#00DC87` — the catalog primary, drawn directly from the kdan-ui-revamp brand token.
+- **Structural deep teal-black** `#002D37` — solid primary button surface and the grounding structural base on live kdan.com.
+- **Electric lime** `#CAFF00` — loud hero CTA accent, used sparingly for the highest-emphasis moment.
+- **Hyperlink blue** `#007AFF` — semantic link color from the token library.
+- **Error red** `#F25858` — semantic error state from the token library.
+- **Gray 1000** `#191919` — darkest neutral in the scale.
+- **Gray 100** `#FAFAFA` — lightest neutral in the scale.
+- **Hover layer** `rgba(0,0,0,0.2)` — semi-transparent overlay token applied on hover.
+- **Disabled surface** `#AFAFAF` with text `#4B4B4B` — muted neutral pairing for disabled controls.
+- **White** `#FFFFFF` — primary button text on the teal-black surface.
+- **Black** `#000000` — text on the electric-lime CTA, for maximum contrast.
+
+Roles: kdanGreen anchors the brand identity, deep teal-black does the structural and primary-action work, and electric lime is the single loud accent. The neutral gray scale (gray100 to gray1000) handles surfaces and text, while hyperlink, error, and hover-layer tokens cover semantic and interaction states.
+
+## 3. Typography Rules
+
+- **Typeface:** Clear Sans across the interface.
+- **Body:** 16px.
+- **Hero heading:** 56px at weight 700.
+- **Button label (standard):** 16px at weight 500.
+- **Hero CTA label:** 22px at weight 500.
+
+Clear Sans is a humanist sans-serif chosen for sustained legibility in document-heavy contexts. The hierarchy is steep — a 56px/700 hero headline sits far above 16px body — giving pages a confident, declarative top while keeping reading text calm. Button labels favor the medium 500 weight for a solid, tappable feel without shouting.
+
+## 4. Component Stylings
+
+### Button
+
+**Solid primary**
+- Background: #002D37
+- Text: #FFFFFF
+- Border: 1.5px solid #002D37
+- Radius: 4px
+- Height: 38px
+- Font: 16px / 500
+- Use: primary action on live kdan.com
+
+**Outline**
+- Background: transparent
+- Text: #002D37
+- Border: 1.5px solid #002D37
+- Radius: 4px
+- Height: 38px
+- Font: 16px / 500
+- Use: secondary action paired alongside the solid primary
+
+**Lime hero CTA**
+- Background: #CAFF00
+- Text: #000000
+- Border: none
+- Radius: 4px
+- Height: 53px
+- Font: 22px / 500
+- Use: single loud, high-emphasis hero call-to-action
+
+**Disabled**
+- Background: #AFAFAF
+- Text: #4B4B4B
+- Border: none
+- Radius: 4px
+- Use: non-interactive disabled state
+
+## 5. Layout Principles
+
+Kdan's layout reads as confident document software: a structural deep teal-black base anchors the page, with content set against the light neutral scale (gray100 #FAFAFA at the bright end). A steep type hierarchy — 56px/700 hero down to 16px body — establishes a clear declarative top and a calm reading body. Primary and outline actions share the same 38px height and 4px radius so action rows align cleanly, while the taller 53px lime hero CTA stands apart as the single loudest target. The crisp 4px corner radius is applied consistently across controls, reinforcing a precise, technical feel rather than a soft one.
+
+## 6. Depth & Elevation
+
+Depth is handled with restraint and high contrast rather than heavy shadow. The primary interaction-depth cue is the hover layer — a semi-transparent `rgba(0,0,0,0.2)` overlay token from the kdan-ui library — which darkens a surface on hover to signal interactivity. Borders do structural work too: solid controls carry a 1.5px solid border in their own surface color (#002D37), giving edges definition without relying on drop shadows. The visual stack is built primarily from solid color contrast — deep teal-black against light neutrals — so elevation is felt through tone and the hover overlay more than through layered shadow.
+
+## 7. Do's and Don'ts
+
+### Do
+- Anchor structure and primary actions with deep teal-black #002D37 and white #FFFFFF text.
+- Reserve electric lime #CAFF00 for a single loud hero CTA, with black #000000 text for contrast.
+- Keep the kdanGreen #00DC87 token as the brand identity color.
+- Use a consistent 4px radius and 1.5px borders across controls.
+- Set type in Clear Sans, with a steep 56px/700 hero over 16px body.
+
+### Don't
+- Scatter the electric lime across many elements — it loses its punch when overused.
+- Soften the 4px corners into large rounded shapes; the brand reads precise and technical.
+- Use error red #F25858 or hyperlink blue #007AFF for decoration — they are semantic.
+- Invent shadow-heavy elevation; lean on color contrast and the hover overlay.
+
+## 8. Responsive Behavior
+
+The blob does not capture explicit breakpoints, fluid grids, or per-viewport measurements for Kdan, so specific responsive numbers are not asserted here. Qualitatively, the fixed control heights (38px standard, 53px hero CTA) and the consistent 4px radius are designed to hold their proportions across viewports, while the steep Clear Sans hierarchy (56px/700 hero, 16px body) gives a reliable anchor for scaling text down on smaller screens. Action rows that pair the solid primary and outline buttons share a common 38px height, which keeps them aligned whether stacked or placed side by side.
+
+## 9. Agent Prompt Guide
+
+When generating UI in Kdan's style, instruct the agent: "Build bold, developer-credible productivity software from Taiwan. Ground the page in deep teal-black #002D37 with white #FFFFFF text and light neutral surfaces (up to gray100 #FAFAFA). Use kdanGreen #00DC87 as the brand identity color. Reserve electric lime #CAFF00 — with black #000000 text — for exactly one loud hero CTA at 53px height, 22px/500. Standard buttons are 38px tall, 16px/500, 4px radius, 1.5px solid border in #002D37 (solid: teal-black bg/white text; outline: transparent bg/teal-black text). Disabled controls use #AFAFAF on #4B4B4B. Set everything in Clear Sans, hero headings 56px/700, body 16px. Keep corners crisp at 4px, use the rgba(0,0,0,0.2) hover overlay for interactivity, and lean on color contrast over shadows. Use hyperlink blue #007AFF and error red #F25858 only for their semantic roles."
+
+## 10. Voice & Tone
+
+Kdan's voice is bold, modern, and confident — the tone of a document-software company that is sure of its product and credible to developers. It speaks plainly and energetically, matching the high-contrast structural base and the single electric-lime exclamation point. Copy should feel capable and direct: productivity language that respects the signer's time and the engineer's intelligence, never cute or padded.
+
+## 11. Brand Narrative
+
+Kdan Mobile is a Tainan, Taiwan digital-workflow SaaS built around PDF productivity, e-signature, and document SDKs. Its visual identity carries that dual story — the seriousness of signed documents and the credibility of developer tooling — through a deep teal-black structural base, an electric-lime pop accent, and the brand's own kdanGreen token surfaced from its open-source kdan-ui library. Setting everything in Clear Sans with crisp 4px corners, Kdan reads as energetic, modern, and confident: software that handles real contracts and real integrations while still feeling charged with momentum.
+
+## 12. Principles
+
+- **Confident and high-contrast:** ground in deep teal-black, let one electric-lime accent carry the energy.
+- **Developer-credible:** lean on Kdan's own open-source token library (kdanGreen, neutral scale, semantic colors) as the source of truth.
+- **Precise, not soft:** crisp 4px corners and 1.5px borders over rounded, shadow-heavy styling.
+- **Restraint with accent:** the loud lime is a single exclamation point, never a refrain.
+- **Legible by default:** Clear Sans and a steep hierarchy keep document-heavy work readable.
+
+## 13. Personas
+
+- **The signer / business user:** needs to move documents and signatures quickly; served by a clear hierarchy, calm 16px body text, and unambiguous primary actions in deep teal-black.
+- **The integrating developer:** evaluates Kdan's SDKs and trusts the open-source kdan-ui token library; served by a credible, technical, precisely-cornered visual language and documented tokens.
+- **The decision-maker scanning the hero:** drawn in by the bold 56px/700 headline and the single loud electric-lime CTA that signals where to act.
+
+## 14. States
+
+- **Default (solid primary):** background #002D37, text #FFFFFF, 1.5px solid #002D37 border, 4px radius, 38px height.
+- **Hover:** rgba(0,0,0,0.2) hover-layer overlay token darkens the surface to signal interactivity.
+- **Disabled:** background #AFAFAF, text #4B4B4B, 4px radius — clearly muted and non-interactive.
+- **Error (semantic):** error red #F25858 reserved for error messaging and validation.
+- **Link (semantic):** hyperlink blue #007AFF for inline links.
+
+## 15. Motion & Easing
+
+The blob does not capture explicit animation durations, easing curves, or transition timing for Kdan, so no specific motion values are asserted. Qualitatively, the documented interaction model is a hover state that applies the rgba(0,0,0,0.2) overlay token — implying a quick, subtle tonal shift on hover rather than elaborate motion. In keeping with the precise, high-contrast character (crisp 4px corners, solid color contrast), any motion should stay restrained and snappy, matching the confident, developer-credible tone rather than drawing attention to itself.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.kdan.com (live homepage — buttons, hero CTA, Clear Sans, hero 56px/700), https://github.com/kdan-mobile-software-ltd (brand-owned org), https://github.com/kdan-mobile-software-ltd/kdan-ui-revamp (open-source kdan-ui token library — kdanGreen + neutrals + semantic colors)
+**Tier 2 sources:** getdesign.md/kdan — NOT LISTED. refero — not listed. Note: brand token kdanGreen #00DC87 is the catalog primary; #002D37 is the structural surface and #CAFF00 the loud accent.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/kkbox/DESIGN.md

@@ -0,0 +1,114 @@
+---
+id: kkbox
+name: "KKBOX"
+country: TW
+category: entertainment
+homepage: "https://www.kkbox.com"
+primary_color: "#00B6E1"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=kkbox.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+
+# Design System Inspiration of KKBOX
+
+## 1. Visual Theme & Atmosphere
+
+KKBOX wraps its interface in a near-black, cinematic canvas where the music itself feels like the source of light. The ground is a deep #111111 that recedes into the background, letting album art, hero photography, and oversized white display type carry the visual weight. A single signature accent — the KKBOX cyan-blue #00B6E1 — punches through the darkness, reserved for the moments that matter most, like the download call to action. The mood is premium and audio-forward, the kind of room you'd want to sit in with headphones on. Typography does the heavy lifting here: Work Sans at hero scale (up to 120px) gives the page an editorial, almost poster-like confidence. Softly rounded pill buttons and generous spacing keep the experience calm rather than busy, so the brand feels less like a utility and more like a stage.
+
+## 2. Color Palette & Roles
+
+The palette is intentionally narrow and high-contrast, built for a dark environment where one accent has to do all the work.
+
+- **Ground / Canvas** — `#111111` (near-black) — the dominant surface behind nearly everything; sets the cinematic, music-forward mood.
+- **Brand Accent** — `#00B6E1` (KKBOX cyan-blue) — the single signature color; used sparingly for the download CTA text and brand moments so it never loses impact.
+- **Light Button Surface** — `#F2F2F2` — a pale neutral pill surface that floats on the dark ground and carries the cyan accent.
+- **Display Text** — `#FFFFFF` (white) — headings and hero copy set in white for maximum legibility against the near-black canvas.
+
+Role discipline matters more than palette size: the cyan is an event, not a texture. Let the near-black ground and white type establish the room, and bring #00B6E1 in only at the decision point.
+
+## 3. Typography Rules
+
+Two families split the labor. **Work Sans** is the display voice — confident, oversized, and editorial — running all the way up to 120px at weight 600 for hero headings, always in white on the dark ground. **Helvetica Neue** handles body copy at a quiet 14px, stepping back so the display type and album art can lead. The contrast between a 120px hero and 14px body is dramatic by design: it creates a poster-like hierarchy where there's never any doubt about where to look first. Keep headings white; keep body restrained; let scale, not color, signal importance.
+
+## 4. Component Stylings
+
+### Download Button
+
+**Default (light pill)**
+- Background: #F2F2F2
+- Text: #00B6E1
+- Border: none
+- Radius: 30px
+- Padding: 16px 48px
+- Height: 57px
+- Font: 18px / 500
+- Use: Primary download call to action; a light pill that floats on the #111111 ground and carries the brand cyan as its label.
+
+## 5. Layout Principles
+
+KKBOX leans on the dark canvas as negative space rather than filling it. Hero sections give oversized Work Sans display type room to breathe, with generous padding around the pill CTA (16px 48px) so the interactive target never feels crowded. The composition is vertical and editorial — large headline, supporting imagery, a single clear action — reading more like a music poster than a dense product page. Because the ground is near-black, content blocks are defined by spacing and contrast instead of heavy dividers or boxed containers, keeping the page cinematic and uncluttered.
+
+## 6. Depth & Elevation
+
+Depth here is achieved through contrast, not heavy shadow. The light #F2F2F2 pill reads as elevated simply because it's a bright surface lifting off the #111111 ground — the tonal jump does the work a drop shadow normally would. The fully rounded 30px radius on the button softens its edge and reinforces the sense of a discrete, tappable object resting on the dark plane. Keep elevation cues subtle and tonal: let brightness and rounding signal interactivity rather than stacking visible shadow layers.
+
+## 7. Do's and Don'ts
+
+### Do
+- Keep the canvas near-black (#111111) so album art and white type carry the light.
+- Reserve the cyan #00B6E1 for the single most important action.
+- Go big with Work Sans display type for an editorial, poster-like hero.
+- Use the pale #F2F2F2 pill to lift the CTA off the dark ground.
+
+### Don't
+- Scatter the cyan accent across many elements — it loses its punch.
+- Crowd the hero; the dark negative space is part of the brand.
+- Set headings in a color other than white on the dark canvas.
+- Square off the buttons — the soft 30px pill is part of the character.
+
+## 8. Responsive Behavior
+
+The blob captures KKBOX at desktop scale, where the hero headline reaches up to 120px in Work Sans. The system's logic — a near-black ground, a single light pill CTA, and a dramatic gap between display and body type — adapts naturally to smaller viewports by scaling the oversized headline down while preserving the same hierarchy and the same generous 16px 48px tap padding on the pill. The download button's 57px height already sits comfortably above a thumb-friendly minimum, so the primary action stays easy to hit on a phone. (Exact mobile breakpoints and resized values were not captured in this inspection; describe responsive intent qualitatively rather than asserting specific small-screen numbers.)
+
+## 9. Agent Prompt Guide
+
+When generating KKBOX-flavored UI, lead with the atmosphere: a near-black #111111 canvas, white Work Sans display type at large scale, and exactly one accent — cyan #00B6E1 — held in reserve for the primary action. Build the primary CTA as a light #F2F2F2 pill with #00B6E1 label text, a 30px radius, 57px height, and 16px 48px padding at 18px/500. Set body copy in Helvetica Neue at 14px and keep it quiet. Phrase prompts around restraint: "single cyan accent on a near-black ground," "oversized editorial headline," "soft pill CTA." Avoid asking for additional colors, shadows, or squared corners — the brand's identity lives in the discipline of one accent, one ground, and one bold typeface.
+
+## 10. Voice & Tone
+
+KKBOX speaks like a confident host of a premium listening room — calm, music-forward, and unhurried. The tone is more cinematic than promotional: it trusts the work (the music, the art) to do the persuading, so copy stays clean and direct rather than shouty. Calls to action are simple and singular, matching the interface's one-accent discipline. The voice carries the assurance of a pioneer who's been doing this longer than most, without needing to say so loudly.
+
+## 11. Brand Narrative
+
+KKBOX is Taiwan's pioneering music-streaming service, the audio flagship of the KKCompany group. Its story is one of being first and staying premium — a service that helped define what streaming felt like in its region and has carried a refined, design-led sensibility ever since. The near-black canvas, the singular cyan accent, and the editorial display type all tell the same story: this is a brand that treats music as the main event and the interface as a quiet, cinematic frame around it.
+
+## 12. Principles
+
+- **One accent, used with intent** — the cyan #00B6E1 appears where decisions happen, never as decoration.
+- **Darkness as a stage** — the #111111 ground exists to make music, art, and white type glow.
+- **Editorial scale** — oversized Work Sans display type gives every page a poster's confidence.
+- **Calm over clutter** — generous spacing and soft pills keep the experience premium and unhurried.
+
+## 13. Personas
+
+- **The Headphone Listener** — wants an immersive, distraction-free space to discover and play music; rewarded by the cinematic dark canvas and uncluttered hero.
+- **The Returning Subscriber** — values a premium, dependable service from a regional pioneer; the singular clear CTA makes the next action obvious.
+- **The Design-Conscious Browser** — appreciates editorial typography and restraint; drawn in by the oversized Work Sans display type and the disciplined single accent.
+
+## 14. States
+
+The captured inspection documents the download button's default (resting) state: an #F2F2F2 pill with #00B6E1 label text, 30px radius, 57px height, and 18px/500 type on the #111111 ground. Hover, pressed, focus, and disabled states were not captured in this live inspection, so they are intentionally left undocumented rather than invented. For consistency, any future interactive states should stay within the same palette — adjusting the pill's brightness or the cyan's intensity rather than introducing new hues — to preserve the one-accent discipline.
+
+## 15. Motion & Easing
+
+No motion timings, durations, or easing curves were captured in this inspection, so none are asserted here. In keeping with the brand's calm, cinematic character, any motion should feel unhurried and smooth — gentle transitions that match the premium, music-forward atmosphere rather than snappy or playful animation. Treat motion as the brand treats color: sparingly and with intent.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.kkbox.com (live homepage — colors, typography, download button), https://www.kkcompany.com (KKCompany group brand site), https://github.com/KKBOX (brand-owned engineering org)
+**Tier 2 sources:** getdesign.md/kkbox — NOT LISTED. refero — not listed.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/krafton/DESIGN.md

@@ -0,0 +1,230 @@
+---
+id: krafton
+name: "KRAFTON"
+country: KR
+category: consumer-tech
+homepage: "https://www.krafton.com"
+primary_color: "#000000"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=krafton.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# 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:
+
+| Range | Container max-width | H. padding | Heading size |
+|---|---|---|---|
+| ≥ 1301 px | 1280 px | 40 px | 70 px |
+| 1025–1300 px | 98.46 vw | 3.48 vw | 5.38 vw |
+| 768–1024 px | 100% | 2.61 vw | 5.08 vw |
+| ≤ 767 px | 100% | 4.25–6.25 vw | 10.38 vw |
+
+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
+
+| Do | Don't |
+|---|---|
+| Speak in ambitious imperatives: "Pioneer the Undiscovered." | Soften with hedges: "We try to push boundaries." |
+| Lead with the vision, then back with craft detail. | Over-explain the technology before the emotional promise. |
+| Use present tense for values: "Fans are at the center." | Use passive constructions: "Fans are being considered." |
+| Short sentences that land hard. | Long compound sentences that dilute impact. |
+
+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
+
+| Token | Value |
+|---|---|
+| Fade-in duration | 1.6 s |
+| Slide-up duration | 0.8 s |
+| Hover (button BG) | 0.1 s |
+| Hover (underline / download link) | 0.2–0.3 s |
+| Parallax appear | 0.4 s (delay 0.2 s) |
+| Default easing | `ease-out` |
+| Parallax easing | `ease` |
+
+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

package/web/references/kream/DESIGN.md

@@ -380,3 +380,21 @@ The brand's motion logic mirrors its voice: minimal, factual, time-boxed. Moveme
 **Tier 2 (verified empty 2026-05-14):**
 - `getdesign.md/kream` — no record
 - `styles.refero.design/?q=kream` — no match
+
+## 16. Do's and Don'ts
+
+### Do
+- Keep the chrome on the grayscale ramp, using `#222` as primary ink and reserving `#000` for the H1 display token only
+- Signal active state by weight, not hue — active tab and selected control go to `700` while inactive stays `400`, both on `#222`
+- Map every corner radius to its card class: 16px banner/merchandising tile, 30px filter chip, 8px ghost button, 6px row/category card
+- Let full-bleed product photography on the `#f5f5f5` banner card carry all the color, keeping all surrounding chrome neutral
+- Lead promotional copy with the number (`~33% 할인`, `3% 적립`) and time-box every offer with a window tag (`이번 주`, `5월 브랜드 위크`)
+- Run Pretendard Variable across the whole stack on the documented scale — 32px/700 display, 24px/700 search query, 16px body, 13px chips
+
+### Don't
+- Introduce a branded accent fill or selected-state color — the system is designed to never need one, and color would fight the product image
+- Spread the lone `rgb(17, 161, 151)` watch teal beyond rare price-watch signaling, or treat the Swiper `#007aff` library default as a usable brand color
+- Blend radii or use a corner radius unmapped to a card class (e.g. a banner that is not 16px or a filter chip that is not 30px)
+- Add shadows, gradients, or decorative chrome iconography — the home surface deliberately has none
+- Use size to signal active state where weight should — body and active tab both sit at 16px, so only the 400→700 weight jump should change
+- Lead with adjectives (`특별한 할인`), leave offer windows open-ended, or quote/italicize English brand names like `"Nike"`