oh-my-design-cli 1.8.7 → 1.9.0

package/web/references/inflearn/DESIGN.md

@@ -8,446 +8,301 @@ primary_color: "#00c471"
 logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=inflearn.com&sz=256"
-verified: "2026-05-15"
+verified: "2026-07-13"
 omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: product-home, kind: product-home, url: "https://www.inflearn.com/", inspected: "2026-07-13" }
+    - { id: product-courses, kind: product-catalog, url: "https://www.inflearn.com/courses", inspected: "2026-07-13" }
+    - { id: engineering-documentation, kind: documentation-chrome, url: "https://tech.inflab.com/20260305-new-header/", inspected: "2026-07-13" }
+  sources:
+    - { id: home-capture, kind: product-surface, url: "https://www.inflearn.com/", captured: "2026-07-13" }
+    - { id: courses-capture, kind: product-surface, url: "https://www.inflearn.com/courses", captured: "2026-07-13" }
+    - { id: engineering-context, kind: official-doc, url: "https://tech.inflab.com/20260305-new-header/", captured: "2026-07-13" }
+    - { id: design-system-context, kind: official-doc, url: "https://tech.inflab.com/20240224-design-system/", captured: "2026-07-13" }
+    - { id: company-context, kind: official-doc, url: "https://story.inflab.com/main/%ED%9A%8C%EC%82%AC%EC%86%8C%EA%B0%9C/", captured: "2026-07-13" }
+    - { id: font-design, kind: official-doc, url: "https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/docs/en/README.md", captured: "2026-07-13" }
+    - { id: font-license, kind: license, url: "https://github.com/orioncactus/pretendard/blob/main/LICENSE", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.canvas": &product { surface_id: product-home, source_id: home-capture, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.ink": *product
+    "tokens.colors.text": *product
+    "tokens.colors.neutral": *product
+    "tokens.colors.subtle": *product
+    "tokens.colors.hairline": *product
+    "tokens.colors.primary": *product
+    "tokens.colors.primary-hover": *product
+    "tokens.colors.info-surface": *product
+    "tokens.colors.info": *product
+    "tokens.colors.cyan-tag-surface": *product
+    "tokens.colors.cyan-tag": *product
+    "tokens.typography.family.ui": *product
+    "tokens.typography.product-body.size": *product
+    "tokens.typography.product-body.weight": *product
+    "tokens.typography.product-body.lineHeight": *product
+    "tokens.typography.product-body.use": *product
+    "tokens.typography.product-control.size": *product
+    "tokens.typography.product-control.weight": *product
+    "tokens.typography.product-control.lineHeight": *product
+    "tokens.typography.product-control.use": *product
+    "tokens.typography.course-badge.size": *product
+    "tokens.typography.course-badge.weight": *product
+    "tokens.typography.course-badge.lineHeight": *product
+    "tokens.typography.course-badge.use": *product
+    "tokens.spacing.xs": *product
+    "tokens.spacing.sm": *product
+    "tokens.spacing.md": *product
+    "tokens.spacing.lg": *product
+    "tokens.rounded.badge": *product
+    "tokens.rounded.input": *product
+    "tokens.rounded.pill": *product
+    "tokens.rounded.full": *product
+    "tokens.shadow.flat": *product
+    "tokens.components.product-search-submit.type": *product
+    "tokens.components.product-search-submit.bg": *product
+    "tokens.components.product-search-submit.fg": *product
+    "tokens.components.product-search-submit.radius": *product
+    "tokens.components.product-search-submit.font": *product
+    "tokens.components.product-search-submit.states": *product
+    "tokens.components.product-search-submit.use": *product
+    "tokens.components.product-nav-action.type": *product
+    "tokens.components.product-nav-action.bg": *product
+    "tokens.components.product-nav-action.fg": *product
+    "tokens.components.product-nav-action.radius": *product
+    "tokens.components.product-nav-action.padding": *product
+    "tokens.components.product-nav-action.font": *product
+    "tokens.components.product-nav-action.states": *product
+    "tokens.components.product-nav-action.use": *product
+    "tokens.components.product-course-card.type": *product
+    "tokens.components.product-course-card.radius": *product
+    "tokens.components.product-course-card.font": *product
+    "tokens.components.product-course-card.states": *product
+    "tokens.components.product-course-card.use": *product
+    "tokens.components.product-content-tab.type": *product
+    "tokens.components.product-content-tab.bg": *product
+    "tokens.components.product-content-tab.fg": *product
+    "tokens.components.product-content-tab.radius": *product
+    "tokens.components.product-content-tab.padding": *product
+    "tokens.components.product-content-tab.font": *product
+    "tokens.components.product-content-tab.states": *product
+    "tokens.components.product-content-tab.use": *product
+    "tokens.components.product-dialog-overlay.type": *product
+    "tokens.components.product-dialog-overlay.bg": *product
+    "tokens.components.product-dialog-overlay.font": *product
+    "tokens.components.product-dialog-overlay.states": *product
+    "tokens.components.product-dialog-overlay.use": *product
 tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
+  source: reconciled
+  extracted: "2026-07-13"
+  note: "Selector-backed tokens are limited to the supplied Inflearn product-home and course-catalog capture. The Inflab engineering article is documentation chrome and official context, not a product-token source."
   colors:
-    primary: "#00c471"
-    primary-pressed: "#00a760"
-    heading: "#212529"
-    body: "#495057"
-    muted: "#868e96"
     canvas: "#ffffff"
-    surface-neutral: "#f8f9fa"
-    border: "#dee2e6"
-    disabled-bg: "#f1f3f5"
-    disabled-fg: "#adb5bd"
-    error: "#fa5252"
+    ink: "#212529"
+    text: "#495057"
+    neutral: "#f8f9fa"
+    subtle: "#f1f3f5"
+    hairline: "#dee2e6"
+    primary: "#00c471"
+    primary-hover: "#00a760"
+    info-surface: "#e7f5ff"
     info: "#228be6"
-    warning: "#fcc419"
-    teal-tag: "#1098ad"
+    cyan-tag-surface: "#e3fafc"
+    cyan-tag: "#1098ad"
   typography:
-    family: { sans: "Pretendard", mono: "ui-monospace, SFMono-Regular, monospace" }
-    h1:      { size: 34, weight: 700, lineHeight: 1.3, use: "Page hero phrase" }
-    h2:      { size: 20, weight: 700, lineHeight: 1.35, use: "Section title" }
-    body:    { size: 16, weight: 400, lineHeight: 1.5, use: "Default running text" }
-    nav:     { size: 16, weight: 600, lineHeight: 1.5, use: "Nav label, button label" }
-    caption: { size: 14, weight: 400, lineHeight: 1.4, use: "Instructor name, view count, price subtext" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 4, md: 8, lg: 32, full: 9999 }
+    family: { ui: "Pretendard" }
+    product-body: { size: 16, weight: 400, lineHeight: 1.50, use: "Repeated product-home and course-catalog text/card sample" }
+    product-control: { size: 16, weight: 400, lineHeight: 1.00, use: "Product GNB and control sample" }
+    course-badge: { size: 11, weight: 700, lineHeight: 1.64, use: "Course badge wrapper on product home and catalog" }
+  spacing: { xs: 4, sm: 8, md: 10, lg: 16 }
+  rounded: { badge: 4, input: 8, pill: 32, full: 999 }
   shadow:
     flat: "none"
   components:
-    button-search: { type: button, bg: "#00c471", fg: "#ffffff", radius: 9999, font: "16px weight 400", use: "Signature green circle search-submit, 42px" }
-    button-primary: { type: button, bg: "#00c471", fg: "#ffffff", radius: 8, padding: "0 24px", font: "16px weight 600", use: "Filled label CTA, hover #00a760" }
-    nav-pill: { type: tab, bg: "#f8f9fa", fg: "#495057", radius: 32, font: "16px weight 600", use: "GNB nav pill, resting", active: "green tint bg, #00c471 text" }
-    button-ghost: { type: button, bg: "#ffffff", fg: "#495057", radius: 32, font: "16px weight 600", use: "Inline secondary GNB item, hover #f8f9fa" }
-    pagination-default: { type: button, bg: "#ffffff", fg: "#212529", radius: 8, font: "14px weight 400", use: "Page number button, gray border" }
-    pagination-active: { type: button, bg: "#00c471", fg: "#ffffff", radius: 8, font: "14px weight 400", use: "Selected page" }
-    button-disabled: { type: button, bg: "#f1f3f5", fg: "#adb5bd", radius: 8, use: "Form-incomplete state" }
+    product-search-submit: { type: button, bg: "#00c471", fg: "#ffffff", radius: "999px", font: "16px / 400 Pretendard", states: "hover observed: #00a760", use: "Product GNB search submit; home::[data-omd-capture=8]" }
+    product-nav-action: { type: button, bg: "#f8f9fa", fg: "#495057", radius: "32px", padding: "0px 22px", font: "16px / 600 Pretendard", states: "hover observed: rgba(241,243,245,0.65)", use: "Product GNB navigation action; home::[data-omd-capture=12]" }
+    product-course-card: { type: card, radius: "8px", font: "16px / 400 Pretendard", states: "default only; no card interaction state captured", use: "Product course article shell; home::article" }
+    product-content-tab: { type: tab, bg: "#25262b", fg: "#ffffff", radius: "9999px", padding: "10px 16px", font: "14px / 700 system sans-serif", states: "selected observed", use: "Product-home selected content tab; home::[data-omd-capture=19]" }
+    product-dialog-overlay: { type: dialog, bg: "rgba(0,0,0,0.6)", font: "16px / 400 Pretendard", states: "dialog-open observed", use: "Product dialog backdrop; home::[data-omd-interaction-capture=dialog-2-8]" }
   components_harvested: true
 ---
 
-# Design System Inspiration of Inflearn
+# Design System Inspiration of Inflearn (인프런)
 
 ## 1. Visual Theme & Atmosphere
 
-Inflearn (인프런) is the design language of a **Korean lifelong-learning marketplace that wants to feel like a friendly bookshop, not a corporate LMS**. Where Coursera leans on muted academic blues and Udemy crowds the screen with discount stickers, Inflearn opens onto a **clean white canvas** with a single saturated **mint-green** (`#00C471`) doing all the interactive work — search submit, primary CTAs, active pagination, "free starter" tags. The green is specifically *Korean fintech-adjacent mint* (kin to Toss/Banksalad/Naver Pay families, but pulled brighter and more yellow-leaning than any of them), signalling "trustworthy, modern Korean web" without inheriting either Naver's dated green-tab idiom or KakaoTalk's yellow warmth.
-
-The page furniture is unmistakably **Mantine-built**: 162 `--mantine-color-*` CSS variables are exposed at runtime, plus the full `--mantine-radius-{xs,sm,md,lg,xl}` and `--mantine-spacing-*` scale. Inflearn has effectively adopted Mantine's theme primitives wholesale and overridden them with a brand green. This means the **radius vocabulary is mostly 8px (`md`)** for cards, inputs, and pagination — neither aggressive flat-2px (Banksalad's data-tool register) nor consumer-app plump-16px (Toss). Two exceptions tell the story: navigation pills round to **32px** (extra-soft, "browse-don't-task" feel) and the **search-submit and tag chips go full-pill at `999px`** — the green circle search button is the one decisive, on-brand moment in a deliberately calm GNB.
+Inflearn is Inflab’s career-learning platform: its official company introduction describes a space where people can learn and share knowledge without economic or time constraints, while its public product routes organize that promise as a dense course catalogue. The supplied home and course-list captures use a white field, dark neutral text, a precise green action color, compact rounded navigation controls, and image-led course articles. The expression is practical rather than decorative: the emphasis is on finding, comparing, and entering learning content.
 
