zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/nexon/DESIGN.md

@@ -1,389 +0,0 @@
----
-id: nexon
-name: Nexon
-country: KR
-category: consumer-tech
-homepage: "https://www.nexon.com"
-primary_color: "#00de5a"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=www.nexon.com&sz=128"
-verified: "2026-06-09"
-added: "2026-06-09"
-omd: "0.1"
-tokens:
-  source: live-extract
-  extracted: "2026-06-09"
-  note: "primary = live Nexon brand green (#00de5a, rgb(0,222,90)) measured on the home-page CTA with black label; chrome built on near-black #17191d text over white"
-  colors:
-    primary: "#00de5a"
-    on-primary: "#000000"
-    canvas: "#ffffff"
-    ink: "#17191d"
-    near-black: "#080410"
-    body: "#737881"
-    label: "#4a4e57"
-    muted: "#919191"
-    disabled: "#9fa1a7"
-    pure-black: "#000000"
-  typography:
-    family: { sans: "NEXON Gothic Bold", fallback: "malgun gothic" }
-    nav-link:   { size: 16, weight: 400, lineHeight: 1.20, use: "Primary GNB navigation link, ink color" }
-    menu-link:  { size: 14, weight: 400, lineHeight: 1.20, use: "Secondary nav / sub-menu link" }
-    cta:        { size: 14, weight: 700, lineHeight: 1.20, use: "Primary green CTA label, NEXON Gothic Bold" }
-    body:       { size: 12, weight: 400, lineHeight: 1.20, use: "Standard reading text, footer copy" }
-    label:      { size: 12, weight: 400, lineHeight: 1.20, tracking: -0.3, use: "Muted utility labels" }
-    caption:    { size: 12, weight: 700, lineHeight: 1.20, use: "Bold footer / emphasis caption" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 36, section: 48 }
-  rounded: { sm: 0, md: 4, lg: 8, full: 9999 }
-  shadow:
-    flat: "none"
-    ambient: "rgba(0,0,0,0.08) 0px 2px 8px"
-    elevated: "rgba(0,0,0,0.16) 0px 8px 24px"
-  components:
-    button-primary: { type: button, bg: "#00de5a", fg: "#000000", radius: "0px", padding: "12px 24px", font: "14px / 700", use: "Primary green CTA, black label, NEXON Gothic Bold, sharp corners" }
-    button-disabled: { type: button, bg: "#9fa1a7", fg: "#ffffff", radius: "0px", padding: "12px 24px", font: "14px / 400", use: "Inactive / disabled CTA, muted gray fill" }
-    button-ghost: { type: button, bg: "#ffffff", fg: "#17191d", radius: "0px", padding: "10px 20px", font: "14px / 400", use: "Secondary text action, no fill, ink label" }
-    nav-link: { type: tab, fg: "#17191d", radius: "0px", padding: "0px 16px", font: "16px / 400", use: "GNB top navigation item", active: "Nx bottom border #00de5a" }
-    menu-item: { type: listItem, bg: "#ffffff", fg: "#17191d", radius: "0px", padding: "8px 16px", font: "14px / 400", use: "Dropdown / sub-nav list row" }
-    card: { type: card, bg: "#ffffff", fg: "#17191d", radius: "4px", padding: "16px", use: "Game promo card on white canvas, ambient shadow" }
-    badge: { type: badge, bg: "#00de5a", fg: "#000000", radius: "4px", padding: "2px 8px", font: "12px / 700", use: "NEW / event badge, brand green fill" }
-    footer-label: { type: badge, fg: "#9fa1a7", radius: "0px", font: "12px / 700", use: "Bold footer label, muted gray" }
-    input-text: { type: input, bg: "#ffffff", fg: "#17191d", radius: "4px", padding: "8px 12px", font: "14px / 400", use: "Search / login field, muted #919191 placeholder" }
-  components_harvested: true
----
-
-# Design System Inspiration of Nexon
-
-## 1. Visual Theme & Atmosphere
-
-Nexon's website is the digital storefront of one of Korea's largest game publishers, and its design reflects a deliberate split personality: an editorial, almost corporate calm in the chrome, broken by sudden bursts of high-voltage brand green. The page sits on a clean white canvas (`#ffffff`) with near-black ink (`#17191d`) for headings and navigation, but the moment a primary call-to-action appears, the system detonates its signature `#00de5a` -- an electric, arcade-bright green that reads as "press start." This is the green of a power-up, of a glowing console button, and it is used with restraint precisely so that each appearance lands like a hit.
-
-The typographic backbone is **NEXON Gothic Bold**, the company's proprietary typeface, which carries the brand voice on every CTA and emphasis element. It falls back to `malgun gothic` for body copy, giving the running text a familiar, highly legible Korean-web baseline. The result is a hierarchy where the custom face does the shouting and the system face does the reading. Black text (`#000000`) sits directly on the green CTA -- a high-contrast, almost industrial pairing that refuses the soft white-on-color convention most consumer sites default to. The black-on-green combination is the single most identifiable Nexon design signal.
-
-Geometry is sharp and confident. Buttons and nav items use zero or minimal corner radius, echoing the rectangular, pixel-grid heritage of game UI rather than the soft pill shapes of modern SaaS. Shadows are light and functional -- elevation exists to separate cards from the canvas, not to create atmosphere. The overall impression is of a company that takes its games' energy seriously but frames it inside a disciplined, grown-up corporate shell.
-
-**Key Characteristics:**
-- Signature arcade-green `#00de5a` reserved for primary CTAs and brand accents -- used sparingly for maximum impact
-- Black label (`#000000`) directly on green -- the defining high-contrast Nexon pairing
-- Proprietary **NEXON Gothic Bold** for CTAs and emphasis; `malgun gothic` fallback for body
-- Near-black ink (`#17191d`) instead of pure black for headings and navigation
-- Sharp, low-radius geometry (0-4px) echoing game-UI heritage
-- Restrained, functional shadows -- elevation, not atmosphere
-- Muted gray scale (`#737881`, `#4a4e57`, `#919191`, `#9fa1a7`) for hierarchy and utility text
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Nexon Green** (`#00de5a`): The signature brand color. Primary CTA backgrounds, brand accents, active-state underlines, event badges. An electric arcade green measured live as `rgb(0,222,90)` on the home-page CTA.
-- **On-Primary Black** (`#000000`): Label color that sits directly on Nexon Green. The black-on-green pairing is the brand's most identifiable signal.
-- **Pure White** (`#ffffff`): Page background, card surfaces, nav background.
-
-### Ink & Text
-- **Ink** (`#17191d`): Primary heading, navigation, and link text. A near-black that reads cleaner than pure black on white.
-- **Near-Black Link** (`#080410`): Deepest link/text tone for high-emphasis inline links.
-- **Body Gray** (`#737881`): Default body and secondary text color, measured on `body`.
-- **Label Gray** (`#4a4e57`): Stronger secondary labels and sub-headings.
-- **Muted Gray** (`#919191`): Utility labels and placeholder-adjacent text, often with -0.3px tracking.
-- **Disabled Gray** (`#9fa1a7`): Inactive CTA fills and disabled control text.
-
-### Pure Black
-- **Pure Black** (`#000000`): CTA label on green, maximum-contrast utility.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `NEXON Gothic Bold` -- the proprietary brand face, used on CTAs, emphasis, and bold captions.
-- **Fallback / Body**: `malgun gothic`, then `sans-serif` -- the running-text face for body copy and most navigation.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Nav Link | NEXON Gothic Bold / malgun | 16px | 400 | 1.20 | normal | Primary GNB items, `#17191d` |
-| Menu Link | malgun gothic | 14px | 400 | 1.20 | normal | Sub-nav, dropdown rows |
-| CTA | NEXON Gothic Bold | 14px | 700 | 1.20 | normal | Green CTA label, black text |
-| Body | malgun gothic | 12px | 400 | 1.20 | normal | Standard reading text |
-| Label | malgun gothic | 12px | 400 | 1.20 | -0.3px | Muted utility labels |
-| Caption Bold | NEXON Gothic Bold | 12px | 700 | 1.20 | normal | Bold footer labels, `#9fa1a7` |
-
-### Principles
-- **Two-face system**: NEXON Gothic Bold for shouting (CTAs, emphasis), `malgun gothic` for reading (body, most nav). The custom face is a deliberate brand stamp.
-- **Weight as emphasis**: 700 is reserved for CTAs and key labels; 400 carries everything else. The contrast between the two is the primary typographic signal.
-- **Tight line-height**: Compact ~1.2 line-heights keep dense Korean-web layouts legible without wasted vertical space.
-- **Small base size**: 12px body reflects the information-dense Korean portal convention; emphasis is created by weight and color, not large type.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary Green CTA**
-- Background: `#00de5a`
-- Text: `#000000`
-- Padding: 12px 24px
-- Radius: 0px (sharp)
-- Font: 14px NEXON Gothic Bold, weight 700
-- Use: Primary action -- "다운로드", "게임 시작", "지금 플레이"
-
-**Disabled CTA**
-- Background: `#9fa1a7`
-- Text: `#ffffff`
-- Padding: 12px 24px
-- Radius: 0px
-- Font: 14px weight 400
-- Use: Inactive / unavailable action
-
-**Ghost / Text Action**
-- Background: `#ffffff`
-- Text: `#17191d`
-- Padding: 10px 20px
-- Radius: 0px
-- Use: Secondary text-only actions
-
-### Navigation
-- Clean horizontal GNB on white (`#ffffff`)
-- Links: 16px, `#17191d` ink, NEXON Gothic Bold / malgun fallback
-- Active item: Nexon Green (`#00de5a`) bottom border underline
-- Sub-menu rows: 14px `malgun gothic`, `#17191d` on white
-
-### Cards & Containers
-- Background: `#ffffff`
-- Radius: 4px
-- Shadow (ambient): `rgba(0,0,0,0.08) 0px 2px 8px`
-- Shadow (elevated): `rgba(0,0,0,0.16) 0px 8px 24px`
-- Use: Game promo cards, event tiles on white canvas
-
-### Badges
-- Background: `#00de5a`
-- Text: `#000000`
-- Padding: 2px 8px
-- Radius: 4px
-- Font: 12px NEXON Gothic Bold, weight 700
-- Use: NEW / event markers
-
-### Inputs & Forms
-- Background: `#ffffff`
-- Border radius: 4px
-- Text: `#17191d`
-- Placeholder: `#919191` muted gray
-- Padding: 8px 12px
-
----
-
-**Verified:** 2026-06-09 (omd-add-reference live inspect)
-**Tier 1 sources:** https://www.nexon.com, https://www.nexon.com/Main/Index (Korean home + main surface, live DOM)
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px (with dense 4px micro-steps)
-- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 36px, 48px
-- Notable: Dense spacing reflects the Korean game-portal convention of fitting many entry points (games, events, community) above the fold.
-
-### Grid & Container
-- Full-width hero banner for the featured game, edge-to-edge
-- Below the hero: multi-column game grids and event tiles
-- Centered content column for corporate/IR pages
-- White canvas throughout, with cards as the primary content unit
-
-### Whitespace Philosophy
-- **Functional density**: Nexon packs many games and entry points into the layout; whitespace separates groups, not individual items.
-- **Green as the spotlight**: In a dense gray-and-white field, the green CTA is the deliberate focal point that pulls the eye.
-
-### Border Radius Scale
-- Sharp (0px): Buttons, nav items, GNB -- the game-UI default
-- Small (4px): Cards, badges, inputs
-- Large (8px): Larger feature containers
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | `none` | Page background, nav, inline text |
-| Ambient (Level 1) | `rgba(0,0,0,0.08) 0px 2px 8px` | Cards, hover lift |
-| Elevated (Level 2) | `rgba(0,0,0,0.16) 0px 8px 24px` | Dropdowns, modals, featured tiles |
-
-**Shadow Philosophy**: Nexon's elevation is purely functional. Shadows are neutral black at low alpha -- they exist to lift a card off the white canvas, not to add brand atmosphere. The brand energy comes entirely from color (`#00de5a`) and typography (NEXON Gothic Bold), never from decorative depth. This keeps the chrome calm so the game content and the green CTA carry all the visual voltage.
-
-## 7. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <768px | Single column, hamburger GNB, full-width CTAs |
-| Tablet | 768-1024px | 2-column game grids |
-| Desktop | >1024px | Full multi-column portal layout |
-
-### Touch Targets
-- CTAs use comfortable 12px vertical padding
-- Nav items spaced for tap on mobile GNB
-- Green CTA scales to full-width on mobile for thumb reach
-
-### Collapsing Strategy
-- GNB: horizontal links collapse to hamburger
-- Game grids: multi-column reduce to 2-column then single
-- Hero banner: maintains full-width, reduces internal padding
-- Body type holds at 12-14px; emphasis stays weight-driven
-
-## 8. Do's and Don'ts
-
-### Do
-- Reserve Nexon Green (`#00de5a`) for primary CTAs, active states, and brand accents -- scarcity is what makes it land
-- Pair black (`#000000`) text directly on the green -- the high-contrast combo is the brand signal
-- Use NEXON Gothic Bold for CTAs and emphasis; `malgun gothic` for body
-- Use near-black ink (`#17191d`) for headings and nav instead of pure black
-- Keep geometry sharp (0-4px radius) -- it echoes the game-UI heritage
-- Keep shadows neutral and functional -- elevation, not atmosphere
-- Use the gray scale (`#737881`, `#4a4e57`, `#919191`, `#9fa1a7`) for hierarchy
-
-### Don't
-- Don't overuse the green -- a page full of `#00de5a` kills its power-up impact
-- Don't put white text on the green CTA -- black is the brand-correct label
-- Don't use large pill radii on buttons -- Nexon's geometry is sharp and rectangular
-- Don't add colored or heavy decorative shadows -- elevation is functional only
-- Don't replace NEXON Gothic Bold on CTAs with a generic bold -- the proprietary face is the stamp
-- Don't use pure black (`#000000`) for body headings -- `#17191d` reads cleaner
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: Nexon Green (`#00de5a`) with black (`#000000`) label
-- Background: Pure White (`#ffffff`)
-- Heading / nav text: Ink (`#17191d`)
-- Body text: Body Gray (`#737881`)
-- Secondary label: Label Gray (`#4a4e57`)
-- Muted / placeholder: Muted Gray (`#919191`)
-- Disabled: Disabled Gray (`#9fa1a7`)
-
-### Example Component Prompts
-- "Create a primary CTA: `#00de5a` background, `#000000` text, 0px radius, 12px 24px padding, 14px NEXON Gothic Bold weight 700. Label '지금 플레이'."
-- "Design a game promo card: white background, 4px radius, shadow `rgba(0,0,0,0.08) 0px 2px 8px`. Title 16px `#17191d`, body 12px `#737881`. Green `#00de5a` NEW badge with black text, 4px radius."
-- "Build a GNB nav bar: white background, 16px `#17191d` links, active item with `#00de5a` bottom border underline."
-
-### Iteration Guide
-1. Green (`#00de5a`) is precious -- one or two appearances per viewport maximum
-2. Black on green, always -- never white-on-color
-3. NEXON Gothic Bold for CTAs/emphasis; malgun gothic for body
-4. Headings are `#17191d`, body is `#737881`, labels step through `#4a4e57` / `#919191`
-5. Sharp corners (0-4px); no pills
-6. Shadows are neutral black, low alpha, functional only
-
----
-
-## 10. Voice & Tone
-
-Nexon's voice is that of an established game publisher speaking to two audiences at once: players, with energy and immediacy, and the market and partners, with measured corporate confidence. On player-facing surfaces the register is direct and inviting -- "지금 플레이", "다운로드", short imperative verbs that map to the green "press start" CTA. On corporate, IR, and careers surfaces the same brand restraint applies, but the tone shifts to the steady, factual register of a major listed company.
-
-| Context | Tone |
-|---|---|
-| Game CTAs | Direct imperatives -- "지금 플레이", "사전등록", "다운로드". |
-| Game/event copy | Energetic, benefit-forward, but not hype-stacked. |
-| Corporate / IR | Measured, factual, the register of a publicly listed company. |
-| Careers / About | Confident, mission-oriented, talent-focused. |
-
-## 11. Brand Narrative
-
-Nexon was founded in **1994** in Seoul by **Jake Kim (Kim Jung-ju)** and is widely credited with pioneering the **massively multiplayer online (MMO) graphical game** and the **free-to-play, item-based business model** that reshaped global game monetization. Its 1996 title *Nexus: The Kingdom of the Winds* (바람의나라) is recognized as one of the world's first commercially successful graphical MMORPGs. Over three decades Nexon grew into one of the largest game publishers in Asia, operating franchises such as *MapleStory*, *Dungeon&Fighter*, *KartRider*, *FIFA Online*, and *The Finals*, and is publicly listed (Nexon Co., Ltd. on the Tokyo Stock Exchange).
-
-The brand identity is built around a single, confident gesture: the electric green "go" signal. In a category crowded with dark, fantasy-heavy game branding, Nexon's bright `#00de5a` on white reads as energetic, accessible, and modern -- a publisher's mark rather than a single game's skin. The proprietary **NEXON Gothic** typeface (released as a free public font family) reinforces a corporate identity that is consistent across dozens of game brands while remaining recognizably Nexon.
-
-What the brand refuses: a single dominant game aesthetic imposed on the corporate shell. The white canvas and disciplined gray-and-green system act as a neutral frame so that each game's own art can shine through, while the green CTA and NEXON Gothic stamp keep the publisher's identity present on every screen.
-
-## 12. Principles
-
-1. **Green is the spark, not the field.** The brand green works because it is scarce. Used as the CTA and accent only, it stays a power-up; used everywhere, it would become wallpaper.
-2. **Black on green, by design.** The high-contrast label pairing is intentional and industrial -- it signals confidence and refuses the soft default of white-on-color.
-3. **A neutral frame for vivid games.** The white-and-gray chrome is deliberately calm so that diverse game art can carry the color. The publisher's restraint is what lets the products be loud.
-4. **The typeface is the constant.** NEXON Gothic Bold appears across every game brand and every CTA -- one consistent voice unifying a varied portfolio.
-5. **Sharp geometry signals games.** The low-radius, rectangular forms tie the corporate site back to the pixel-grid heritage of the medium.
-6. **Energy without hype.** Player copy is immediate and direct; corporate copy is measured. Both avoid stacked superlatives.
-
-## 13. Personas
-
-*Personas below are fictional archetypes informed by publicly observable Nexon audience segments (Korean and global players, returning veterans, prospective partners/investors), not individual people.*
-
-**Min-jun Park, 24, Seoul.** University student and lifelong MapleStory player. Visits nexon.com to check events and download the launcher. Recognizes the green CTA instantly -- to him it means "the new event is live." Would be confused by a redesign that buried the play button under decorative chrome.
-
-**Soo-yeon Lee, 33, Busan.** Returning player who quit years ago and is curious about a remaster. Scans the game grid quickly, trusts the clean corporate frame as a sign the company is stable and still investing. Values that the site loads fast and information is dense.
-
-**David Chen, 41, Singapore.** Mid-market investor reviewing Nexon as a listed company. Lands on the IR/corporate surface, expects and finds a measured, factual register. The disciplined brand system reads to him as a sign of operational maturity.
-
-**Hana Kim, 28, Seoul.** Designer evaluating Nexon for a job. Notices the proprietary NEXON Gothic typeface and the restraint of the green-on-white system, and reads it as a brand team that understands scarcity and consistency.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no events)** | White canvas, single line in `#737881` body gray: "예정된 이벤트가 없습니다." No illustration. |
-| **Loading** | Neutral skeleton blocks in light gray at final dimensions, subtle shimmer. |
-| **Error** | Inline message in muted gray with a clear retry text action. Plain, factual wording. |
-| **Success (action done)** | Brief inline confirmation, no emoji. The green accent marks completion sparingly. |
-| **Disabled (CTA)** | Green fill switches to disabled gray (`#9fa1a7`) with white text -- clearly inert, brand color withheld. |
-| **Active (nav)** | Nexon Green (`#00de5a`) bottom-border underline on the current GNB item. |
-
-## 15. Motion & Easing
-
-**Durations**:
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-fast` | 120ms | Hover, focus, button press |
-| `motion-standard` | 240ms | Dropdown, menu, card hover lift |
-| `motion-slow` | 360ms | Hero banner carousel transitions |
-
-**Easings**:
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Menus, hover, two-way transitions |
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Dropdowns, banner arrivals |
-
-**Signature motions.**
-
-1. **CTA hover.** The green CTA brightens slightly on hover using `motion-fast / ease-standard` -- a quick, responsive "ready" signal, no scale bounce.
-2. **Hero banner carousel.** The featured-game banner crossfades or slides at `motion-slow`, giving each game a moment to register.
-3. **Reduce motion.** Under `prefers-reduced-motion: reduce`, carousel auto-advance pauses and transitions collapse to near-instant; the site stays fully functional.
-
-## 16. Do's and Don'ts
-
-### Do
-- Use Nexon Green (`#00de5a`) as the scarce, high-impact CTA and accent color
-- Pair black (`#000000`) on the green; near-black ink (`#17191d`) for headings
-- Apply NEXON Gothic Bold on CTAs and emphasis, `malgun gothic` for body
-- Keep corners sharp (0-4px) and shadows neutral/functional
-- Step text hierarchy through the gray scale (`#737881`, `#4a4e57`, `#919191`, `#9fa1a7`)
-- Let the white-and-gray frame stay calm so game art and the green CTA carry the energy
-
-### Don't
-- Don't flood the layout with green -- scarcity is the whole point
-- Don't use white text on the green CTA
-- Don't use pill/large radii or colored decorative shadows
-- Don't swap NEXON Gothic Bold for a generic bold on CTAs
-- Don't use pure black (`#000000`) for body headings -- prefer `#17191d`
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10–15)
-
-Token-level claims (sections 1–9) are sourced from a live Playwright
-getComputedStyle inspection of https://www.nexon.com (2026-06-09):
-  - Primary CTA: background rgb(0,222,90) = #00de5a, label rgb(0,0,0) = #000000,
-    font "NEXON Gothic Bold" 14px weight 700.
-  - Disabled CTA: background rgb(159,161,167) = #9fa1a7, white text.
-  - Heading/link ink: rgb(23,25,29) = #17191d; near-black link rgb(8,4,16) = #080410.
-  - Body: rgb(115,120,129) = #737881; label rgb(74,78,87) = #4a4e57;
-    muted rgb(145,145,145) = #919191 (tracking -0.3px).
-  - Body font fallback: "malgun gothic", "sans-serif".
-
-Brand narrative (§11) uses widely documented public facts:
-  - Nexon founded 1994 in Seoul by Jake Kim (Kim Jung-ju).
-  - Nexus: The Kingdom of the Winds (1996) among the first graphical MMORPGs.
-  - Pioneer of the free-to-play / item-based monetization model.
-  - Franchises: MapleStory, Dungeon&Fighter, KartRider, FIFA Online, The Finals.
-  - NEXON Gothic released as a free public typeface family.
-
-Personas (§13) are fictional archetypes informed by publicly observable
-Nexon audience segments, not real individuals. Interpretive claims about
-brand intent ("green as scarce power-up", "neutral frame for vivid games")
-are editorial readings connecting the measured design tokens to Nexon's
-publicly visible positioning, not official Nexon statements.
--->

