oh-my-design-cli 1.6.0 → 1.6.1

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/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"`

package/web/references/lunit/DESIGN.md

@@ -10,6 +10,25 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=lunit.io&sz=256"
 verified: "2026-05-14"
 omd: "0.1"
+
+## 16. Do's and Don'ts
+
+### Do
+- Set every section, card, image, input, and footer to `border-radius: 0` and round only the single primary CTA pill to `100px`, honoring the binary radius thesis
+- Pair ClashGrotesk for headings and Lexend for body, keeping both at LIGHT weights — H1 at 78px/84px weight 400, body at 18.4px weight 300 — so authority reads through size and air, not heft
+- Fill the primary marketing CTA as a black pill (`#000000` background, `#ffffff` label) and withhold the signature blue `#1032cf` from primary actions
+- Set body ink in warm-cool gunmetal `#232f32` and hero H1 in near-black `#151515`, never pure `#000`, for standing copy
+- Build depth through full-bleed band switching (white canvas → black band → off-white footer `#eff0f4`) with `box-shadow: none` everywhere
+- Reserve the signature blue `#1032cf` (bright sibling `#2a4eef`) for system, cookie, hover, and dark-band moments, and use AOS scroll-reveal fades as the only motion
+
+### Don't
+- Apply mid-range radii like 4px, 6px, 8px, 12px, or 16px anywhere, or round cards, images, or surfaces that are not the primary action
+- Use the saturated signature blue `#1032cf` on the primary CTA — the brand-action color is black, and blue is deliberately withheld
+- Reach for bold or semibold typographic weights to add confidence; LIGHT weight is the rule across all heading levels
+- Add drop shadows or floating card elevation — depth comes from band switching, not floating objects
+- Add hero video autoplay, parallax, or animated stat counters on the `10,000+` band; keep motion to low-amplitude AOS fades
+- Introduce stock smiling-team photography, hex-mesh/circuit-board/neural-net cliché, multi-accent green-blue-orange palettes, exclamation marks, or emotive verbs like 'transform lives'
+
 ---
 
 # Design System Inspiration of Lunit

package/web/references/melon/DESIGN.md