-Typography is **Pretendard-first** with no custom display face. Headings (H1 34px / 700, H2 20px / 700) sit in Mantine-dark `#212529`, body text in `#495057`, muted metadata in `#868E96` — Inflearn does not use pure `#000` anywhere on type. The visual silhouette is intentionally close to "modern Korean SaaS landing" (Pretendard + clean white + one branded green) — recognizable to anyone who has used Toss, Wanted, or Banksalad — because Inflearn's audience overlaps heavily with those products and the brand wants instant credibility, not novelty.
-
-**Key Characteristics:**
-- Pretendard-first system font stack (no bundled web-font; OS fallback handles Korean coverage)
-- Signature mint-green `#00C471` for all primary action; brighter and more yellow than Toss/Banksalad mints
-- Mantine theme primitives exposed live (`--mantine-radius-md = 0.5rem`, `--mantine-color-*`)
-- Two radius families: cards/inputs at `8px`, nav pills at `32px`, decisive CTAs full-pill `999px`
-- Sticky white GNB at 65px — no shadow, no border — the green search button is the only visual accent
-- Course tiles are borderless transparent cards (`article.mantine-Card-root`, radius 8px, ~230×310px) — thumbnail does the visual work
-- Pagination uses solid-green active page on white surroundings — the same green as the CTA, no second accent hue
-- No theatrical shadow / no gradient — Inflearn is "calm catalog, friendly green"
+The current product shell should not be confused with every Inflearn-owned page. The supplied third route is an Inflab engineering article with separate documentation chrome; it is recorded as first-party context only. Inflab’s own engineering writing says the service has accumulated multiple systems and that its newer shared GNB serves courses, challenges, mentoring, clips, and community across multiple front-end environments. That is useful evidence for the header’s product importance, not authorization to turn documentation styles into product tokens.
 
 ## 2. Color Palette & Roles
 