package/.opencode/oh-my-design/web/references/nhncloud/.verification.md

@@ -1,23 +0,0 @@
-# NHN Cloud — Verification Notes (2026-06-01)
-
-## Proof — Tier 1 live inspect
-**Inspected:** 2026-06-01
-**Method:** playwright getComputedStyle (live DOM) + raw source-file fetch
-**Sources:**
-- https://www.nhncloud.com (live corporate DOM)
-- https://ui.toast.com (TOAST UI system entry point)
-- https://github.com/nhn (nhn GitHub org — TOAST UI source CSS)
-
-### Raw samples
-- live nhncloud.com/kr: primary CTAs background rgb(18,93,230) = #125DE6, radius 30px, height 40px, Pretendard Variable 15px/400
-- live nhncloud.com/kr: dark CTA background rgb(17,17,17) = #111111, radius 30px, height 40px
-- live nhncloud.com/kr: outline-on-dark CTA, 1px solid #FFFFFF border, radius 30px, height 50px, 17px/500
-- live nhncloud.com/kr: newsletter input border rgb(81,86,95) = #51565F, radius 6px, height 42px, 14px/400, muted text #727781
-- tui.grid grid.css: #00a9ff (primary accent), #0088d9 (hover), #e5f6ff (tint), font-size 13px — https://raw.githubusercontent.com/nhn/tui.grid/master/packages/toast-ui.grid/src/css/grid.css
-- tui.editor editor.css: #00a9ff (accent), #009bf2 (secondary blue), #fa2828 (error), #f7f9fc (neutral bg), border-radius 4px — https://raw.githubusercontent.com/nhn/tui.editor/master/apps/editor/src/css/editor.css
-
-## Tier 2 — cross-check
-- getdesign.md/nhncloud — NOT LISTED. refero — not listed. Note: corporate brand blue #125DE6 differs from TOAST UI accent #00a9ff (two surfaces) — documented as parallel systems rather than a conflict.
-
-## Country + regional sources
-- country KR; brand-owned regional sources (>=2 non-Western): https://www.nhncloud.com (NHN Cloud corporate site), https://ui.toast.com (TOAST UI official docs), https://github.com/nhn (NHN's official GitHub organization hosting the MIT-licensed TOAST UI source). All three are NHN-owned Korean-origin sources.