@@ -0,0 +1,153 @@
+---
+id: melon
+name: "Melon"
+country: KR
+category: entertainment
+homepage: "https://www.melon.com"
+primary_color: "#00CD3C"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=melon.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+
+# Design System Inspiration of Melon
+
+## 1. Visual Theme & Atmosphere
+
+Melon is Korea's dominant music-streaming service, operated by Kakao Entertainment, and its interface wears that scale on its sleeve: a dense, white, content-first surface where charts, lists, and player controls are packed tightly together and the music is always the point. The atmosphere is utilitarian and high-density — small type at 12px for body and 13-14px for controls, near-black #1A1A1A headings, and sharp 0px corners everywhere — so the screen reads like a tightly ruled spreadsheet of songs rather than a soft consumer app. Against that white #FFFFFF ground, the signature Melon green (#00CD3C in the source CSS, rendering as a near-twin #00D344 on the live login button) is rationed carefully, lighting up only active navigation, selected tabs, player buttons, and primary actions. Everything else is a quiet grayscale hierarchy — #666666 for muted text, #999999 for the lightest labels and placeholders — that lets the green do all the signaling. The result is unmistakably brand-green-on-white: grid-like, efficient, and built for browsing thousands of tracks without visual fatigue. It is the look of a tool that expects you to scan, tap, and keep listening.
+
+## 2. Color Palette & Roles
+
+- **Signature green #00CD3C** — the brand-defining Melon green; primary actions, active nav, selected tabs, player buttons (appears ~11x in the live CSS).
+- **Darker green #00B523** — a deeper green variant used as a companion to the signature green.
+- **Login button green #00D344** — the live-rendered green on the primary login button; a near-twin of #00CD3C.
+- **Near-black #1A1A1A** — heading and primary text color against the white ground.
+- **Muted gray #666666** — default body text color (live body renders rgb(102,102,102)).
+- **Light gray #999999** — the lightest text tier; secondary labels and input placeholder text.
+- **Red accent #DF2607** — a sharp red accent used sparingly.
+- **Ground #FFFFFF** — the white canvas the entire dense layout sits on.
+
+The green is the only saturated color allowed to carry meaning; the reds appear as rare accents, and the rest of the palette is a disciplined grayscale ladder from #1A1A1A down through #666666 to #999999 on white.
+
+## 3. Typography Rules
+
+- **Typeface:** Pretendard, with 맑은 고딕 (Malgun Gothic) as the fallback.
+- **Body text:** 12px — the dense default for list rows and metadata; renders in muted gray #666666.
+- **Controls:** 13-14px — interactive controls and inputs sit slightly larger than body for tap targets.
+- **Headings / primary text:** near-black #1A1A1A.
+- **Weights observed:** 400 (regular) on buttons and inputs.
+
+The type system is deliberately small and dense, suiting a content-first streaming UI that must show many rows at once. Color, not size, does most of the hierarchy work — near-black #1A1A1A for what matters, #666666 for supporting text, #999999 for the quietest labels.
+
+## 4. Component Stylings
+
+### Login Button
+
+**Primary (live-rendered green)**
+- Background: #00D344
+- Text: #FFFFFF
+- Border: none
+- Radius: 0px
+- Height: 42px
+- Font: 14px / 400
+- Use: primary login / sign-in action; the sharp-cornered green button that anchors account entry
+
+### Search Input
+
+**Default**
+- Background: transparent
+- Text: #999999
+- Radius: 0px
+- Height: 40px
+- Font: 13px / 400
+- Use: search field; placeholder and text both render in light gray #999999
+
+### Body / List Text
+
+**Default row text**
+- Background: #FFFFFF
+- Text: #666666
+- Border: none
+- Radius: 0px
+- Font: 12px / 400
+- Use: dense chart and list rows; the workhorse text style across the streaming grid
+
+Across components the corners are uniformly square (0px radius), reinforcing the dense, grid-like streaming layout rather than a soft, rounded consumer feel.
+
+## 5. Layout Principles
+
+Melon is built around density. The layout is a content-first grid of packed charts and lists where many rows are visible at once, and the square 0px corners on buttons and inputs make the whole surface read like ruled cells rather than floating cards. White #FFFFFF is the dominant ground, giving the small 12px body text and #666666 metadata room to breathe inside an otherwise tightly packed screen. The green is placed structurally — on active nav, selected tabs, and primary actions — so wayfinding rides on color, not on heavy chrome. The overall principle is utilitarian: maximize the number of songs and controls in view, keep the framing minimal, and let the brand green mark the live, actionable elements.
+
+## 6. Depth & Elevation
+
+Melon's surface is flat by design. With 0px radius on its buttons and inputs and a uniform white #FFFFFF ground, the UI avoids rounded cards and soft floating layers in favor of a dense, grid-like plane. There is no measured shadow or elevation token in the verified data, so depth here is communicated through color and contrast — near-black #1A1A1A and the signature green #00CD3C advancing against the white field — rather than through drop shadows or layered surfaces. The aesthetic is sharp, square, and screen-efficient, treating the page as a single tightly organized sheet.
+
+## 7. Do's and Don'ts
+
+### Do
+- Keep the ground white (#FFFFFF) and let dense lists and charts fill the screen.
+- Ration the signature green (#00CD3C / live #00D344) for active states and primary actions only.
+- Use square 0px corners on buttons and inputs to preserve the grid-like, streaming-tool feel.
+- Build the text hierarchy from color — #1A1A1A for primary, #666666 for body, #999999 for the quietest labels.
+- Use Pretendard (with 맑은 고딕 fallback) and keep type small: 12px body, 13-14px controls.
+
+### Don't
+- Invent rounded corners or soft cards — the corners are sharp (0px) throughout.
+- Spread the green across large surfaces; it loses its signaling power if it stops being rare.
+- Inflate type sizes; the density depends on small 12-14px text.
+- Introduce the red accent (#DF2607) broadly — keep it as a sparing accent.
+
+## 8. Responsive Behavior
+
+The verified inspection covers the desktop web surface of melon.com, where the design is a dense, multi-column grid of charts and lists with small 12px body text and 40-42px control heights. No mobile breakpoint measurements are present in the verified data, so responsive specifics are described qualitatively: the density-first philosophy — many rows visible, square corners, color-driven wayfinding — is the constant, and any narrower layout would be expected to preserve the small type scale and the rationed green rather than redesign around them. Control heights in the 40-42px range (search input 40px, login button 42px) suggest comfortable tap targets even within the dense frame.
+
+## 9. Agent Prompt Guide
+
+When generating UI in the Melon style, instruct the agent: build on a white #FFFFFF ground with a dense, content-first grid of lists and charts. Use Pretendard (fallback 맑은 고딕) at small sizes — 12px body, 13-14px controls. Set text color by tier: #1A1A1A for headings and primary text, #666666 for body, #999999 for placeholders and the quietest labels. Make all buttons and inputs square (border-radius 0px). Use the signature Melon green only for primary actions and active states — primary button background #00D344 (or source green #00CD3C), white #FFFFFF text, 42px height, 14px/400 font. Search inputs: transparent background, #999999 text and placeholder, 40px height, 13px/400. Keep the red #DF2607 as a rare accent. Avoid rounded cards, drop shadows, and large type — the whole point is a sharp, high-density, green-on-white streaming tool.
+
+## 10. Voice & Tone
+
+Melon's voice is utilitarian and unfussy, matching a tool that exists to get you to the music fast. It is content-first: the product trusts the charts, lists, and track metadata to carry the experience, so the surrounding language stays brief, functional, and direct. Where the brand asserts itself, it does so through the green, not through chatty copy — the tone is efficient and confident, the voice of Korea's dominant streaming service that assumes you came to listen, not to read.
+
+## 11. Brand Narrative
+
+Melon is Korea's dominant music-streaming service, operated by Kakao Entertainment. Its identity is anchored by the signature Melon green — #00CD3C in the source CSS, rendering as a near-twin #00D344 on the live login button — set against an almost entirely white, high-density interface. The narrative is one of utility at scale: thousands of tracks, packed charts, and player controls organized into a sharp, square, grid-like surface where the brand green is rationed to mark the live and actionable. It is a design that says streaming is a daily utility, and that the brand's job is to be fast, dense, and unmistakably green-on-white.
+
+## 12. Principles
+
+- **Density over decoration** — pack charts and lists; show many rows; keep framing minimal.
+- **Green is precious** — reserve the signature green (#00CD3C / #00D344) for active states and primary actions.
+- **Sharp corners** — square 0px radius across components; no soft, rounded consumer look.
+- **Color-driven hierarchy** — #1A1A1A / #666666 / #999999 do the structural work; type stays small.
+- **White ground always** — #FFFFFF is the canvas that makes the green and the dense lists legible.
+- **Content first** — the music and its metadata are the interface; chrome stays out of the way.
+
+## 13. Personas
+
+- **The daily listener** — opens Melon to scan charts and queue tracks; rewarded by density, fast browsing, and clear green active states that show where they are.
+- **The chart watcher** — comes for the rankings and lists; the small 12px rows and #666666 metadata let many entries sit on screen at once.
+- **The quick searcher** — taps the search input (40px, #999999 placeholder) to jump straight to a song; the utilitarian, square UI gets out of the way.
+
+## 14. States
+
+- **Default text:** #666666 body at 12px on white #FFFFFF.
+- **Primary text / headings:** near-black #1A1A1A.
+- **Placeholder / quiet label:** #999999 (search input text and placeholder).
+- **Active / selected (nav, tabs, player):** signature green #00CD3C.
+- **Primary action (login button):** background #00D344, white #FFFFFF text, 42px height.
+- **Accent:** red #DF2607, used sparingly.
+
+Hover, pressed, focus, and disabled state values were not captured in the verified data and are intentionally left undocumented rather than invented.
+
+## 15. Motion & Easing
+
+No motion, transition, or easing values were captured in the verified inspection of melon.com, so none are specified here. Qualitatively, the design's character is static and efficiency-driven — a dense, square, grid-like streaming surface — which implies restrained, functional motion (if any) rather than expressive animation. Any motion added in this style should stay subtle and quick, in keeping with the utilitarian, content-first feel, but no specific durations or curves are claimed because none were measured.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.melon.com (official Melon service homepage, live CSS source), https://tech.kakaoent.com (Kakao Entertainment tech, Melon's operator), https://www.kakaocorp.com/page/service/service/Melon (Kakao Corp official Melon service page)
+**Tier 2 sources:** getdesign.md/melon — NOT LISTED. refero — not listed. Note: live login button renders #00D344, a near-twin of the CSS signature green #00CD3C.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/nhncloud/DESIGN.md

@@ -0,0 +1,174 @@
+---
+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.
+---
+# 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/web/references/oliveyoung/DESIGN.md

@@ -208,6 +208,25 @@ Olive Young presents as a **dense, scan-first H&B catalog**: a near-monochrome g
 - Border: 0 (separated by `#EBEBEB` grid gap)
 - Use: Search result / category list / best list
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Keep all chrome — nav, header, footer, buttons, search input, headings — on the `#131518`–`#888` grayscale neutrals and reserve every hue for status payload
+- Confine the five flag hues (`#F65C60` sale, `#F374B7` 오늘드림, `#9BCE26` coupon, `#6FCFF7` gift, `#F05A5E` best) to inside the thumbnail rectangle as 9px-radius status pills
+- Map each flag color 1:1 to a single service fact (sale / same-day / coupon / gift / best) rather than to a marketing mood
+- Encode interactive state with ink-darkening plus shape change — e.g. flip active pagination from transparent/`#888` radius-0 to `#2F3030`/`#FFF` 50% circle — not with hue
+- Keep the Korean fallback chain ending at `dotum / 돋움` to preserve rendering for older Windows/macOS Korean readers
+- Write CTAs as factual `하기`-verb labels like "장바구니 담기" and "찜하기" in casual-polite declarative tone, not imperative urgency copy
+
+### Don't
+- Put any flag color or hue on a primary CTA or chrome surface — the filled CTA stays `#000000` background with `#FFFFFF` text
+- Introduce a sixth status color for a "new" or extra badge — reuse one of the existing five flag roles or skip the chrome
+- Add hover lift, shadow gain, or drop shadows to tiles, chips, or pills — depth in this system stays line-only and state is static-encoded
+- Spread Olive Green or the coupon lime `#9BCE26` across chrome or large backgrounds — corporate olive is absent from the storefront and the lime lives only in the coupon flag
+- Prune the Korean fallback chain down to system-ui only, dropping the deliberate `돋움` legacy-OS support floor
+- Reproduce verbatim Olive Young marketing taglines or write hard-sell copy like "지금 안 사면 손해예요" — copy works as neutral labels and offers
+
 ---
 
 **Verified:** 2026-05-15