-### Primary
-- **Inflearn Green** (`#00C471`): Primary brand color. Search submit, primary CTA, active pagination page, "starter / free" course tag fills, link accents.
-- **Inflearn Green Pressed** (`#00A760`): Pressed / focused / visited state. Observed as the high-frequency near-shade on the home palette histogram (450 instances) — likely the `:hover` / `:active` token paired with the primary.
-
-### Text
-- **Heading** (`#212529`): Mantine dark-9 equivalent. H1/H2/H3, course tile titles.
-- **Body** (`#495057`): Default reading text and nav link colour.
-- **Muted / Caption** (`#868E96`): Metadata, instructor sublabels, view counts.
-- **On-Green** (`#FFFFFF`): Text colour on every green surface (search submit, primary CTA, active pagination).
-
-### Surface
-- **Page** (`#FFFFFF`): Default canvas.
-- **Surface Neutral** (`#F8F9FA`): GNB pill button rest state, soft section dividers, secondary chip fills.
-- **Border / Divider Inferred** (`#DEE2E6`): Mantine gray-3 — implied separator hue (not directly captured but consistent with the Mantine system that Inflearn theme-extends).
+### Color tokens
 
-### Semantic (Mantine-inherited)
-- **Error Red** (`#FA5252`): Form validation errors, destructive confirmation. (Mantine red-6.)
-- **Info Blue** (`#228BE6`): Inline informational accent, link-type chips. (Mantine blue-6.)
-- **Warning Yellow** (`#FCC419`): Caution / pending states. (Mantine yellow-5.)
-- **Teal Tag** (`#1098AD`): Category / lecture-type tag accent (mantine cyan-7). Appears with notable frequency on course cards.
+- `#FFFFFF` — observed product canvas and control background.
+- `#212529` — repeatedly observed product ink.
+- `#495057` — repeatedly observed product control and secondary text.
+- `#F8F9FA` — observed GNB action background and product tab hover background.
+- `#F1F3F5` — observed hover/disabled neutral treatment; the source-specific alpha is retained in the component record below.
+- `#DEE2E6` — observed product control border.
+- `#00C471` — observed product GNB search-submit and selected control background.
+- `#00A760` — observed hover treatment for the GNB search-submit and an observed course-badge background.
+- `#E7F5FF` / `#228BE6` — observed blue course-badge wrapper/text pair.
+- `#E3FAFC` / `#1098AD` — observed cyan course-badge wrapper/text pair.
 
-Inflearn does not maintain a separate brand semantic palette — it inherits Mantine's `red / blue / yellow / cyan` scales and overrides only the `green` scale with the Inflearn primary. Designers picking from Inflearn should treat the Mantine palette as the de-facto extended system.
+These values are product-route observations, not a claim that every public Inflab site has the same palette.
 
-## 3. Typography Rules
+## 3. Typography & Layout Evidence
 
-### Font Family
-- **Primary**: `Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif`
-- **Mono**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` (carried from Mantine default — surfaces inside code-snippet course previews and dev-tools-style screenshots)
-- No custom display face. Headings use the same Pretendard stack; differentiation comes from weight and size only.
-- No bundled web-font on `/`. Korean glyphs render through the OS fallback chain.
+### Typography evidence classes
 
-### Hierarchy
+- **Live product computed use:** `Pretendard` is the sole promoted UI family. It has 1,278 visible computed uses across the home and course catalog, and the supplied collector reports a loaded FontFaceSet match with high confidence. The artifact supplies no font-file URL for that loaded face, so the web-source location remains unresolved rather than invented.
+- **System fallbacks:** `sans-serif` is a high-confidence system resolution in 153 observed product elements; `Arial` and `Roboto` each occur once in the full bundle. They remain system evidence, not Inflearn brand families.
+- **Declared-only assets:** Fira Code, Font Awesome 6 Pro, KaTeX faces, and Source Serif 4 have zero visible use in this capture. Fira Code, Font Awesome, and Source Serif 4 include declared source URLs; the KaTeX declarations do not. None are promoted to UI tokens or rendered as substitutes.
+- **Official distribution and licence boundary:** Pretendard’s upstream README documents static and variable webfont distribution, while its upstream project publishes the font software under SIL Open Font License 1.1. These identify the asset and licence only; the product-use claim comes from computed use plus the loaded FontFaceSet observation.
 
-| Role | Size | Weight | Line Height | Notes |
-|---|---|---|---|---|
-| H1 (page hero) | 34px | 700 | 44.2px (1.3) | Hero phrase: "인프런 - 라이프타임 커리어 플랫폼" |
-| H2 (section title) | 20px | 700 | 27px (1.35) | "0원으로 부담없이 시작하기" — section openers |
-| H3 (sub-section / card cluster head) | 18px (inferred) | 700 | 1.4 | Course-tile section labels |
-| Body | 16px | 400 | 1.5 | Default running text, nav default |
-| Nav label | 16px | 600 | 1.5 | "지식공유" / "로그인" / "카테고리" pills |
-| Button label (filled) | 16px | 600 | 1.0 | Primary CTA text |
-| Caption / Metadata | 13–14px (inferred) | 400 | 1.4 | Instructor name, view count, price subtext |
+- The captured product surfaces expose repeated 4px, 8px, 10px, and 16px spacing values. They form the conservative observed spacing set in frontmatter.
+- The product home and catalog both include course `article` shells at 8px radius with zero padding and no shadow. The capture does not establish a universal course-grid column count, image ratio, responsive breakpoint, course-detail layout, or checkout layout.
+- Product navigation actions are route-level controls, not evidence for a universal page container or an application-wide 65px header rule.
 
-### Rules
-- **Pretendard everywhere.** No serif, no rounded display face. Discipline is part of the calm-catalog feel.
-- **700 = heading. 600 = nav and labelled button. 400 = body, icon-only button, input.** There is no 500 — the weight scale is intentionally binary-ish.
-- Numerals (course price, ratings) inherit body weight 400 — Inflearn does not embolden prices the way fintech does. The decision to enrol should feel low-pressure.
-- Korean punctuation: full-width quotes `「」` / `『』` are avoided in UI; straight quotes only.
+## 4. Components
 
-## 4. Component Stylings
+### Product GNB search submit
 
-### Buttons
-
-**Primary CTA — Pill Search Submit**
-- Background: `#00C471`
-- Text: `#FFFFFF`
-- Border: 1px solid transparent
-- Radius: 999px
-- Padding: 0 (icon-only)
-- Height: 42px
-- Width: 42px
-- Font: 16px / 400 / Pretendard
-- Shadow: none
-- Use: The signature green circle search-submit button in the GNB — the single most-recognisable component on the site.
-
-**Primary CTA — Filled Label (Inferred)**
+**Default**
 - Background: `#00C471`
 - Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 0 16px (icon-button observed); 0 24px for labelled
