oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/mustit/DESIGN.md

@@ -0,0 +1,282 @@
+---
+id: mustit
+name: "MUSTIT"
+country: KR
+category: ecommerce
+homepage: "https://www.mustit.co.kr"
+primary_color: "#D00000"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=mustit.co.kr&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# MUSTIT
+
+Korea's leading luxury resale marketplace connecting 1,300+ luxury brands and millions of monthly shoppers through a mobile-first, discovery-driven experience.
+
+## 1. Visual Theme & Atmosphere
+
+MUSTIT projects a disciplined luxury-marketplace aesthetic: a near-black (`#1F1F2C`) and white canvas that recedes so individual product photography can dominate, accented by a single assertive brand red (`#D00000`) that marks every price-cut, badge, and primary CTA. The official brand philosophy — "Smart Luxury — Make the Best Discovery" — is made tangible through high-density list grids, tight typographic hierarchy in Pretendard, and a periscope-lens symbol (M SCOPE) that signals personal curation. Shadow use is deliberately restrained (max `rgba(0,0,0,.05)`), surfaces feel flat and minimal, and the red accent creates instant visual priority in a visually busy product grid.
+
+## 2. Color Palette & Roles
+
+- **Brand Navy:** `#1F1F2C` — official primary brand color (CI logotype, hero backgrounds, brand header)
+- **Brand Red:** `#D00000` — primary action color; discount price labels, primary CTA button, cart badge, active filter, sale tag
+- **Text Primary:** `#222222` — body text, product titles, prices, headings
+- **Text Secondary:** `#888888` — captions, secondary metadata, placeholder
+- **Text Tertiary:** `#555555` — supporting body copy, sub-descriptions
+- **Text Disabled:** `#cccccc` — disabled input labels, muted controls
+- **Info Blue:** `#3083e4` — informational tags, delivery status, link text
+- **Outlet Burgundy:** `#8c1e46` — outlet badge background
+- **Background White:** `#ffffff` — page and card backgrounds
+- **Surface Light:** `#fafafa` — list section backgrounds, hot deal section
+- **Surface Mid:** `#f5f5f5` — divider fills, skeleton base
+- **Border Default:** `#e6e6e6` — card borders, divider lines
+- **Border Subtle:** `#f0f0f0` — tab underlines, light dividers
+
+## 3. Typography Rules
+
+Primary typeface: **Pretendard** (all UI copy); secondary: **SD Gothic Neo** (legacy web); display: **Archivo Expanded** (brand marketing/corp headings).
+
+| Token | Size | Weight | Line-height | Usage |
+|-------|------|--------|-------------|-------|
+| Display | 28px | 700 | 1.35 | Section hero titles |
+| Title L | 24px | 700 | 1.33 | Modal, page headers |
+| Title M | 20px | 700 | 1.35 | Section headers |
+| Title S | 18px | 600 | 1.5 | Card group titles |
+| Body L | 16px | 500 | 1.5 | Navigation links |
+| Body M | 15px | 600 | 1.47 | Button labels, product name |
+| Body S | 14px | 700 | 1.43 | Product price, form labels |
+| Caption L | 13px | 700 | 1.38 | Search keyword, chips |
+| Caption S | 12px | 700 | 1.33 | Metadata, sizes |
+| Label | 11px | 700 | 1.45 | Badges, micro-copy |
+| Fine | 10px | 400 | 1.6 | Legal, cart count |
+
+## 4. Component Stylings
+
+### Button
+
+**Primary (Black)**
+- Background: `#333333`
+- Text: `#ffffff`
+- Radius: 4px
+- Height: 48px
+- Font: 15px / 600
+- Padding: 0 16px
+
+**Primary (Red / Confirm)**
+- Background: `#D00000`
+- Text: `#ffffff`
+- Border: 1px solid `#D00000`
+- Radius: 4px
+- Height: 48px
+- Font: 18px / 500
+
+**Outline (Secondary)**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: 1px solid `#333333`
+- Radius: 4px
+- Height: 32px
+- Font: 13px / 600
+
+**Disabled**
+- Background: `#ffffff`
+- Text: `#888888`
+- Border: 1px solid `#dddddd`
+- Radius: 4px
+
+---
+
+### Tab
+
+**Active**
+- Text: `#222222`
+- Font: 16px / 700
+- Border-bottom: 2px solid `#222222`
+
+**Inactive**
+- Text: `#aaaaaa`
+- Font: 16px / 500
+
+---
+
+### Badge
+
+**Outlet**
+- Background: `#8c1e46`
+- Text: `#ffffff`
+- Radius: 2px
+- Height: 22px
+- Padding: 0 8px
+- Font: 11px / 700
+
+**Info Tag**
+- Text: `#3083e4`
+- Border: 1px solid `#3083e4`
+- Radius: 2px
+- Height: 24px
+- Font: 12px / 400
+
+---
+
+### Filter Chip
+
+**Default**
+- Border: 1px solid `#cccccc`
+- Radius: 17px
+- Height: 34px
+
+**Active**
+- Border: 1px solid `#D00000`
+- Radius: 17px
+
+---
+
+### Search Input
+
+**Default**
+- Background: `#ffffff`
+- Text: `#222222`
+- Radius: 4px
+- Height: 40px
+- Padding: 0 12px
+- Font: 15px / 600
+
+**Placeholder**
+- Text: `#aaaaaa`
+- Font: 15px / 400
+
+---
+
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.mustit.co.kr (homepage HTML + embedded CSS bundle, 1.2 MB), https://corp.mustit.co.kr/brand (CI/BI brand page HTML), https://corp.mustit.co.kr/lib/css/mustit-corp.css (corp brand CSS, 70 kB), https://static-ux.mustit.co.kr/ux/service/common/pretendard.css (font CSS)
+**Tier 2 sources:** getdesign.md/mustit — NOT LISTED (no data returned). refero — KR/TW brand, no result expected.
+**Conflicts unresolved:** The main shopping app uses `#333` as the primary CTA (near-black), while the corp site uses `#000`/`#1F1F2C` for brand backgrounds; `#D00000` is consistent across both as the accent/discount/action color.
+
+## 5. Layout Principles
+
+MUSTIT is built mobile-first as a Nuxt.js SPA served from `m.web.mustit.co.kr`. The standard content gutter is 16px on each side. Product grids use a 2-column layout with an ~8px gap between cards. Sections are separated by a 10px gray divider strip (`#f5f5f5`) or a 1px border line (`#f0f0f0`). The bottom fixed action bar (buy / cart) sits above the native safe-area inset. Maximum content width on desktop is 360–420px, centered with a white card. Sticky top navigation height is 44–56px.
+
+## 6. Depth & Elevation
+
+Surfaces are intentionally flat. Elevation is expressed through subtle shadows, not strong drop shadows:
+
+- **Level 0** — flat (no shadow): content sections, list items
+- **Level 1** — `box-shadow: 0 2px 4px 0 rgba(0,0,0,.03)`: product cards, filter chips
+- **Level 2** — `box-shadow: 0 2px 8px 0 rgba(0,0,0,.05)`: bottom sheets, filter buttons
+- **Overlay** — `background: rgba(0,0,0,.5)`: modal/sheet backdrop
+- **Dark scrim** — `rgba(0,0,0,.03)` pseudo-overlay on product thumbnails
+
+Bottom sheets use `border-radius: 15px 15px 0 0`; modals/alerts use `border-radius: 8px`.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#D00000` exclusively for price discounts, sale badges, and primary conversion CTAs
+- Keep all button radius at 4px for UI elements; use 17px+ only for pill chips/filter controls
+- Use Pretendard weight 700 for all prices and product names to create scan hierarchy
+- Keep section backgrounds alternating between `#ffffff` and `#fafafa` for visual rhythm
+- Apply `transition: all 0.2s ease` for interactive micro-feedback (hover/active states)
+- Use the 16px horizontal gutter consistently across all list and card views
+
+### Don't
+- Don't mix the brand red `#D00000` with decorative elements — reserve it for urgency/action signals
+- Don't use more than two typeface families in any single view (Pretendard + one brand face)
+- Don't apply heavy shadows (`rgba >0.1`) — the luxury positioning demands minimal depth cues
+- Don't round product image containers — keep them square with sharp corners to frame merchandise
+- Don't use the outlet burgundy `#8c1e46` outside of the Outlet category badge context
+
+## 8. Responsive Behavior
+
+The primary product is a mobile web app (max-width ~360–428px). The viewport is locked: `user-scalable=no, initial-scale=1.0`. At wider breakpoints the layout centers in a white card against a neutral background. The product grid collapses from a 2-column to a 1-column detail view on PDP. Images use Cloudflare `/_dims_/format/webp/autorotate/on` for adaptive delivery. Font sizes do not scale with viewport — they are fixed px values throughout.
+
+## 9. Agent Prompt Guide
+
+When generating MUSTIT-style UI:
+- Mobile-first, max-width 428px, 16px side padding
+- Color: `#222` body, `#D00000` price/CTA, `#888` secondary, `#fafafa` section background
+- Font: Pretendard; body 14px/700 for prices, 13px/700 for captions, 15px/600 for buttons
+- Buttons: bg `#333`, color `#fff`, radius 4px, height 48px — or red `#D00000` for confirm actions
+- Cards: no radius, white bg, `box-shadow: 0 2px 4px 0 rgba(0,0,0,.03)`, 1px `#f0f0f0` border
+- Tabs: `border-bottom: 2px solid #222` active, `color: #aaa` inactive
+- Chips: `border-radius: 17px`, `border: 1px solid #ccc` default, `#D00000` active
+- No heavy gradients in product areas; hotdeal sections may use deep purple-to-teal gradients
+- Keep all decorative shadow under `rgba(0,0,0,.05)`
+
+## 10. Voice & Tone
+
+**Three adjectives:** Direct, Discovery-forward, Confident
+
+| Do | Don't |
+|----|-------|
+| Use active, action-oriented verbs ("발견하세요", "탐험하세요") | Use passive constructions or vague luxury puffery |
+| Keep copy concise — product names and discount percentages speak | Over-explain or add unnecessary adjectives |
+| Lead with the deal / discovery hook | Lead with brand philosophy in transactional flows |
+| Mix Korean and brand/product names naturally | Force awkward Konglish or all-Korean transliterations |
+
+**Illustrative voice samples:**
+- *Illustrative:* "세상 모든 럭셔리 취향을 탐험하세요." — broad, aspirational, discovery-forward
+- *Illustrative:* "정품 200% 보장. 오늘 핫딜 특가를 놓치지 마세요." — direct, urgency-led, trust-anchored
+- *Illustrative:* "1,300개 해외명품 브랜드. 매일 달라지는 특가." — data-led, no fluff, scan-friendly
+
+## 11. Brand Narrative
+
+MUSTIT (머스트잇) launched in 2011 as Korea's first dedicated luxury goods marketplace, solving a single friction: accessing authenticated global luxury brands without travelling abroad or paying full retail. The platform grew into a multi-sided market, adding seller tools, authentication guarantees, and eventually a price-comparison engine across 1,300+ brands and 3.7 million+ product listings (2022 figures).
+
+The company's second chapter, captured in the tagline "Smart Luxury — Make the Best Discovery," shifts emphasis from access to personalised taste-curation. Where early MUSTIT competed on price and breadth, today it competes on intelligence: surfacing the right item from an enormous catalogue for each individual shopper. The M SCOPE periscope symbol — introduced in the 2020s rebrand — encodes this shift from "shopping" to "exploration."
+
+At its core, MUSTIT positions luxury not as an exclusive club but as an everyday enrichment layer. The brand promises that even a person who has never bought a designer item before can "minimise the risk of failure" through personalised guidance — democratising taste without cheapening aspiration.
+
+## 12. Principles
+
+1. **Discovery over search.** Every surface should surface the unexpected, not just confirm known intent. *UI implication:* Prioritise curated carousels and personalised shelf rows over pure search-result grids.
+
+2. **Trust before conversion.** Authentication guarantees and seller ratings must be visible at the product card level, not buried in PDP fine print. *UI implication:* Show authenticity badges inline on thumbnails; never hide them behind a tap.
+
+3. **Speed as luxury.** A slow page is a brand failure in a segment where impatience is typical. *UI implication:* Use WebP images, skeleton loading, and SSR; never show empty-state jumps on first paint.
+
+4. **Red means action.** The brand red is a semantic signal, not a decoration. *UI implication:* Apply `#D00000` only to discount labels, CTA buttons, and active states — never to illustrative or informational copy.
+
+5. **Mobile is the brand.** The desktop experience is secondary. *UI implication:* Design all layouts at 375px width first; use fixed px font sizes; lock zoom.
+
+## 13. Personas
+
+*Illustrative persona A — "명품 입문자" (Luxury Newcomer):* A mid-20s professional buying their first designer piece. Price-sensitive but aspirational, anxious about authenticity. Scans price discounts and authentication badges before product names. Expects clear return/guarantee copy.
+
+*Illustrative persona B — "셀럽 팔로워" (Trend Follower):* A late-20s social-media-active consumer chasing the same items worn by influencers or K-pop idols. Arrives via specific brand + item searches. Values speed of finding the item and peer review signals over price.
+
+*Illustrative persona C — "컬렉터" (Collector):* A 35–50 connoisseur who tracks rare or discontinued items across multiple platforms. Filters heavily, compares price histories, and values seller reputation data. Low churn once trusted.
+
+*Illustrative persona D — "선물 구매자" (Gift Buyer):* An occasional visitor purchasing for a birthday or anniversary. Needs curated "best-seller" shelving, category gift guides, and express delivery confidence. Highly reactive to the discount badge.
+
+## 14. States
+
+- **Empty — search no results:** White background, centered illustration, heading "검색 결과가 없어요" in `#222`, subtitle in `#888`; height fills viewport minus nav
+- **Loading — product grid:** 2-column skeleton grid; each card shows a `#f5f5f5` rectangle (image placeholder) and two `#f5f5f5` text lines at 14px and 12px height; no shimmer animation measured
+- **Error — network failure:** Toast-style slide-up notification in `#333` background, white text, 0.4s cubic-bezier spring entry
+- **Error — sold-out PDP:** Primary CTA replaced with a disabled-styled gray button (`#ddd` border, `#888` text); "품절" (sold out) label in `#D00000`
+- **Success — add to cart:** Slide-up toast message confirms addition; green check in `#12cf35`; auto-dismiss at 2–3 s
+- **Skeleton — product card:** `border-radius: 0` image block + two placeholder lines in `#f5f5f5` rendered before data arrives
+- **Disabled — form field:** `background: #fafafa`, `border: 1px solid #f0f0f0`, label text `#ccc`
+- **Active filter chip:** `border: 1px solid #D00000`; badge counter circle `background: #D00000`, `color: #fff`, `border-radius: 9px`
+
+## 15. Motion & Easing
+
+| Token | Duration | Easing | Usage |
+|-------|----------|--------|-------|
+| Micro | 150ms | `ease-out` | Icon rotation (dropdown arrow), tap highlight |
+| Fast | 200ms | `ease` | Slide-up toast entry, top/bottom position change |
+| Standard | 250ms | `ease-out` | Fade in/out, bottom-sheet slide up/down |
+| Medium | 400ms | `cubic-bezier(.25,.46,.45,.94)` | Sheet slide + opacity composite |
+| Spring | 400ms | `cubic-bezier(.47,1.64,.41,.8)` | Toast bounce-in |
+| Slow | 500ms | `ease` | Pagination indicator slide, banner swipe |
+| Wish | 400ms | `ease-in` | Wishlist heart animation (on/off) |
+
+**Rules:**
+- Enter animations use `ease-out`; exit animations use `ease-in`
+- Never animate product image loads — swap instantly to avoid layout shift
+- Sheet overlays fade backdrop at 250ms separate from content slide
+- All interaction animations ≤ 500ms total; prefer ≤ 250ms for taps

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