oh-my-design-cli 1.6.0 → 1.6.2

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

@@ -0,0 +1,177 @@
+---
+id: "hyundaicard"
+name: "Hyundai Card"
+country: KR
+category: fintech
+homepage: "https://www.hyundaicard.com"
+primary_color: "#000000"
+logo:
+  type: favicon
+  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
+
+## 1. Visual Theme & Atmosphere
+
+Hyundai Card is Korea's most design-celebrated credit-card brand, and its visual identity is an exercise in disciplined restraint: monochrome premium minimalism built almost entirely from ink black (#000000) on a clean white (#FFFFFF) ground. Color is not used as decoration here — it is withheld on purpose, treated as a luxury that the brand chooses not to spend, so that the absence of color becomes the statement. The signature element is typography itself: the proprietary "Youandi" (유앤아이) typeface carries the brand's voice, making letterforms the primary expressive medium rather than imagery or palette. The atmosphere is gallery-like and editorial — generous whitespace, high contrast, and a quiet confidence that reads as understated wealth rather than loud premium cues. Surfaces are flat and unadorned, headers are transparent, and every element earns its place. The result feels less like a banking product and more like a cultural design platform, which is exactly how the DIVE surface presents the brand. This is typography-as-identity, where the discipline of black, white, and a custom face does all the work.
+
+## 2. Color Palette & Roles
+The palette is deliberately monochrome. The ground is white (#FFFFFF) and the ink is black (#000000), and the brand color is essentially black itself — color is the thing that is held back, which is the entire point of the identity. The only chromatic accents appear as functional category tags on the DIVE content surface, never as primary brand expression.
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Ground | #FFFFFF | Page and surface background; the dominant field |
+| Ink | #000000 | Body text, headings, primary brand color; the monochrome anchor |
+| Accent — red (functional) | #F36464 | Content category tag on DIVE only |
+| Accent — green (functional) | #15A91F | Content category tag on DIVE only |
+
+The accents are strictly utilitarian. They classify content; they do not brand. Treat #F36464 and #15A91F as labeling tools confined to tags, and keep the rest of the experience in pure black-and-white.
+
+## 3. Typography Rules
+Typography is the brand. The display layer uses the proprietary "Youandi" typeface (confirmed in the DOM as YouandiNewKr, with HEB / TR / HB weights) for headings and branding — it is the signature element and should be reserved for moments that carry the brand's voice. Body text is set in Noto Sans KR for legibility across Korean and Latin content. The captured body size is 13px, and the heading size is 26px at weight 600, giving a clear two-step hierarchy: a confident editorial heading over a quiet, readable body.
+
+| Token | Value |
+| --- | --- |
+| Display / branding | Youandi (YouandiNewKr — HEB / TR / HB weights), proprietary |
+| Body | Noto Sans KR |
+| Body size | 13px |
+| Heading | 26px / 600 |
+
+Rule of thumb: let Youandi own the brand and headline moments; let Noto Sans KR carry running text at 13px; reserve the 26px/600 step for section-level headings.
+
+## 4. Component Stylings
+
+### Page Surface (DIVE)
+
+**Default**
+- Background: #FFFFFF
+- Text: #000000
+- Border: none
+- Padding: generous whitespace (editorial)
+- Height: full viewport
+- Font: 13px / 400 (Noto Sans KR)
+- Use: the base content canvas — white ground, black ink, maximal restraint
+
+### Heading
+
+**Section heading**
+- Background: transparent
+- Text: #000000
+- Border: none
+- Padding: editorial spacing above and below
+- Height: auto
+- Font: 26px / 600
+- Use: section-level titles; pair with Youandi for true brand moments
+
+### Button
+
+**Primary (minimal pill)**
+- Background: #FFFFFF
+- Text: #000000
+- Border: minimal outline (monochrome)
+- Radius: 24px
+- Padding: balanced for a 48px pill
+- Height: 48px
+- Font: body scale (Noto Sans KR)
+- Use: primary action; the rounded pill is the one soft gesture in an otherwise hard, flat system
+
+### Header
+
+**Transparent header**
+- Background: transparent
+- Text: #000000
+- Border: none
+- Padding: edge-aligned to the content grid
+- Height: auto
+- Font: Noto Sans KR
+- Use: lets the white ground read continuously from header into content; no chrome, no shadow
+
+### Content Tag
+
+**Category tag (red)**
+- Background: tag fill
+- Text: #F36464
+- Border: none
+- Radius: pill
+- Padding: compact
+- Height: compact label
+- Font: small body scale
+- Use: functional content classification on DIVE only — not brand color
+
+**Category tag (green)**
+- Background: tag fill
+- Text: #15A91F
+- Border: none
+- Radius: pill
+- Padding: compact
+- Height: compact label
+- Font: small body scale
+- Use: functional content classification on DIVE only — not brand color
+
+## 5. Layout Principles
+The layout is editorial and gallery-like, built on generous whitespace and a continuous white ground. The transparent header dissolves into the content so the page reads as one uninterrupted surface, and the absence of borders, fills, and chrome keeps attention on type and spacing. Black ink on white field creates the contrast that structures the page; there is no competing color to organize around. Hierarchy is established through the typographic step — 26px/600 headings over 13px body — and through the rhythm of negative space rather than through dividers or boxes. The pill button at 24px radius is the single soft moment in an otherwise crisp, rectilinear field. Treat layout as composition: align to a clean grid, let whitespace breathe, and resist the urge to add color or ornament.
+
+## 6. Depth & Elevation
+This is a flat system. There are no documented shadows, gradients, or elevation layers — the header is transparent and surfaces sit at a single plane on the white ground. Depth, to the extent it exists, comes from contrast (black ink against white) and from spacing, not from drop shadows or stacking. Keep elements coplanar; if separation is needed, use whitespace and the typographic hierarchy rather than introducing elevation. The only curvature in the system is the 24px button radius, which softens the action without implying lift. Restraint applies to depth exactly as it applies to color.
+
+## 7. Do's and Don'ts
+
+### Do
+- Keep the palette monochrome: #FFFFFF ground, #000000 ink.
+- Treat black (#000000) as the brand color — withholding color is the point.
+- Reserve Youandi (proprietary) for headings and branding moments.
+- Set body in Noto Sans KR at 13px; use 26px/600 for headings.
+- Use the 48px pill button with 24px radius as the soft action gesture.
+- Keep the header transparent and surfaces flat.
+
+### Don't
+- Introduce color as a brand element — the accents #F36464 and #15A91F are for functional content tags only.
+- Add shadows, gradients, or elevation; the system is flat.
+- Substitute a generic display face where Youandi carries the brand voice.
+- Crowd the layout — whitespace is structural.
+- Box content in borders or fills; let contrast and spacing do the work.
+
+## 8. Responsive Behavior
+The captured surface (DIVE) is a content/culture platform whose responsive logic follows its editorial, whitespace-driven layout: the continuous white ground and transparent header scale naturally from desktop to mobile, with the typographic hierarchy (26px/600 heading over 13px body) carrying structure at every width. The 48px pill button provides a comfortable touch target on mobile. Beyond these observed values, responsive specifics were not captured (the main banking site is security-plugin-walled), so adapt qualitatively: preserve generous whitespace, keep the monochrome contrast, maintain the flat single-plane surface, and let the type hierarchy — not added chrome — communicate structure as the viewport narrows.
+
+## 9. Agent Prompt Guide
+When generating UI in the Hyundai Card style, instruct the agent: "Design a monochrome, editorial interface — white (#FFFFFF) ground, black (#000000) ink, and treat black as the brand color. Withhold color entirely; the absence of color is the statement. Use a proprietary-feeling display typeface (Youandi, weights HEB/TR/HB) for headings and branding, and Noto Sans KR for body at 13px, with 26px/600 section headings. Keep everything flat — no shadows, no gradients, no elevation, transparent header. The only soft gesture is a 48px pill button with 24px radius, white fill, black text. Lean on generous whitespace and high black-on-white contrast for structure. If you must classify content, you may use red #F36464 or green #15A91F as small functional tag colors only — never as brand color." Emphasize restraint above all: when in doubt, remove rather than add.
+
+## 10. Voice & Tone
+The voice is quietly confident and editorial — the tone of a design gallery rather than a bank. It speaks with the assurance of a brand that has nothing to prove, letting restraint imply premium. There is no shouting, no urgency, no decorative flourish; the message lands through clarity and discipline. Like the monochrome palette, the language withholds: it says only what is needed, and it trusts the audience to read the sophistication in the negative space. The tone is cultured, deliberate, and self-assured.
+
+## 11. Brand Narrative
+Hyundai Card built its reputation as Korea's most design-celebrated credit-card brand by treating design as the product, not the packaging. The brand's central idea is that luxury is restraint: a monochrome world of black and white, anchored by a typeface it commissioned for itself — Youandi (유앤아이) — so that even the letters belong to the brand alone. Color is the resource it refuses to spend, turning absence into a signature. The DIVE platform extends this story from finance into culture and design, presenting the same monochrome, Youandi-led identity as a creative point of view rather than a transactional one. The narrative is consistent at every touchpoint: typography-as-identity, discipline-as-luxury, and the quiet confidence of a brand that lets what it leaves out speak as loudly as what it puts in.
+
+## 12. Principles
+- **Withhold color.** Black (#000000) on white (#FFFFFF) is the identity; color is deliberately held back.
+- **Typography is the brand.** Youandi (proprietary) carries the voice; let letterforms lead.
+- **Restraint as luxury.** Remove before you add; whitespace and contrast do the structural work.
+- **Flat and honest.** No shadows, no gradients, no chrome — a single clean plane.
+- **One soft gesture.** The 24px-radius, 48px pill button is the system's only concession to softness.
+- **Function over decoration.** The only accents (#F36464, #15A91F) exist to classify, never to brand.
+
+## 13. Personas
+- **The design-literate cardholder** — values craft and discretion over flash; reads the monochrome restraint as a marker of taste and expects the interface to feel like a curated space.
+- **The culture seeker on DIVE** — comes for design, art, and editorial content rather than banking, and responds to the gallery-like white-ground layout and Youandi typography.
+- **The premium minimalist** — wants the confidence of black-and-white sophistication, prefers whitespace to ornament, and trusts a brand that says less.
+
+## 14. States
+Observed component states are minimal by design — the system favors flat, high-contrast defaults over elaborate interactive feedback. From the captured values: the default surface is #FFFFFF ground with #000000 text; the primary button defaults to white fill, black text, 24px radius, 48px height; the header defaults to transparent. Hover, pressed, focus, disabled, and error states were not captured in the blob, so do not invent them — derive them qualitatively in keeping with the monochrome, flat philosophy (e.g., subtle black/white contrast shifts rather than colored state changes), and keep any feedback as restrained as the rest of the system. Functional content tags carry the red (#F36464) or green (#15A91F) accent to signal category, the closest thing to a "stateful" color in the system.
+
+## 15. Motion & Easing
+No motion or easing values were captured in the blob. In keeping with the brand's restraint, motion should be treated qualitatively: quiet, minimal, and unobtrusive — transitions that respect the gallery-like calm rather than drawing attention to themselves. The flat, monochrome system implies subtle, understated movement (gentle fades and clean transitions) over expressive or bouncy animation. Do not invent specific durations or curves; let any motion echo the same discipline as the visual identity — present only when it serves clarity, never as decoration.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.hyundaicard.com (homepage / brand context — main site security-plugin-walled), https://dive.hyundaicard.com (live DOM inspect — monochrome surface, Youandi display fonts, Noto Sans KR body, button + tag values), https://newsroom.hyundaicard.com (brand-owned regional source)
+**Tier 2 sources:** getdesign.md/hyundaicard — NOT LISTED. refero — not listed. Note: hyundaicard.com main site is security-plugin-walled; DIVE (dive.hyundaicard.com) is the accessible brand surface and carries the same Youandi/monochrome identity.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/inflearn/DESIGN.md

@@ -309,6 +309,25 @@ Mantine's default transition timing function is `--mantine-transition-timing-fun
 - **Keyboard nav**: Mantine `focusRing="auto"` — visible 2px green ring on Tab navigation.
 - **Screen reader**: GNB icon-only buttons carry `aria-label` (`search-menu`, `service-menu` observed). Course tiles use semantic `<article>`.
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Use the single mint-green #00C471 for all primary action — search submit, primary CTA, active pagination, free/starter tag fills — and swap to #00A760 only for hover/pressed states
+- Set type in the Pretendard-first stack with a binary-ish weight scale: 700 for headings (H1 34px, H2 20px), 600 for nav and labelled buttons, 400 for body and prices — there is no 500
+- Apply the two-family radius vocabulary: 8px for cards, inputs, and pagination; 32px for nav pills; and full-pill 999px only for the green search submit and tag chips
+- Render the GNB as a sticky 65px white bar with no shadow and no border, letting the green circular search button be the only visual accent
+- Keep course tiles borderless and transparent (~230x310px, 8px thumbnail radius) so the thumbnail does the visual work, with title in #212529, instructor in #868E96, and price in #212529 weight 400
+- Inherit the Mantine semantic palette for non-brand needs — red #FA5252 for errors, blue #228BE6 for info, cyan-teal #1098AD for category tags — and reach for it instead of inventing new hues
+
+### Don't
+- Introduce a second brand accent hue for a sub-product — tint the existing #00C471 (e.g. rgba(0,196,113,0.1)) or fall back to the Mantine red/blue/yellow/cyan scales instead
+- Use #00C471 for body-text links or small text — it scores only 2.45:1 on white and fails AA, so reserve it for white-on-green CTAs and >18pt headings
+- Embolden prices in red or add strikethrough discount callouts outside intentional sale rails — keep price in body weight 400 as a fact, not a flag
+- Add campaign drama like rotating banner carousels, parallax, or auto-advancing home rails — show ~24 calm catalog tiles above the fold and make card thumbnail scale (1.0 to 1.02) the only ambient motion
+- Use pressure or hype microcopy such as 지금 바로!, 놓치지 마세요, 최저가, 최고의 강의, Oops!, or 오류가 발생했습니다 — write agency-on-the-learner copy in casual-polite ~해요 instead
+- Call instructors 강사 or 교수 or pit them against each other with ranking labels — use the brand term 지식공유자님 and neutral counts like 수강생 12,400명
+
 ---
 
 ## 10. Voice & Tone