-- Height: 42px
-- Font: 16px / 600 / Pretendard
+- Radius: `999px`
+- Font: `16px / 400 Pretendard`
 - Hover: background `#00A760`
-- Use: "수강신청", "결제하기", primary actions inside course detail / cart.
+- Use: Product GNB search-submit; `home::[data-omd-capture="8"]`. Hover provenance is `home::[data-omd-capture="8"]::state-hover` and is also present on the catalog surface.
+
+### Product GNB navigation action
 
-**Nav Pill — Resting (Neutral)**
+**Default**
 - Background: `#F8F9FA`
 - Text: `#495057`
-- Border: 1px solid transparent
-- Radius: 32px
-- Padding: 0 22px (labelled) / 0 (icon-only 42×42)
-- Height: 42px
-- Font: 16px / 600 / Pretendard
-- Use: "로그인", "service-menu" icon, "카테고리" pill — every GNB action that is not the green search submit.
-
-**Nav Pill — Active (Selected)**
-- Background: `rgba(0, 196, 113, 0.1)` (inferred Mantine green tint)
-- Text: `#00C471`
-- Border: 1px solid transparent
-- Radius: 32px
-- Padding: 0 12px
-- Height: 42px
-- Font: 16px / 600 / Pretendard
-- Use: Active top-level nav section ("지식공유" when on /knowledge etc.).
-
-**Ghost / Text Link Button**
-- Background: transparent
-- Text: `#495057`
-- Border: 1px solid transparent
-- Radius: 32px
-- Padding: 0 12px
-- Font: 16px / 600 / Pretendard
-- Hover: background `#F8F9FA`
-- Use: Inline secondary GNB items ("지식공유"), category-row navigation.
-
-**Pagination — Default**
-- Background: `#FFFFFF`
-- Text: `#212529`
-- Border: 1px solid `#DEE2E6` (Mantine gray-3, inferred)
-- Radius: 8px
-- Padding: 0 12px
-- Height: 38px
-- Font: 14px / 400 / Pretendard
-- Use: Page number buttons on /courses listing.
-
-**Pagination — Active**
-- Background: `#00C471`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 0 12px
-- Height: 38px
-- Font: 14px / 400 / Pretendard
-- Use: Currently selected page in the /courses pagination cluster.
-
-**Disabled (Inferred from Mantine default)**
-- Background: `#F1F3F5`
-- Text: `#ADB5BD`
-- Border: none
-- Radius: 8px
-- Padding: 12px 24px
-- Font: 16px / 600 / Pretendard
-- Use: Form-incomplete state on enrol / payment flows.
-
-### Inputs & Forms
-
-**Text Input — Default (Search)**
-- Background: `#FFFFFF`
-- Text: `#212529`
-- Placeholder: `#868E96` (inferred)
-- Border: 1px solid `#DEE2E6` (inferred — captured border was `0px none` on the inner input element; outer wrapper carries the border per Mantine pattern)
-- Radius: 8px
-- Padding: 0 12px
-- Height: 36px
-- Font: 16px / 400 / Pretendard
-- Use: GNB search field — paired with the green pill submit on its right.
-
-**Text Input — Focus (Inferred)**
-- Background: `#FFFFFF`
-- Border: 1px solid `#00C471`
-- Use: All form fields on focus.
-
-### Cards & Containers
-
-**Course Tile (Default)**
-- Background: transparent
-- Border: none
-- Radius: 8px
-- Padding: 0 (thumbnail is the visual container; metadata sits below in flow)
-- Width × Height: ~230 × 310px (home) / ~230 × 325px (/courses)
-- Shadow: none
-- Use: The dominant content unit. A `article.mantine-Card-root` wrapper with a thumbnail image (radius 8px), title in `#212529` 700, instructor in `#868E96`, price in `#212529` 400, optional green starter / red discount tags.
-
-**Course Tile — Featured / Highlighted (Inferred)**
-- Background: `#FFFFFF`
-- Border: 1px solid `#DEE2E6` (Mantine gray-3)
-- Radius: 8px
-- Padding: 16px
-- Shadow: `0 1px 3px rgba(0, 0, 0, 0.05)` (Mantine `--mantine-shadow-xs` equivalent)
-- Use: "추천" / promoted course slot on home rails.
-
-**Tag — Free / Starter**
-- Background: `rgba(0, 196, 113, 0.12)`
-- Text: `#00C471`
-- Radius: 999px
-- Padding: 2px 10px
-- Font: 12px / 600 / Pretendard
-- Use: "무료" / starter-course indicator on course tiles.
-
-**Tag — Category (Cyan-Teal)**
-- Background: `rgba(16, 152, 173, 0.1)`
-- Text: `#1098AD`
-- Radius: 999px
-- Padding: 2px 10px
-- Font: 12px / 600 / Pretendard
-- Use: Category / lecture-type tags on tiles.
-
-### Navigation
-
-**Global Nav (GNB)**
-- Background: `#FFFFFF`
-- Text: `#495057` (default) / `#212529` (heading & emphasized)
-- Border-bottom: none
+- Radius: `32px`
+- Padding: `0px 22px`
+- Font: `16px / 600 Pretendard`
+- Hover: background `rgba(241, 243, 245, 0.65)`
+- Use: Product GNB navigation action; `home::[data-omd-capture="12"]`. The observed hover selector is `home::[data-omd-capture="12"]::state-hover`.
+
+### Product course card
+
+**Default**
+- Radius: `8px`
+- Padding: `0px`
+- Font: `16px / 400 Pretendard`
 - Shadow: none
