oh-my-design-cli 1.6.1 → 1.6.3

package/web/references/grip/DESIGN.md

@@ -0,0 +1,250 @@
+---
+id: grip
+name: "Grip"
+country: KR
+category: ecommerce
+homepage: "https://www.grip.show"
+primary_color: "#eb2b51"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=grip.show&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Grip
+
+Korea's first live commerce platform — a mobile-first video shopping app where sellers and buyers connect in real time through livestreams, chat, and exclusive in-broadcast deals.
+
+## 1. Visual Theme & Atmosphere
+
+Grip presents a dark-first, energy-charged visual world tuned for live video commerce. The primary canvas is near-black (#0e1011) — a deliberate cinema-mode choice that keeps product thumbnails and live video feeds visually dominant. Against this dark ground, the brand's signature rose-red (#eb2b51) fires as a call-to-action signal: checkout buttons, coupon highlights, discount badges, and active selection states all pulse in the same hue, creating an unambiguous buy-now urgency. A secondary hot-pink (#ff3c78) appears in borders and icon fills for interactive affordances just below the critical-action tier. The live-streaming avatar ring introduces a vivid gradient (hot-pink to coral #fe0189→#ff583c) that animates with a pulse or ripple when a seller is live — the single most kinetically distinctive element in the UI. A deep purple (#6456dc) serves as a secondary accent for purchase nudges, urgency countdowns, and seller badges, adding a premium-yet-playful counter-note to the red-dominant palette. Typography is set entirely in Pretendard, a Korean variable typeface that reads cleanly at 13–18 px in both dark and light contexts. Component radii cluster at 4–8 px — tight enough to feel structured, not clinical.
+
+## 2. Color Palette & Roles
+
+- **Primary Rose-Red:** `#eb2b51` — primary CTA buttons, checkout actions, coupon card accents, checkbox fill, discount rate text
+- **Primary Hot-Pink:** `#ff3c78` — lighter interactive affordance, border accents, icon fills, secondary interactive states
+- **Secondary Purple:** `#6456dc` — purchase nudge bar background, timer text, seller badge accent
+- **App Background:** `#0e1011` — root app canvas (dark mode default)
+- **Surface Dark-1:** `#17181a` — bottom navigation bar background
+- **Surface Dark-2:** `#222327` — elevated card surfaces in dark context
+- **Surface Dark-3:** `#404149` — tertiary panel fills
+- **Surface Light:** `#ffffff` — light-mode cart, coupon, and checkout pages
+- **Surface Subtle:** `#f3f3f3` — empty state icon containers, light dividers
+- **Text Primary (dark):** `#eff0f4` — body copy on dark backgrounds
+- **Text Body (light):** `#323232` — product name, price, UI text on white
+- **Text Muted:** `#999999` — secondary labels, conditions, disabled states
+- **Text Subdued:** `#666666` — meta info, timestamps
+- **Border Default:** `#e5e5e5` — card outlines, dividers
+- **Border Subtle:** `#d5d5d5` — light separators, outline button strokes
+- **Error / Danger:** `#ef4343` — toast error, out-of-stock labels
+- **Live avatar ring:** `conic-gradient(from -68deg, #ff2b51, #ffae8e)` — broadcaster live ring
+- **Creator avatar ring:** `conic-gradient(from -68deg, #1ec7be, #1dc3ff)` — creator/seller avatar ring
+
+## 3. Typography Rules
+
+- **Typeface:** Pretendard (woff2, variable weight 45–920), with Pretendard Fallback (Arial-based) for system fallback
+- **Body / Product name:** 15px / weight 400–500
+- **Price / Emphasis:** 15px / weight 700; discount price 27px / weight 700
+- **Button primary:** 16px / weight 600
+- **Button confirm full-width:** 18px / weight 500
+- **Caption / Meta:** 13px / weight 400–500
+- **Badge / Tag:** 11–12px / weight 500
+- **Page header height:** 56px (CSS export constant)
+- **Letter spacing:** −0.2 px to −0.5 px on headings and price figures; Korean text benefits from tight negative tracking
+- **Line height:** 135–145% for readable body, tabular-nums variant for prices and timers
+
+## 4. Component Stylings
+
+### Purchase Buttons
+
+**Primary CTA (cart checkout)**
+- Background: `#eb2b51`
+- Text: `#ffffff`
+- Radius: 8px
+- Height: 50px
+- Font: 16px / 600
+
+**Full-Width Confirm (drawer bottom)**
+- Background: `#eb2b51`
+- Text: `#ffffff`
+- Height: 56px
+- Font: 18px / 500
+
+**Dark Secondary (buy now inline)**
+- Background: `#323232`
+- Text: `#ffffff`
+- Radius: 4px
+- Height: 34px
+- Font: 14px / 500
+
+**Outline Delete / Cancel**
+- Background: `#ffffff`
+- Text: `#323232`
+- Border: 1px solid `#e5e5e5`
+- Radius: 4px
+- Height: 34px
+- Font: 14px / 500
+
+**Shorts / Discovery CTA**
+- Background: `#17181a`
+- Text: `#ffffff`
+- Radius: 6px
+- Height: 40px
+- Font: 15px / 600
+
+---
+
+### Coupon Card
+
+**Active Coupon**
+- Background: `#ffffff`
+- Background: `#fff5f8`
+- Text (price): `#eb2b51`
+- Font: 27px / 700
+
+**Claimed / Used Coupon**
+- Background: `#ffffff`
+- Border: 5px solid `#f3f3f3`
+- Text: `#999999`
+- Font: 13px / 500
+
+---
+
+### Purchase Nudge Bar
+
+**Urgency Countdown**
+- Background: `rgba(47, 23, 253, 0.05)`
+- Text: `#6456dc`
+- Radius: 4px
+- Height: 38px
+- Font: 14px / 500–600
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.grip.show (homepage HTML + CSS bundles via webapp-resource.grip.show/202606020502/_next/static/css/), https://webapp-resource.grip.show/202606020502/_next/static/css/2caceb3098ae7b02.css (main Tailwind utility CSS, 86 KB), https://webapp-resource.grip.show/202606020502/_next/static/css/1f9e9658ee2b291a.css (cart page CSS with button tokens), https://webapp-resource.grip.show/202606020502/_next/static/css/c2bfe78c6e53a384.css (coupon drawer CSS with full-width confirm button), https://gripcorp.co (brand/corp homepage with gradient slogan and propose-button), https://webapp-resource.grip.show/202606020502/_next/static/css/4299887bf9e53336.css (avatar + live ring CSS)
+**Tier 2 sources:** getdesign.md/grip — 0 DESIGN.md files (NOT LISTED). refero — no result found for Grip KR.
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+Grip is a single-column, mobile-only app (max-width 420px on desktop, 100% on mobile). The root `.main` container is fixed to 420px wide on desktop and stacks vertically: page header (56px fixed top), scrollable content, bottom nav (52px + safe-area bottom). The live video view occupies full viewport height (100dvh) with content layered via absolute positioning. Card grids use gap-based flex rows; product thumbnail grids use 109px fixed-width scroll containers. Horizontal scroll (Indiana Scroll) is used for curation rows, avoiding pagination friction.
+
+## 6. Depth & Elevation
+
+The UI relies on background-color contrast rather than drop shadows for layering. Bottom nav (`#17181a`) sits above the dark app canvas (`#0e1011`). Drawers and modals emerge from below (vaul-drawer, bottom-sheet pattern) using the Radix animation system. An `rgba(0,0,0,0.1)` scrim is applied to floating overlays. The live avatar ring uses `z-index:-1` on the after-pseudo for the gradient ring to sit behind the avatar circle, giving a halo effect without a shadow. Product thumbnail borders use `outline: 1px solid rgba(0,0,0,0.05)` with `outline-offset:-1px` to avoid layout shift at 8px radius.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#eb2b51` for every primary purchase action — checkout, confirm, coupon claim
+- Present live status with the `#fe0189→#ff583c` animated ring gradient, not a static badge
+- Set prices in 700 weight with tabular-nums to prevent width jitter during countdowns
+- Keep body copy at 15px / 400 on light surfaces for readability at arm's length
+- Use `#6456dc` exclusively for urgency/countdown nudges; don't repurpose it as a general brand color
+- Maintain the 420px max-width constraint in desktop contexts to preserve mobile layout fidelity
+
+### Don't
+- Don't use `#ff3c78` as the primary CTA color — it is the lighter interactive affordance, not the checkout signal
+- Don't add shadows to buttons; elevation is communicated through background contrast alone
+- Don't place live-ring gradients on non-live seller avatars — the animation signals active broadcast
+- Don't exceed 8px border-radius on purchase buttons; 24–31px is reserved for pill tags and avatar-adjacent elements
+- Don't use font weight below 500 for interactive UI text; 400 is reserved for body copy and meta descriptions
+
+## 8. Responsive Behavior
+
+Grip is deliberately non-responsive in the traditional sense — it is a mobile web app. The root `.main` container is fixed at 420px wide and centered on desktop, with `max-width:100%` applied only on actual mobile viewports. At ≤460px the container becomes fluid. The bottom nav respects `env(safe-area-inset-bottom)` for notched devices. The video view layout enforces `min-width:360px` and `min-height:568px` to support older small-screen devices. Desktop visitors receive the 420px centered column; there is no tablet breakpoint.
+
+## 9. Agent Prompt Guide
+
+To produce Grip-consistent UI:
+- Dark canvas: `background #0e1011`, body text `#eff0f4`, Pretendard 15px/400
+- Primary CTA: `background #eb2b51`, white text, 8px radius, 50px height, 16px/600
+- Secondary action: `background #323232`, white text, 4px radius, 34px height, 14px/500
+- Live indicator: animated gradient ring `#fe0189→#ff583c` on circular avatars, 0.81s cubic-bezier(0.167, 0.166, 1, 1)
+- Price display: 700 weight, tabular-nums, discount rate in `#eb2b51`
+- Urgency nudge bar: `rgba(47,23,253,0.05)` background, `#6456dc` text, 4px radius, 38px height
+- Coupon card: `#fff5f8` tint interior, primary amount in `#eb2b51` 27px/700
+- Section dividers: 1px solid `#f3f3f3` (light) or background-color switch on dark
+- No box-shadow on action elements; rely on background contrast for layering
+
+## 10. Voice & Tone
+
+**Tone adjectives:** energetic, direct, community-warm
+
+| Do | Don't |
+|----|-------|
+| Use short imperative phrases ("지금 바로", "한정 특가") | Write formal or legalistic copy |
+| Address the viewer as a participant in a live event | Address them as a faceless online shopper |
+| Create urgency around the live moment ("지금 방송 중") | Use generic marketing hyperbole unrelated to real-time |
+| Celebrate the seller-buyer relationship by name (Gripper) | Depersonalize the seller as "vendor" or "merchant" |
+
+**Voice samples (illustrative):**
+- *"지금 라이브 중! 방송에서만 만나는 특가를 놓치지 마세요."* — live broadcast nudge copy
+- *"그리퍼가 직접 쓰고 추천하는 아이템, 지금 채팅으로 물어보세요."* — seller trust prompt
+- *"1,000만이 선택한 영상 쇼핑, 그립."* — official slogan from og:title meta tag
+
+## 11. Brand Narrative
+
+Grip was founded in July 2018 by Kim Han-na, a former Naver marketer who had worked on video products including Jam Live and Snow. Along with six co-founders also from Naver and Kakao, she set out to build Korea's first mobile live commerce platform with a single animating belief: anyone with a smartphone should be able to sell anything, anytime, to anyone. The company (GripCompany, 주식회사 그립컴퍼니) is headquartered in Pangyo, Seongnam — the heart of Korea's tech ecosystem. In December 2021 Kakao became Grip’s largest shareholder (~50% stake, ₩180B), anchoring its live-commerce expansion.
+
+Rather than replicating home shopping television or social media, Grip defined a third category: personal media commerce. Sellers — called Grippers — broadcast from wherever they are, answer questions live via chat, run in-stream auctions and games, and build loyal fan communities around their product expertise. The platform's patent portfolio reflects this: interactive mechanics like rolling dice, quiz games, and flash-sale countdowns are proprietary differentiators, not commodities.
+
+By 2024 the app had surpassed 10 million downloads and runs approximately 1,300 live shows daily. Grip has expanded internationally (US via gripcorp.co, Japan in planning), and operates a B2B arm — Grip Cloud — that powers branded live commerce for third-party retailers. The mission remains unchanged: collapse the distance between the person who made or curated a product and the person who wants it.
+
+## 12. Principles
+
+1. **Anyone can sell.** The platform is designed so that a single creator with a smartphone has the same surface area as a large retailer. UI implication: seller onboarding, stream tooling, and product listing all default to zero-equipment, zero-staff flows.
+
+2. **The live moment is the product.** Urgency is honest, not manufactured — it comes from the real-time nature of the broadcast. UI implication: live badges, countdown timers, and flash prices must always reflect actual live status; never show live signals on recorded or inactive streams.
+
+3. **Community over catalogue.** Grip's retention mechanism is the seller-fan relationship, not a product recommendation algorithm. UI implication: seller avatars, follow states, and chat surfaces are given equal or greater prominence than product grids.
+
+4. **Mobile-first, always.** The app was born on smartphone screens; desktop is a secondary, framed experience. UI implication: the 420px max-width is a design constraint, not a limitation — all interaction models (swipe, scroll, tap) are thumb-native.
+
+5. **Trust through transparency.** Buyers can ask questions live and see the product in real context. UI implication: product info, seller credentials, and review surfaces should never be buried; the chat overlay must remain accessible throughout a broadcast.
+
+## 13. Personas
+
+*Illustrative Gripper (Seller) — "Minjung, 34, Busan"*
+Runs a small handmade cosmetics business. She goes live three times a week from her kitchen studio, always engaging with regulars by name. She values the chat widget above everything else — it is her storefront window and her customer service desk simultaneously.
+
+*Illustrative Buyer / Fan — "Soyeon, 28, Seoul"*
+Follows 12 Grippers in beauty and fashion. She watches live shows on her commute and keeps the app's push notifications on for her favourite sellers. Price is secondary to trust — she buys because she knows the person selling.
+
+*Illustrative Discovery Shopper — "Junho, 41, Daejeon"*
+Opens Grip from a search ad for a specific product category. He swipes the home feed without following anyone, attracted by the HOT ranking and the real-time viewer count as a social-proof signal. He rarely revisits without a compelling deal.
+
+*Illustrative B2B Brand Manager — "Hyeji, 30, Seoul"*
+Uses Grip Cloud to run branded live events for an apparel label. She cares about the OBS integration, analytics dashboard, and the coupon issuance system — the consumer-facing design language is largely transparent to her.
+
+## 14. States
+
+- **Empty (Cart):** `#f3f3f3` circle container (64px) with a cart icon in `#c2c2c2`; text "담긴 상품이 없어요" in `#999` 15px/400; CTA to browse shorts in `#17181a` background
+- **Loading (Live video):** full-viewport dark canvas `#111` with centered spinner; video cover div with `background-size:contain` for thumbnail placeholder
+- **Error (Video stream):** gradient fallback `linear-gradient(180deg, #111 49.95%, #29235e)`; error text surfaced in white on the gradient
+- **Error (Cart item — sold out / ended):** text label "품절" in `#e83c3b` 15px/700; product thumbnail at 50% opacity via `.disabled`
+- **Success (Coupon claimed):** action panel switches to `#f8f8f8`; icon color moves from `#eb2b51` to `#999`; label reads "사용 완료"
+- **Skeleton (Product thumbnail):** `border-radius:8px; outline:1px solid rgba(0,0,0,0.05)` on the wrapper; image `aspect-ratio:1/1` prevents layout shift
+- **Disabled (Coupon card):** `opacity:0.5` applied to all child elements inside `.coupon > *`
+- **Timer / Urgency:** `font-variant-numeric:tabular-nums; font-feature-settings:"tnum"` on all countdown displays; color `#6456dc`
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- Micro (state feedback): 80ms — bottom nav slide (`transition: all 0.08s linear`)
+- Short (UI transitions): 150ms — Tailwind default (`cubic-bezier(0.4, 0, 0.2, 1)`)
+- Medium (drawer open/close): 200–300ms — Radix accordion/drawer (`ease-out`)
+- Long (avatar live animation): 810ms — pulse-border, ripple-border (`cubic-bezier(0.167, 0.166, 1, 1)`)
+
+**Easing tokens:**
+- Standard: `cubic-bezier(0.4, 0, 0.2, 1)` (ease-in-out, Material-derived)
+- Decelerate (drawer enter): `ease-out`
+- Live avatar: `cubic-bezier(0.167, 0.167, 0.833, 0.833)` for ripple ring
+- Pulse entry: `cubic-bezier(0.167, 0.166, 1, 1)` for avatar scale pulse (4 iterations then infinite on live)
+
+**Rules:**
+- The live-ring animation (ripple-sm: scale 1.02→1.2, opacity 1→0) runs 4× then loops only when `repeat-live-animation` class is applied — indicating an active live session
+- Bottom nav slides out (`translateY(100%)`) with 80ms linear — fast enough to feel native, not abrupt
+- Drawer content uses Vaul/Radix `data-[state=open]` animate-in at 150ms; `data-[state=closed]` at 300ms (asymmetric: opens fast, closes deliberately)
+- No spring physics; all motion is CSS cubic-bezier

package/web/references/hogangnono/DESIGN.md

@@ -0,0 +1,308 @@
+---
+id: hogangnono
+name: "Hogangnono"
+country: KR
+category: consumer-tech
+homepage: "https://hogangnono.com"
+primary_color: "#584de4"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=hogangnono.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Hogangnono
+
+Korea's #1 apartment real-estate transparency platform — map-first, data-honest, free of paid-listing distortion.
+
+## 1. Visual Theme & Atmosphere
+
+Hogangnono pairs a bold indigo-violet primary with a crisp, predominantly white canvas to signal data-clarity and trustworthiness. The palette is deliberately restrained: brand purple carries every interactive affordance while the neutral grayscale hierarchy handles all structural content, keeping the map and price data visually dominant. The overall feel is pragmatic and modern — closer to a civic data tool than a lifestyle product — with subtle elevation (gentle card shadows, a floating map-control layer) and minimal decorative flourish. Typography is set exclusively in Pretendard, giving the interface a contemporary Korean-web character without heavy ornamentation. Motion is conservative: 0.3 s transitions on colour and transform keep the product feeling responsive without distracting from data-dense screens.
+
+## 2. Color Palette & Roles
+
+- **Primary:** `#584de4` — interactive elements, primary CTA fill, focus rings, active filter borders, links
+- **Primary Variant (Nav):** `#4d55b2` — legacy navigation bar background, list headers, browser scene header
+- **Primary Tint:** `#f3f4fc` — tint button background, selected-state surface, light hover wash
+- **Primary Light:** `#eeedfc` — primary100, subtle chip backgrounds, info chip fills
+- **Gray 900:** `#333333` — primary body text, headings
+- **Gray 800:** `#4F4F4F` — secondary text, icon default
+- **Gray 700:** `#6E6E6E` — tertiary / caption text
+- **Gray 500:** `#B3B3B3` — placeholder, disabled text
+- **Gray 300:** `#E5E5E5` — dividers, border default
+- **Gray 200:** `#F3F3F3` — chip default background, subtle fills
+- **Gray 100:** `#F9F9F9` — page background, list row alternates
+- **White:** `#ffffff` — card surface, input background
+- **Blue:** `#3E8CE8` — informational highlights, loan/financial accent
+- **Green:** `#3DAB6A` — positive / up-trend price indicator
+- **Red / Destructive:** `#EE3A3A` — negative / down-trend price, error state
+- **Price Accent:** `#4337de` — apartment listing price text (high-contrast deep indigo)
+
+## 3. Typography Rules
+
+- **Typeface:** Pretendard (primary); fallback Apple SD Gothic Neo → NanumGothic → sans-serif
+- **Base body:** 16px / 400 / line-height 1.3
+- **Large modal heading:** 30px / 700 / line-height 40px
+- **Section heading:** 18–22px / 600–700
+- **List item title:** 15–17px / 600
+- **Body / description:** 14–16px / 400
+- **Caption / badge:** 11–13px / 400
+- **Price display:** 19px / 500 in `#4337de`
+- **Button (primary full):** 17px / default weight
+- **Button (secondary tint):** 17px / default weight
+- No custom letter-spacing override applied at root; tracking defaults to 0.
+
+## 4. Component Stylings
+
+### Primary Button
+
+**Fill (default)**
+- Background: `#584de4`
+- Text: `#ffffff`
+- Radius: 6px
+- Height: 50px
+- Font: 17px
+
+**Fill Important (with shadow)**
+- Background: `#584de4`
+- Text: `#ffffff`
+- Radius: 6px
+- Height: 50px
+- Font: 17px
+- Shadow: 0 4px 5px 0 rgba(89, 99, 217, 0.3)
+
+**Disabled**
+- Background: `#f0f0f0`
+- Text: `#dadada`
+- Radius: 6px
+- Height: 50px
+
+### Secondary / Tint Button
+
+**Tint (modal secondary)**
+- Background: `#f3f4fc`
+- Text: `#584de4`
+- Radius: 6px
+- Height: 50px
+- Font: 17px
+
+**Outline (empty)**
+- Background: `#ffffff`
+- Border: 0.5px solid `#cecfdc`
+- Radius: 6px
+
+### Filter Chip
+
+**Default**
+- Background: `#ffffff`
+- Border: 1px solid `#F3F3F3`
+- Radius: 8px
+- Height: 32px
+- Font: 14px
+
+**Active / Applied**
+- Background: `#ffffff`
+- Border: 1px solid `#584de4`
+- Text: `#584de4`
+- Radius: 8px
+- Height: 32px
+- Font: 14px
+
+**Selected**
+- Background: `#eef0f3`
+- Border: 1px solid `#584de4`
+- Text: `#584de4`
+- Radius: 8px
+- Height: 32px
+
+### Search Input
+
+**Roundbox (map search)**
+- Background: `#ffffff`
+- Border: 1px solid `#CECFDC`
+- Radius: 6px
+- Height: 50px
+- Font: 16px
+- Padding: 0 15px
+
+**Modal Input (login phone)**
+- Background: `#ffffff`
+- Border: 0
+- Border-bottom: 2px solid `#e5e5e5`
+- Height: 45px
+- Font: 20px / 700
+- Placeholder: `#dadada`
+- Focus border-bottom: 2px solid `#584de4`
+
+### Apartment Detail Card
+
+**Container**
+- Background: `#ffffff`
+- Border: 1px solid `#cecece`
+- Radius: 3px
+- Shadow: 0px 2px 2px rgba(0, 0, 0, 0.075)
+
+**Price Text**
+- Text: `#4337de`
+- Font: 19px / 500
+
+**Row Divider**
+- Border-bottom: 1px solid `#f2f2f2`
+
+### Map Control Button
+
+**Floating FAB**
+- Background: `#ffffff`
+- Radius: 4px
+- Shadow: 4px 2px 12px 0px rgba(0, 0, 0, 0.24)
+- Width: 38px
+- Height: 38px
+- Font: 14px
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://hogangnono.com (HTML, theme-color meta, inline emotion CSS); https://static.hogangnono.com/dist/2.5.0.30/08498da545/web/desktop.css (full desktop CSS bundle, :root custom properties); https://static.hogangnono.com/reset.desktop.css (reset + Pretendard font declarations); https://apps.apple.com/kr/app/호갱노노/id1084799742 (App Store listing, KR regional)
+**Tier 2 sources:** getdesign.md/hogangnono — NOT LISTED (no data). refero — not checked (KR brand, negligible coverage expected).
+**Conflicts unresolved:** theme-color meta (#4d55b2) differs from CSS --primary (#584de4); both are genuine — #4d55b2 is the darker legacy nav background, #584de4 is the design-system primary for interactive elements; documented as Primary Variant vs Primary.
+
+## 5. Layout Principles
+
+- **Split-panel desktop:** fixed 354–375 px left panel (search + results list) + full-height map canvas on the right; no traditional responsive grid.
+- **Panel interior:** vertical stack — search bar → filter chip strip (48 px) → scrollable result list.
+- **Card list items:** 12 px vertical padding, 20 px horizontal, full-width with 1 px `#f2f2f2` bottom divider.
+- **Modal overlay:** centred 510 px wide card with 35 px padding, 10 px radius, at 50 % viewport position.
+- **Sidebar:** fixed-width notification centre; inner header 48 px tall.
+- **Spacing unit:** 8 px base; gaps of 8 px between filter chips, 5 px margin between badge tags.
+
+## 6. Depth & Elevation
+
+- **Level 0 — flat canvas:** white / gray-100 background, no shadow.
+- **Level 1 — card / list panel:** `box-shadow: 0px 2px 2px rgba(0,0,0,0.075), -1px 1px 1px rgba(0,0,0,0.03), 1px 1px 1px rgba(0,0,0,0.03)` — subtle lift for the detail panel.
+- **Level 2 — floating map controls:** `box-shadow: 4px 2px 12px 0px rgba(0,0,0,0.24)` — clearly raised FAB buttons over the map layer.
+- **Level 3 — primary CTA (important):** `box-shadow: 0 4px 5px 0 rgba(89,99,217,0.3)` — coloured indigo shadow signals the most prominent action.
+- **Level 4 — modal / overlay:** `background-color: #000; opacity: 0.3` scrim + centred white card; `z-index: 15`.
+- **Tooltip:** dark `#3a3a3a` background, 5 px radius, `z-index: 20`.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#584de4` for all primary interactive states — buttons, links, active borders, focus indicators.
+- Pair price data with `#4337de` (deep indigo) for sale prices, `#3DAB6A` for upward trends, `#EE3A3A` for downward trends.
+- Keep the map canvas uncluttered; restrict non-essential UI to the side panel.
+- Use Pretendard at 16 px / 400 for body copy and 17 px for button labels.
+- Apply the 6 px radius to interactive pill buttons; use 8 px radius for header filter chips.
+- Show skeleton/loading states for list items while data loads; never block the map.
+- Use `#f3f4fc` tint backgrounds for secondary CTA buttons to maintain hierarchy under the primary fill.
+
+### Don't
+- Don't use `#4d55b2` (nav variant) as the primary for new interactive elements — it is a legacy dark-mode nav colour.
+- Don't add heavy decorative gradients or large hero images; the product is data-first.
+- Don't place multiple filled-primary CTAs on the same screen; reserve the fill for a single dominant action.
+- Don't use font-sizes below 11 px for any visible text.
+- Don't override the filter chip radius to 0 px (that is reserved for the full-width bottom CTA only).
+- Don't use the price-accent `#4337de` for non-price content; it will confuse the semantic colour signal.
+
+## 8. Responsive Behavior
+
+- The desktop layout is a fixed-width split panel (354–375 px sidebar + map); it does not collapse to a fluid grid on narrow windows.
+- The mobile app (iOS/Android) uses a bottom-sheet paradigm with full-screen map and a pull-up results list.
+- Filter chip strip scrolls horizontally with hidden scrollbar (`overflow: scroll hidden; -webkit-scrollbar: none`).
+- Map FAB controls reposition via absolute/fixed positioning relative to the map container; they do not reflow.
+- Retina assets served via `(-webkit-min-device-pixel-ratio: 2)` media query switching sprite URLs.
+- Modal overlay is fixed-position full viewport; the centred card is 510 px wide with pixel-perfect negative margins (no vw-based centering).
+
+## 9. Agent Prompt Guide
+
+When generating UI for Hogangnono:
+- **Primary action:** filled indigo button — `background #584de4; color #fff; border-radius 6px; height 50px; font-size 17px`.
+- **Secondary action:** tint button — `background #f3f4fc; color #584de4; border-radius 6px; height 50px; font-size 17px`.
+- **Filter chip (default):** `border 1px solid #F3F3F3; border-radius 8px; height 32px; font-size 14px; color #333333`.
+- **Filter chip (active):** swap border and text to `#584de4`; keep same dimensions.
+- **Price text:** `color #4337de; font-size 19px; font-weight 500`.
+- **Body text:** `color #333333; font-size 16px; font-weight 400; font-family Pretendard`.
+- **Card container:** `background #fff; border 1px solid #cecece; border-radius 3px; box-shadow 0px 2px 2px rgba(0,0,0,0.075)`.
+- **Divider:** `border-bottom 1px solid #f2f2f2`.
+- **Error / price-drop:** `color #EE3A3A`. **Success / price-rise:** `color #3DAB6A`.
+- Keep layouts data-dense and map-adjacent; avoid lifestyle/hero photography patterns.
+
+## 10. Voice & Tone
+
+**Three adjectives:** transparent, plain-spoken, user-protective
+
+| Do | Don't |
+|---|---|
+| Use direct, factual language about prices and data | Use hype or emotional superlatives about property values |
+| Acknowledge uncertainty where data is incomplete | Overstate confidence in market predictions |
+| Speak on behalf of the buyer / renter | Frame content from the agent's or seller's perspective |
+| Keep UI labels short and action-oriented | Use jargon-heavy real-estate terms without definition |
+
+**Voice samples (illustrative):**
+- *"이 단지의 최근 실거래가를 확인했어요. 시세보다 낮게 거래된 이력이 있으니 참고하세요."* (We checked the recent actual transaction prices for this complex. Note that there are historical sales below market rate.)
+- *"호갱 되지 마세요 — 정확한 실거래 데이터로 비교하세요."* (Don't get ripped off — compare with accurate actual transaction data.)
+- *"원하시는 조건을 설정하면 딱 맞는 매물을 찾아드릴게요."* (Set your conditions and we'll find exactly the right listing for you.)
+
+## 11. Brand Narrative
+
+Hogangnono — literally "no more being a fool (호갱)" — was born in 2015 when Kakao developer Shim Sang-min discovered that Korea's property portals were listing phantom prices inflated by paid advertising, leaving buyers without reliable data for the most important financial decision of their lives. His team of three built the first version in weeks, pulling official transaction records from the Ministry of Land, Infrastructure and Transport and plotting every deal on a map. The name is both a promise and a provocation: honest information exists, and you deserve it.
+
+From that anti-rip-off origin, Hogangnono evolved into Korea's most comprehensive proptech platform, layering 3D sunlight modelling, school-district mapping, reconstruction auction tracking, and resident reviews onto its price-transparency core. Acquired by Zigbang in 2018, it has retained its distinct identity and radical data-openness ethos while scaling to over 2 million registered users. The founder's stated mission — "advancing the real estate industry through IT by providing honest information" — remains the product's north star.
+
+The brand's competitive edge is deliberate simplicity. Where legacy portals bury users in sponsored content, Hogangnono surfaces the single truth the buyer needs: what did this apartment actually sell for, and when? Every design decision — the prominent price display, the map-first layout, the refusal to accept payment for listings — flows from that original commitment to be the side of the user.
+
+## 12. Principles
+
+1. **Data honesty above commercial convenience.** Every number shown is an official transaction record, never an estimate or a sponsored suggestion. *UI implication:* price figures must use the dedicated price-accent colour (`#4337de`) and link directly to source data; never round or approximate displayed prices.
+
+2. **Simplicity is the feature.** Complex market data must be made immediately readable to a non-expert buyer in under 10 seconds. *UI implication:* reduce visual layers; lead with the price and date, subordinate all secondary data; avoid multi-column data tables on first-load views.
+
+3. **The user is always the buyer, never the seller.** Product language, iconography, and CTA copy orient around protecting the purchaser. *UI implication:* write button labels and tooltips from the buyer's intent ("확인하기", "비교하기") not the agent's interest ("문의하기" should feel secondary).
+
+4. **Speed of understanding, not speed of transaction.** Hogangnono earns trust by helping users slow down and compare before committing. *UI implication:* error and warning states should be prominent and never dismissible without acknowledgment; never autofill or pre-select high-commitment actions.
+
+5. **Map is the primary canvas.** Spatial context — neighbourhood, commute, school zone — is inseparable from price judgment. *UI implication:* the map must always be visible or reachable in one tap; panels and overlays must not cover the full viewport.
+
+## 13. Personas
+
+*Illustrative — representative archetypes, not real users.*
+
+**Young Professional First-Timer (지영, 28):** Recently started her first full-time job in Seoul; renting a studio and beginning to track jeonse prices for eventual purchase. Uses Hogangnono daily to watch price trends in her target neighbourhood. Needs: clear price history, commute-time overlays, simple language. Fears: overpaying due to information asymmetry.
+
+**Upgrader Couple (민준 & 수진, 35/34):** Selling a small apartment to buy a larger family home before school-zone registration deadlines. Juggle two incomes and a toddler; research time is scarce. Need: quick price comparisons across 3–4 complexes, school-district filter, subscription eligibility checker. Fear: missing a deadline or buying at a local price peak.
+
+*Illustrative.* **Data-Driven Investor (재원, 44):** Tracks multiple complexes for value-investing opportunities; cross-references Hogangnono data with government reconstruction announcements. Heavy user of non-resident-ratio charts and trading-volume graphs. Needs: dense data, fast export, historical charting depth. Fear: acting on stale or curated data.
+
+*Illustrative.* **Cautious Senior Buyer (순자, 62):** Purchasing an apartment for the first time after selling a rural property; unfamiliar with jeonse vs. purchase semantics. Needs: large text, plain-language explanations, phone-number access to agents for reassurance. Fear: digital interfaces that feel untrustworthy or too fast.
+
+## 14. States
+
+- **Empty (no search results):** Neutral gray illustration + short message "조건에 맞는 매물이 없어요" (No listings match your conditions); suggest relaxing one filter.
+- **Loading (list skeleton):** Row skeletons in `#F3F3F3` — title bar 60 % width, price bar 40 % width, caption bar 80 % width; animated shimmer left-to-right at 1.3 s.
+- **Error — network failure:** Inline banner in `#EE3A3A` tint background with red icon + "데이터를 불러오지 못했어요 — 다시 시도해 주세요" (Couldn't load data — please try again); retry button in primary fill.
+- **Error — no price data for complex:** Greyed-out price slot with tooltip "공식 거래 기록이 없어요" (No official transaction records); never shows a fabricated figure.
+- **Success — inquiry sent:** Toast notification with `#3DAB6A` check icon + "문의가 전송되었어요" (Your inquiry was sent); auto-dismisses after 3 s.
+- **Skeleton — map bubbles loading:** Price bubbles render as `#E5E5E5` rounded pills at their geo-coordinates; replaced with real figures once API responds.
+- **Disabled — subscription eligibility blocked:** CTA button in `background #f0f0f0; color #dadada` with helper text explaining missing eligibility condition below.
+- **Active filter applied:** Filter chip border and text switch to `#584de4`; chip background stays white to signal "on" state without heavy fill.
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- **Micro (hover / colour swap):** 200 ms
+- **Standard (panel slide / button bg):** 300 ms
+- **Expand (sheet / modal open):** 350 ms
+- **Map pan / transform:** 350 ms–2 s depending on distance
+
+**Easing:**
+- Default transitions: `ease` (colour, background-color: 0.3s ease)
+- Panel slide: `transform 0.35s` (implicit ease)
+- Map zoom: `transform 2–3s` (linear, large tile area)
+- Overlay fade: `opacity 0.2s linear` (dismiss) / `opacity 0.3s` (appear)
+- Photo gallery: `cubic-bezier(0.4, 0, 0.22, 1)` (Photoswipe standard)
+
+**Rules:**
+- Never animate layout-shifting properties (width, height reflows) in real-time data updates; use opacity/transform only.
+- Price numbers should update instantly (no count-up animation) to preserve data-honesty perception.
+- Map bubble entry uses `fadeIn` keyframe (0 % opacity → 100 %) at 200 ms.
+- Bottom-sheet open uses `bottomBoundIn` keyframe (translate Y 50 % → 0, scale 0.6 → 1) at 300 ms.
+- Modal entry uses `topBoundIn` (translate Y −50 % → 0, scale 0.6 → 1) at 300 ms.

package/web/references/hyundaicard/DESIGN.md

@@ -10,6 +10,11 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=hyundaicard.com&sz=128"
 verified: "2026-06-01"
 omd: "0.1"
+ds:
+  name: Hyundai Card Design Library
+  url: "https://newsroom.hyundaicard.com/front/board/Hyundai-Card-Design-Library?country=en"
+  type: brand
+  description: Hyundai Card's official Design Library — the brand's design philosophy, the proprietary Youandi typeface, and visual identity.
 ---
 # Design System Inspiration of Hyundai Card