package/.opencode/oh-my-design/web/references/nhncloud/DESIGN.md

@@ -1,207 +0,0 @@
----
-id: "nhncloud"
-name: "NHN Cloud"
-country: KR
-category: backend-devops
-homepage: "https://www.nhncloud.com"
-primary_color: "#125DE6"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=nhncloud.com&sz=128"
-verified: "2026-06-01"
-omd: "0.1"
-ds:
-  name: TOAST UI
-  url: "https://ui.toast.com"
-  type: system
-  description: NHN's official open-source component library (TUI Grid/Editor/Calendar/Chart/Image-Editor), MIT-licensed under the nhn GitHub org and documented at ui.toast.com.
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#125de6"
-    dark: "#111111"
-    on-primary: "#ffffff"
-    accent: "#00a9ff"
-    accent-hover: "#0088d9"
-    accent-secondary: "#009bf2"
-    tint: "#e5f6ff"
-    error: "#fa2828"
-    canvas: "#f7f9fc"
-    border: "#51565f"
-    muted: "#727781"
-  typography:
-    family: { sans: "Pretendard Variable", mono: "Pretendard Variable" }
-    body:      { size: 16, weight: 400, use: "Corporate body copy" }
-    cta:       { size: 15, weight: 400, use: "Primary CTA label" }
-    cta-lg:    { size: 17, weight: 500, use: "Larger ghost CTA on dark" }
-    widget:    { size: 13, weight: 400, use: "TOAST UI grid/editor body" }
-  spacing: { sm: 8, md: 12, base: 16, lg: 19 }
-  rounded: { sm: 4, md: 6, lg: 30, full: 9999 }
-  shadow:
-    none: "none"
-  components:
-    cta-primary: { type: button, bg: "#125de6", fg: "#ffffff", radius: 30, padding: "8px 19px", font: "15px/400", use: "Primary corporate CTA pill" }
-    cta-dark: { type: button, bg: "#111111", fg: "#ffffff", radius: 30, font: "15px/400", use: "High-contrast alternate action" }
-    cta-ghost: { type: button, bg: "transparent", fg: "#ffffff", radius: 30, font: "17px/500", use: "Larger ghost pill on dark section" }
-    newsletter-input: { type: input, bg: "transparent", fg: "#727781", radius: 6, font: "14px/400", use: "Email capture field" }
-    widget-surface: { type: card, bg: "#f7f9fc", radius: 4, font: "13px/400", use: "Base TOAST UI widget surface" }
-    widget-selected: { type: card, bg: "#e5f6ff", radius: 4, use: "Selected/accented TOAST UI state" }
-  components_harvested: true
----
-# Design System Inspiration of NHN Cloud
-
-## 1. Visual Theme & Atmosphere
-
-NHN Cloud presents two distinct but related faces, and the brand's character lives in the gap between them. The corporate marketing site is confident and saturated — a vivid #125DE6 blue carried on large, fully-rounded pill CTAs that feel approachable and modern, anchored by clean near-black text on Pretendard Variable. The TOAST UI open-source widget library is the engineering counterpart: tighter, more functional, and a touch cooler in hue, leaning on a lighter accent blue (#00a9ff) and small 4px corner radii built for dense data interfaces like grids and editors. Where the corporate site sells trust and scale, the component library optimizes for legibility and information density. Together they read as one company speaking two registers — the marketing voice for executives evaluating an enterprise cloud, and the practitioner voice for developers embedding NHN's tools. The consistent thread is a blue-forward, clean, no-nonsense Korean enterprise aesthetic that never feels playful for its own sake.
-
-## 2. Color Palette & Roles
-The brand operates across two surfaces, each with its own blue.
-
-**Corporate site (live nhncloud.com)**
-- Brand primary blue: #125DE6 (rgb 18,93,230) — every primary CTA
-- Dark CTA: #111111 — high-contrast alternate action
-- Newsletter input border: #51565F
-- Muted text: #727781
-- Body text: near-black
-
-**TOAST UI (source-verified CSS)**
-- Accent blue: #00a9ff — primary interactive accent
-- Hover / active blue: #0088d9
-- Light tint: #e5f6ff
-- Secondary blue: #009bf2
-- Error red: #fa2828
-- Neutral background: #f7f9fc
-
-Roles: on the corporate surface, #125DE6 is reserved for the single most important action on a section, with #111111 serving as a dark high-contrast alternate. On TOAST UI, #00a9ff drives interactive accents with #0088d9 as the hover/active darkening and #e5f6ff as a soft selection/tint fill; #fa2828 is the dedicated error signal and #f7f9fc the calm neutral canvas behind widgets.
-
-## 3. Typography Rules
-The corporate site uses Pretendard Variable throughout. Body copy is set at 16px; primary CTAs render at 15px / 400; a secondary heading-style CTA steps up to 17px / 500 for slightly more presence. The TOAST UI library defaults to a compact 13px body, appropriate for the data-dense grids and editors it powers. The hierarchy is restrained: weight moves between 400 and 500 rather than relying on heavy display weights, and size differences are modest, keeping the overall feel even and professional. Use Pretendard Variable for any corporate-aligned interface and the smaller 13px scale when matching the embedded TOAST UI surface.
-
-## 4. Component Stylings
-
-### Primary CTA (Corporate)
-
-**Vivid-blue pill**
-- Background: #125DE6
-- Text: #FFFFFF
-- Border: none
-- Radius: 30px
-- Padding: 8px 19px
-- Height: 40px
-- Font: 15px / 400
-- Use: the primary call-to-action on corporate marketing sections
-
-### Dark CTA (Corporate)
-
-**Near-black pill**
-- Background: #111111
-- Text: #FFFFFF
-- Border: none
-- Radius: 30px
-- Height: 40px
-- Font: 15px / 400
-- Use: high-contrast alternate primary action
-
-### Outline CTA on Dark (Corporate)
-
-**Ghost pill**
-- Background: transparent
-- Text: #FFFFFF
-- Border: 1px solid #FFFFFF
-- Radius: 30px
-- Height: 50px
-- Font: 17px / 500
-- Use: larger secondary action placed over a dark section
-
-### Newsletter Input (Corporate)
-
-**Transparent field**
-- Background: transparent
-- Text: #727781
-- Border: 1px solid #51565F
-- Radius: 6px
-- Height: 42px
-- Font: 14px / 400
-- Use: email capture field in the newsletter/footer area
-
-### TOAST UI Widget Element (Source)
-
-**Compact surface**
-- Background: #f7f9fc
-- Text: near-black
-- Border: derived from accent #00a9ff on interactive states
-- Radius: 4px
-- Font: 13px / 400
-- Use: base styling for TOAST UI grid/editor widgets
-
-**Interactive (accent)**
-- Background: #e5f6ff
-- Border: #00a9ff
-- Use: selected / accented state within the widget
-
-**Hover / active**
-- Border: #0088d9
-- Use: hover and active darkening of the accent
-
-## 5. Layout Principles
-The corporate site favors generous, breathing layouts where a single saturated CTA anchors each section against ample whitespace, letting the vivid blue do the work of directing attention. Fully-rounded 30px pills are placed as clear focal points rather than crowded clusters. The TOAST UI surface inverts this priority: it is built for density, with the calm #f7f9fc neutral background framing tight, legible grids and editors at the 13px scale and small 4px radii that keep many adjacent cells visually quiet. Match the corporate layout when designing marketing or top-of-funnel pages, and the TOAST UI layout when designing functional, data-heavy application screens.
-
-## 6. Depth & Elevation
-NHN Cloud reads as a fundamentally flat, modern system on both surfaces — depth is expressed through color contrast and crisp 1px borders rather than heavy shadow. On the corporate site, separation comes from the saturated #125DE6 (or #111111) fill standing out against light backgrounds, and from thin 1px outlines such as the #51565F input border and the #FFFFFF ghost-button stroke. On TOAST UI, the #f7f9fc neutral canvas and small 4px-radius elements establish quiet layering, with the #00a9ff accent and #e5f6ff tint lifting interactive elements forward through hue rather than elevation. Keep elevation subtle: prefer contrast and hairline borders over drop shadows.
-
-## 7. Do's and Don'ts
-
-### Do
-- Reserve #125DE6 for the single primary action on a corporate section.
-- Use Pretendard Variable for corporate-aligned interfaces.
-- Use fully-rounded 30px pills for corporate CTAs and the compact 4px radius for TOAST UI elements.
-- Keep the two surfaces visually distinct: vivid #125DE6 for corporate, lighter #00a9ff for TOAST UI.
-
-### Don't
-- Blur the two blues — #125DE6 (corporate) and #00a9ff (TOAST UI) are not interchangeable.
-- Introduce heavy drop shadows; rely on color contrast and 1px borders.
-- Crowd multiple saturated pills together; let one CTA lead.
-- Use the dense 13px scale on marketing pages or the large pills inside data grids.
-
-## 8. Responsive Behavior
-Component sizing in the blob points to comfortable, finger-friendly targets: corporate CTAs stand at 40px high (50px for the larger ghost button) and the newsletter input at 42px, with rounded 30px pills that stay legible at small widths. The Pretendard Variable type scale — 16px body, 15px and 17px CTAs — remains readable across breakpoints without restyling. The TOAST UI surface, designed for embedding, holds its compact 13px scale and 4px radii so that grids and editors retain density on whatever container they sit in. Preserve these heights and radii across viewports; scale layout and spacing rather than re-theming the components.
-
-## 9. Agent Prompt Guide
-When generating UI in the NHN Cloud style, first decide which surface you are matching. For corporate/marketing work, use Pretendard Variable, set body at 16px, and render the primary CTA as a fully-rounded 30px pill with background #125DE6, white text, 15px / 400, 40px tall, padding 8px 19px; offer #111111 as a dark alternate and a transparent ghost button with a 1px #FFFFFF border (50px, 17px / 500) over dark sections; style inputs as transparent fields with a 1px #51565F border, 6px radius, 42px height, #727781 text at 14px / 400. For TOAST UI / application work, use the 13px scale, 4px radii, an #f7f9fc neutral background, the #00a9ff accent with #0088d9 hover and #e5f6ff tint, #009bf2 as a secondary blue, and #fa2828 for errors. Never mix the two blues, and never invent shadows the system doesn't use.
-
-## 10. Voice & Tone
-NHN Cloud speaks in two registers tied to its two surfaces. The corporate voice is confident, trust-building, and enterprise-minded — selling scale, reliability, and partnership to decision-makers, with bold blue CTAs that invite a clear next step. The TOAST UI voice is the practitioner's: precise, functional, and documentation-driven, addressing developers who want their widgets to work predictably. Keep corporate copy assured and outcome-focused; keep TOAST UI copy exact and utilitarian.
-
-## 11. Brand Narrative
-NHN Cloud is the enterprise cloud arm of NHN Corp, headquartered in Pangyo, Korea. Its identity is built on two complementary pillars: a polished corporate presence that markets cloud infrastructure to enterprises, and TOAST UI — NHN's open-source component library (TUI Grid, Editor, Calendar, Chart, Image-Editor) released MIT-licensed under the nhn GitHub organization and documented at ui.toast.com. This pairing mirrors how strong product companies maintain a marketing surface and a developer surface side by side: the corporate site earns trust at the buying level, while TOAST UI earns credibility at the building level. The brand's story is one of a Korean enterprise that both sells the cloud and contributes the tools developers use on top of it.
-
-## 12. Principles
-- Two surfaces, one brand: corporate marketing and TOAST UI are parallel systems, each internally consistent.
-- Blue-forward clarity: a single saturated blue leads attention on each surface.
-- Flat and clean: contrast and hairline borders over shadow.
-- Density where it counts: marketing breathes; application widgets pack tight at 13px / 4px.
-- Restraint in type: weights stay between 400 and 500.
-
-## 13. Personas
-- Enterprise buyer: evaluating NHN Cloud for infrastructure; meets the confident corporate site, vivid #125DE6 CTAs, and Pretendard Variable copy.
-- Developer / integrator: embedding TOAST UI widgets; works in the compact 13px, 4px-radius surface with the #00a9ff accent system.
-- Korean enterprise team: expecting a clean, professional, blue-forward Korean cloud aesthetic across both touchpoints.
-
-## 14. States
-- Default (corporate CTA): #125DE6 background, white text, 30px pill.
-- Default (TOAST UI accent): #00a9ff accent on #f7f9fc neutral background.
-- Hover / active (TOAST UI): accent darkens to #0088d9.
-- Selected / tinted (TOAST UI): #e5f6ff light tint fill with #00a9ff edge.
-- Error (TOAST UI): #fa2828 red.
-- Input resting (corporate): transparent field, 1px #51565F border, #727781 text.
-
-## 15. Motion & Easing
-No motion or easing values were captured in live inspection, so specifics are not asserted here. In keeping with the system's flat, clean, contrast-driven character, treat motion as restrained and functional: brief, confident transitions on the corporate CTAs and the lightest possible state feedback on TOAST UI's dense widgets, where the #00a9ff → #0088d9 darkening communicates interaction without distracting from data. Favor subtle, purposeful movement over decorative animation.
-
----
-**Verified:** 2026-06-01
-**Tier 1 sources:** https://www.nhncloud.com (live corporate DOM — #125DE6 primary CTAs, #111111 dark CTA, #51565F input border, #727781 muted text, Pretendard Variable 16/15/17px), https://ui.toast.com (TOAST UI system entry point — open-source widget library), https://github.com/nhn (nhn org source CSS — tui.grid grid.css #00a9ff/#0088d9/#e5f6ff 13px, tui.editor editor.css #00a9ff/#009bf2/#fa2828/#f7f9fc radius 4px)
-**Tier 2 sources:** getdesign.md/nhncloud — NOT LISTED. refero — not listed. Note: corporate brand blue #125DE6 differs from TOAST UI accent #00a9ff (two surfaces).
-**Conflicts unresolved:** none
-**Proof:** see .verification.md (## Proof block)

package/.opencode/oh-my-design/web/references/nike/.verification.md

@@ -1,21 +0,0 @@
-# Nike — Verification Notes (2026-06-06)
-
-## Proof — Tier 1 live inspect
-**Inspected:** 2026-06-06
-**Method:** playwright getComputedStyle (live DOM) on the production site
-**Sources:**
-- https://www.nike.com
-
-### Raw samples
-- live www.nike.com body text: color #ffffff, font 16px, family Helvetica Now Text — source: live DOM getComputedStyle
-- live www.nike.com page background: color #111111 — source: live DOM getComputedStyle
-- live www.nike.com root background: color #000000 — source: live DOM getComputedStyle
-- live www.nike.com heading: color #ffffff, font 16px, / 500, family Helvetica Now Display Medium — source: live DOM getComputedStyle
-- live www.nike.com primary button: color #1f1f21, background #ffffff, border-radius 30px, height 46px, font 16px, / 500 — source: live DOM getComputedStyle
-- live www.nike.com link: color #ffffff — source: live DOM getComputedStyle
-
-## Tier 2 — cross-check
-- Live-DOM computed values above are the source of truth for this reference's hex/px tokens. DESIGN.md token roles were reconciled against these measurements.
-
-## Country sources
-- country US; brand-owned live source: https://www.nike.com (production site, all hex/px captured via live DOM getComputedStyle).