-- Position: sticky
-- Height: 65px
-- Layout: [logo] · [primary nav pills] · [search input + green pill submit] · [right-side icon pills + 로그인]
-- Use: The single GNB pattern; persists across home, courses, detail.
+- Use: Product course article shell on home and course catalog; `home::article` and `surface-2::article`.
 
-**Footer (Inferred)**
-- Background: `#F8F9FA` (Mantine gray-0)
-- Text: `#495057` / `#868E96` for secondary lines
-- Padding: 48px 0 (block) — Mantine spacing-xl × 2
-- Use: Standard 4-column link list + company-info row.
+### Product content tab
 
----
-
-**Verified:** 2026-05-14
-**Tier 1 sources:**
-- `https://www.inflearn.com/` — live CDP inspect (browser-harness :9222) → `assets/_reference/.live-inspect-proof.json` (12 raw_samples + 162 `--mantine-*` CSS vars + h1/h2 typography sample)
-- `https://www.inflearn.com/courses` — second-surface live CDP inspect → `assets/_reference/.live-inspect-proof-courses.json` (8 raw_samples + pagination active-state observed `#00C471`)
-- `https://tech.inflab.com/20260305-new-header/` — Inflearn engineering blog post "MFE 환경에서 공통 헤더(GNB) 개편하기" confirming GNB rebuild as shared MFE component
-
-**Tier 2 sources:**
-- `https://getdesign.md/inflearn` — empty (verified 2026-05-14: "No designs found for 'inflearn'")
-- `https://styles.refero.design/?q=inflearn` — empty (verified 2026-05-14: no result cards returned)
+**Selected**
+- Background: `#25262B`
+- Text: `#FFFFFF`
+- Radius: `9999px`
+- Padding: `10px 16px`
+- Font: `14px / 700 system sans-serif`
+- Use: Selected product-home content tab; `home::[data-omd-capture="19"]` and interaction capture `home::[data-omd-interaction-capture="tab-3-3"]`.
 
-**Conflicts unresolved:** none
+**Hover**
+- Background: `#F8F9FA`
+- Text: `#212529`
+- Radius: `9999px`
+- Padding: `10px 16px`
+- Font: `14px / 400 system sans-serif`
+- Use: Product-home content-tab hover sample; `home::[data-omd-capture="20"]::state-hover`.
 
-**Inferred-but-not-live-captured tokens** (flagged for follow-up UPDATE on a course-detail / cart / payment surface): Primary CTA labelled fill (only icon-pill captured), focus state on inputs, disabled state, tag chip exact alpha values, footer exact spacing.
+### Product dialog overlay
 
-## 5. Layout & Spacing
+**Open**
+- Background: `rgba(0, 0, 0, 0.6)`
+- Font: `16px / 400 Pretendard`
+- Use: Dialog backdrop expanded by the collector on home and catalog; `home::[data-omd-interaction-capture="dialog-2-8"]`.
 
-Inflearn inherits Mantine's spacing scale verbatim:
+The supplied bundle records menu, dialog, and tab interactions (nine interaction expansions in total). Only the selectors and states listed above are reusable claims. No checkout, payment, error, toast, skeleton, course-card-hover, or responsive variant is inferred.
 
-| Token | Value | Typical use |
-|---|---|---|
-| `--mantine-spacing-xs` | `0.625rem` (10px) | Tight chip/tag padding, inline icon gaps |
-| `--mantine-spacing-sm` | `0.75rem` (12px) | Button horizontal padding, list-item gutters |
-| `--mantine-spacing-md` | `1rem` (16px) | Default card padding, form field gap |
-| `--mantine-spacing-lg` | `1.25rem` (20px) | Section content gutter |
-| `--mantine-spacing-xl` | `1.5rem` (24px) | Section block separator, footer column gap |
+---
 
-Course rails on the home page use a **6-column horizontal grid** (`~230px` tile × 6 = 1380px content width) with `24px` gap between tiles. The GNB content sits inside a `max-w-1200` container with `16px` left/right padding on viewport widths < 1280px. Vertical rhythm between content blocks is `48px–64px` — Mantine `xl × 2` to `xl × 2.5`.
+**Verified:** 2026-07-13
+**Tier 1 sources:** `https://www.inflearn.com/` (product home), `https://www.inflearn.com/courses` (product catalog), `https://tech.inflab.com/20260305-new-header/` (first-party engineering documentation/context), `https://tech.inflab.com/20240224-design-system/` (first-party design-system context), `https://story.inflab.com/main/%ED%9A%8C%EC%82%AC%EC%86%8C%EA%B0%9C/` (first-party company context), `https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/docs/en/README.md` (upstream font distribution), and `https://github.com/orioncactus/pretendard/blob/main/LICENSE` (upstream font licence boundary)
+**Tier 2 sources:** `https://getdesign.md/inflearn` (attempted; built-in web open returned an internal safe-open failure), `https://styles.refero.design/?q=inflearn` (attempted; built-in web open returned an internal safe-open failure); no usable Inflearn record was returned by the required cross-check attempts.
+**Conflicts unresolved:** none
 
-Density is **catalog-tight, not Toss-airy** — Inflearn assumes a returning user scanning for the next course, so it packs more tiles per fold than a marketing-first SaaS landing would. This is the major visual difference between Inflearn and (for example) Wanted: same Pretendard font, same Mantine-like radius vocabulary, but Inflearn shows you ~24 tiles above the fold; Wanted shows ~6.
+Legacy claims about a universal Mantine token sheet, a named 65px sticky GNB contract, course-detail/cart/payment CTAs, input outlines, footer geometry, card motion, empty/error/success states, and unmeasured course-grid rules were removed because the supplied 2026 evidence does not establish them.
 
-## 6. Iconography & Imagery
+## 5. Iconography & Imagery
 
-- **Icon set**: Custom SVG line icons (24×24 viewbox, 1.5px stroke) for the GNB and inline actions. Stroke colour follows text-context (`#495057` default, `#00C471` when paired with active green surface).
-- **Course thumbnail style**: 16:9 photographic or illustrative — wide stylistic range because covers are author-submitted. Inflearn standardizes the radius (8px) and aspect ratio, not the art direction.
-- **Hero illustrations**: When used, soft flat-vector with a single mint-green accent so they read as "Inflearn-coloured" without dominating.
-- **Photography**: Sparse on product surfaces; reserved for instructor profile portraits in course detail.
+The product surfaces include course articles and standard controls, but the supplied evidence does not identify a named icon library, SVG stroke rule, image aspect-ratio contract, or universal thumbnail treatment. Course imagery and any inline icon implementation remain route content rather than promoted system tokens.
 
-## 7. Motion
+## 6. Shape & Elevation
 
-Inflearn motion is **minimal-functional**:
-- Nav pill hover: background fade `200ms ease`.
-- Card hover: thumbnail scale `1.0 → 1.02`, `200ms ease-out`, paired with a subtle elevation increase (shadow `xs` → `sm`).
-- Page transitions: no client-side animated transitions — full SSR navigation on link click; the perceived motion budget is spent on the in-place hover affordances.
-- Loading: Mantine `Loader` (rotating dot ring) in `#00C471`.
+- Product evidence includes 4px badge wrappers, 8px course-card/input shells, 32px GNB actions, and `999px`/`9999px` pill controls. These are distinct observed shapes, not a mandate to round unrelated interfaces.
+- The selector-backed GNB controls, search submit, course article, and dialog backdrop have `box-shadow: none`. A separate course-catalog control has a local shadow observation, but the bundle does not establish a reusable elevation scale.
 
-Mantine's default transition timing function is `--mantine-transition-timing-function: ease` — Inflearn does not override it.
+## 7. Content & Voice
 
-## 8. States
+Inflab’s official company page frames the service around career learning, knowledge sharing, fair access to growth opportunities, transparent course/review information, and content rather than inflated marketing. Treat this as brand context: it supports clear, learner-respecting copy but does not establish fictional UI slogans, exact CTA wording, or a product-wide Korean grammatical style guide.
 
-- **Hover**: nav pill bg `#F8F9FA → #E9ECEF` (inferred); card thumbnail scale 1.02; CTA bg `#00C471 → #00A760`.
-- **Focus**: 2px outline `#00C471` at 2px offset on keyboard focus; input border swaps to `#00C471`.
-- **Active / Pressed**: CTA bg `#00A760`; pagination active page solid `#00C471` on white.
-- **Disabled**: Mantine default — `#F1F3F5` background, `#ADB5BD` text, `cursor: not-allowed`.
-- **Loading**: Mantine `Loader` in primary green; CTA can swap label for inline spinner.
-- **Empty**: Centered illustration + headline (`아직 수강 중인 강의가 없어요`) + secondary outlined CTA (`강의 둘러보기`).
-- **Error**: Inline `#FA5252` 14px text below the offending field; field border swaps to `#FA5252`.
-- **Success**: One-line confirmation in `#00C471` 14px, no toast theatre.
-- **Skeleton**: `#F1F3F5` block, shimmer `1.5s` linear (Mantine `Skeleton` default).
+### Do
 
-## 9. Accessibility & Internationalization
+- Keep learner and knowledge-sharing context tied to the official company narrative.
+- Preserve source-domain boundaries when referring to product, documentation, or company-story content.
 
-- **Korean is the primary language.** English surfaces exist for `/en/` mirror but are translations, not parity. Date formats follow Korean conventions (`2026년 5월 14일`).
-- **Pretendard** is a Korean-display-first font — supports the full Hangul block plus extended Latin; English text reads naturally without a separate Latin font.
-- **Color contrast**: Heading `#212529` on `#FFFFFF` = 16.0:1 (AAA). Body `#495057` on `#FFFFFF` = 8.6:1 (AAA). Primary green `#00C471` on `#FFFFFF` = 2.45:1 — **fails AA for body text**; Inflearn correctly uses it only on white-on-green CTAs (where contrast is 4.4:1, passes AA), as accent fills, and for >18pt heading-scale text. Designers should not use `#00C471` for body-text links without a darker variant — use `#00A760` (3.5:1, still borderline AA for body) and prefer underline + bold.
-- **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>`.
+### Don't
 
+- Turn a company mission statement into an unobserved product microcopy template.
+- Present declared-only or system fonts as loaded Inflearn UI fonts.
 
-## 16. Do's and Don'ts
+## 8. Accessibility & States
 
-### 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
+- The captured search-submit is white text on `#00C471`; the source records its observed hover background as `#00A760`.
+- The captured dialog backdrop is `rgba(0, 0, 0, 0.6)`. The bundle confirms that a dialog-open state exists but does not provide a general dialog-panel accessibility specification.
+- The home capture includes one disabled button with `#F1F3F5` background, `#ADB5BD` text, a `#DEE2E6` border, and 32px radius. It is a selector-specific observation, not a universal disabled-state token because the catalog’s disabled sample differs.
+- No accessibility conformance, focus-visible outline, keyboard order, error message, loading, empty, success, or responsive behavior is claimed beyond the recorded interaction states.
 
-### 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명
+## 9. Source Boundaries
 
----
+The product home and course catalog are the only sources of product tokens and component claims in this reference. The Inflab engineering article is documentation chrome and describes the 2025 GNB redesign, its MFE/App Shell context, and the product’s core service navigation; it must not populate product CSS tokens. The company introduction supplies factual narrative about career learning and knowledge sharing. No separate public marketing surface was captured, and no login, course-detail, cart, payment, or learning-room flow was treated as observed.
 
 ## 10. Voice & Tone
 
-Inflearn speaks like **the friendly senior who shows you their bookshelf**, not the strict instructor. The tagline "**라이프타임 커리어 플랫폼**" (lifetime career platform) is the single most load-bearing piece of voice on the site — every microcopy decision reinforces *"learning is something you keep doing"* rather than *"finish this course and pass"*. Where Coursera says *"Earn a verified certificate"* and Udemy says *"30-Day Money-Back Guarantee"*, Inflearn says *"부담없이 시작하기"* (start without pressure) — the verb framing is always agency-on-the-learner, not pressure-from-the-platform.
-
-Korean is the dominant register; English appears only for technical course titles (where the technology has an English name — "React", "Spring", "Kubernetes") and for the `/en` mirror. The voice avoids the formal `~합니다` ending in product surfaces (it survives in legal / refund / receipt screens) and uses the casual-polite `~해요` everywhere users are choosing what to learn.
+The first-party company introduction addresses people who build careers and dreams, describes expert knowledge sharing, and frames Inflearn as a career-learning platform. It also explicitly values transparent course information, opportunities to learn despite cost or time constraints, and good content over inflated marketing. Together those statements support a grounded, learner-respecting brand voice: clarity about what is being learned and who is sharing the knowledge is more defensible than pressure or spectacle.
 
-| Context | Tone |
-|---|---|
-| CTAs | Imperative + concrete outcome, no exclamation. `수강신청 하기`, `결제하기`, `장바구니에 담기`. Never `지금 바로!`. |
-| Section headlines | A friendly invitation, not a sales hook. `0원으로 부담없이 시작하기` rather than `무료 강의 BEST 100!`. |
-| Course tile metadata | Bare facts. Instructor name, run time, rating, price. No promotional copy on the tile itself. |
-| Free tag | Two characters: `무료`. Green pill on white tile. No "FREE!" / "Limited time!" framing. |
-| Empty states | Why empty + one next step. `아직 수강 중인 강의가 없어요. 관심 분야의 강의를 둘러보세요.` |
-| Error / validation | Specific cause + action. `이메일 형식이 올바르지 않아요. 다시 확인해주세요.` Never `오류가 발생했습니다`. |
-| Success | One line, no celebration. `수강신청이 완료되었어요. 내 강의실에서 확인할 수 있어요.` |
-| Instructor surfaces | Respectful 2nd-person `~님`. `지식공유자님` is the brand term for instructor — never `강사`, which would feel one-way. |
-
-**Forbidden phrases (illustrative — not from a published Inflearn guide; derived from observed restraint on `/` and `/courses`)**: `오류가 발생했습니다`, `놓치지 마세요`, `Oops!`, `지금 바로!`, `최저가`, exclamation marks on routine CTAs, emoji on price or enrolment surfaces, superlatives on course recommendations (`최고의 강의`, `이번 주 1등`). Where ranking matters, Inflearn uses neutral counts (`수강생 12,400명`) instead of editorialized rank labels.
+They are not a published UI copy manual. The product capture confirms controls and course content but does not prove an exact CTA vocabulary, a required Korean sentence ending, a particular error-message formulation, or a campaign-copy rule. Preserve the company’s stated commitments as context and leave specific product strings unclaimed unless a product surface directly supplies them.
 
 ## 11. Brand Narrative
 
-Inflearn was founded in **2015** by **Lee Hyung-joo (이형주)** under the parent company **Inflab (인프랩)**, headquartered in Seoul. The founding observation was specifically Korean: that working developers, designers, and PMs were learning more from short-form online courses than from university or formal certification, but the existing Korean e-learning market was dominated by exam-prep cram services (수능, 공무원) that treated adult professional learners as if they were teenagers preparing for the SAT.
+Inflab’s own introduction describes Inflearn as a career-learning platform for people who pursue work and dreams. It says the service aims to let people learn and share knowledge without being prevented by economic or time constraints, and it presents knowledge sharers with substantial professional experience as a source of expertise. The company also frames transparent course information and a long-term growth ecosystem as part of its purpose.
 
-Inflearn's bet was that **the same people who built the Korean IT industry — engineers, designers, marketers — would also teach it**, if given a low-friction marketplace and a respectful split of the revenue. The platform brand name itself is *Information + Learn*, and Inflab's tagline frames the company as a **"lifetime career platform"** rather than an LMS or a course store — the design language reflects that framing: a calm catalog you return to, not a campaign-driven sales surface.
+Its engineering writing gives that public product a current operational context. A 2024 design-system retrospective says historical systems coexisted, while the 2026 GNB account explains how a new shared header made the core services—courses, challenges, mentoring, clips, and community—more legible across multiple front-end environments. This is an evolution in product infrastructure and navigation, not evidence that every public surface shares a single stylesheet or component library.
 
-By 2026, Inflearn lists tens of thousands of courses across IT, design, business, language, and lifestyle, and has expanded into roadmap-style course bundles, live mentoring, and a Q&A community. The visual evolution from the early-2010s blue-and-white directory layout to the current Mantine-built mint-green catalog is itself documented on the Inflab engineering blog (`tech.inflab.com`), where the team has written publicly about the design and infrastructure of the redesign — including, in 2026-03, a post on rebuilding the shared GNB header across the company's micro-frontend architecture.
+The reference therefore keeps the official service and evolution story, but does not invent founder history, customer metrics, a uniform visual system, or a quantified design outcome beyond what those sources state.
 
 ## 12. Principles
 
-1. **Friendly, not formal.** Casual-polite `~해요` is the default Korean ending. *UI implication:* avoid `~하시기 바랍니다` in product surfaces; reserve `~합니다` for legal screens.
-
-2. **Catalog density over campaign drama.** Returning users dominate the audience; the home page is a place to *scan*, not to *be sold to*. *UI implication:* show ~24 course tiles above the fold; reserve hero space for one calm headline, not a rotating banner carousel.
-
-3. **One green, used decisively.** A single brand colour for every interaction. *UI implication:* never introduce a secondary brand colour for a sub-product; tint the existing green or fall back to the Mantine semantic palette (red/blue/yellow/cyan).
-
-4. **The instructor is `지식공유자님`.** Knowledge-sharer, not lecturer. *UI implication:* avoid hierarchy language (`강사` / `교수`) and avoid star/rating language that pits instructors against each other on the same screen.
-
-5. **Price is a fact, not a flag.** Course prices appear in body weight 400, not bold red, not strikethrough-with-discount-callout (except on intentional sale rails). *UI implication:* a course tile is a content card first, a commerce card second.
-
-## 13. Personas
+1. **Career learning and knowledge sharing.** The company describes a platform for people to learn and share expertise. *UI implication:* do not replace that service context with unsupported commerce or credential claims.
+2. **Transparent information.** The company says it publishes learner counts and course evaluations without selection or manipulation. *UI implication:* where such data is presented, distinguish actual product evidence from marketing interpretation.
+3. **Opportunity through accessibility.** The company describes reducing economic and time barriers to learning. *UI implication:* do not turn that narrative into unobserved pricing, promotion, or eligibility UI.
 
-*(Personas inferred from observable surface targeting on `/`, `/courses`, `tech.inflab.com`; not from a published Inflearn persona doc.)*
+## 13. Stakeholder Groups
 
-- **The Switching IC.** 28–35, working in a Korean tech / non-tech company, considering a role pivot (e.g., backend engineer thinking about ML, marketer thinking about product). Comes to Inflearn evenings and weekends; values roadmap-style course bundles; reads instructor credentials carefully.
+The official company page identifies learners seeking career development and experts who share knowledge. The product’s current GNB article additionally names courses, challenges, mentoring, clips, and community as core services. These are stakeholder/service facts, not synthetic personas; no age, task frequency, conversion behavior, or preference is inferred.
 
-- **The Senior Upskilling.** 35–45, mid-to-senior IC or first-line manager, topping up a specific gap (Kubernetes, React Server Components, FP&A). Buys 1–2 courses per quarter; impatient with marketing fluff; wants the table-of-contents on screen before deciding.
+## 14. Observed Interaction States
 
-- **The Student-to-Industry.** 21–26, university or bootcamp student, building the portfolio for first-job applications. Uses the free starter (`무료`) courses heavily; price-sensitive; the green free-tag is the most-clicked element on the home page for this persona.
-
-- **The Adjacent-Function Curious.** 28–40, designer learning a bit of code, PM learning analytics, engineer learning design. Browses outside their core category; sensitive to course difficulty signalling; relies on instructor rating and student count more than course title.
-
-## 14. States Catalog
-
-| Category | Treatment |
-|---|---|
-| **Empty — My Courses** | Center-aligned illustration; `아직 수강 중인 강의가 없어요`; secondary outlined CTA `강의 둘러보기` linking to `/courses`. |
-| **Empty — Wishlist** | `위시리스트가 비어 있어요. 마음에 드는 강의를 담아두세요.` + secondary CTA. |
-| **Empty — Search results** | `'<query>'에 대한 결과가 없어요.` + 3 chip suggestions from related categories. |
-| **Loading — page** | Mantine `Skeleton` placeholders for course tiles (6 tiles per row, 230×310). |
-| **Loading — submit** | Inline 16px spinner replaces CTA label; CTA remains green; pointer disabled. |
-| **Error — Network** | Inline banner `네트워크 연결을 확인해주세요. 다시 시도하시면 정상적으로 이용하실 수 있어요.` `다시 시도` outlined button. |
-| **Error — Validation** | 14px `#FA5252` text below field; field border `#FA5252`; field icon-side error icon. |
-| **Error — Payment** | Modal with specific cause line + `다른 결제 수단으로 시도하기` primary button. |
-| **Success — Enrolment** | Inline `수강신청이 완료되었어요.` `내 강의실로 가기` primary CTA. |
-| **Skeleton — Card** | `#F1F3F5` blocks for thumbnail (16:9) + 2 text lines; shimmer 1.5s linear. |
-| **Disabled — Form** | `#F1F3F5` bg, `#ADB5BD` text, `cursor: not-allowed`. Tooltip on hover explaining what is missing. |
+| State | Selector-backed observation | Boundary |
+|---|---|---|
+| Hover | GNB search submit changes to `#00A760`; GNB action has `rgba(241,243,245,0.65)` background. | Only the listed selectors are promoted. |
+| Selected | Product content tab has `#25262B` background, white 14px/700 text, and full pill radius. | Product-home tab only. |
+| Menu open | Collector expanded a product menu; a 14px Pretendard option at 8px radius and `10px 12px` padding was recorded. | No general menu token is inferred. |
+| Dialog open | Collector recorded a `rgba(0,0,0,0.6)` product backdrop. | No dialog-panel, validation, or checkout state is inferred. |
+| Disabled | Home selector records a neutral 32px button; catalog selector records a different 8px control. | Keep them selector-local; do not create a universal token. |
 
 ## 15. Motion & Easing
 
-| Token | Value | Use |
-|---|---|---|
-| `motion-fast` | 150ms | Hover bg fade, focus ring appear |
-| `motion-base` | 200ms | Card thumbnail scale, nav pill bg, button colour |
-| `motion-slow` | 300ms | Modal open, drawer slide |
-| `easing-default` | `ease` | All hover / focus transitions (Mantine default — `--mantine-transition-timing-function`) |
-| `easing-emphasized` | `cubic-bezier(0.4, 0, 0.2, 1)` | Modal / drawer enter — material-style emphasized easing |
-| `easing-decelerate` | `cubic-bezier(0, 0, 0.2, 1)` | Skeleton shimmer, page-content fade-in |
-
-**Motion rules**:
-- No carousel auto-advance on home rails (a deliberate departure from Korean commerce convention; Inflearn's audience is reading instructor names, not glancing at banners).
-- No parallax. No scroll-triggered hero animation on the marketing surfaces.
-- Card hover is the only ambient motion — every other animation requires explicit user input.
-- Respect `prefers-reduced-motion: reduce` — fall back to instant transitions, keep colour fades only.
+No duration, easing curve, card-scale, skeleton animation, page transition, or reduced-motion rule was captured in the supplied product evidence. The first-party GNB article discusses a shift from reflow-based scroll motion to composite-based scroll motion for the shared header, but it does not supply reusable animation tokens. No motion token is therefore promoted.