oh-my-design-cli 1.8.6 → 1.9.0

package/web/references/classum/DESIGN.md

@@ -9,271 +9,296 @@ primary_color: "#ff4438"
 logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=classum.com&sz=256"
-verified: "2026-05-15"
+verified: "2026-07-13"
 omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: public-marketing, url: "https://business.classum.com/", inspected: "2026-07-13" }
+    - { id: learning, kind: public-marketing, url: "https://business.classum.com/learning", inspected: "2026-07-13" }
+    - { id: university-lms, kind: public-marketing, url: "https://business.classum.com/university/lms", inspected: "2026-07-13" }
+  sources:
+    - { id: home-capture, kind: product-surface, url: "https://business.classum.com/", captured: "2026-07-13" }
+    - { id: learning-capture, kind: product-surface, url: "https://business.classum.com/learning", captured: "2026-07-13" }
+    - { id: university-lms-capture, kind: product-surface, url: "https://business.classum.com/university/lms", captured: "2026-07-13" }
+    - { id: company-context, kind: official-doc, url: "https://business.classum.com/", captured: "2026-07-13" }
+    - { id: lms-context, kind: official-doc, url: "https://business.classum.com/university/lms", captured: "2026-07-13" }
+    - { id: culture-context, kind: official-doc, url: "https://careers.classum.com/culture", 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.primary": &home { surface_id: home, source_id: home-capture, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.canvas": *home
+    "tokens.colors.surface": *home
+    "tokens.colors.ink": *home
+    "tokens.colors.body": *home
+    "tokens.colors.muted": &lms { surface_id: university-lms, source_id: university-lms-capture, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.on-primary": *home
+    "tokens.typography.family.ui": *home
+    "tokens.typography.marketing-body.size": *home
+    "tokens.typography.marketing-body.weight": *home
+    "tokens.typography.marketing-body.lineHeight": *home
+    "tokens.typography.marketing-body.use": *home
+    "tokens.typography.marketing-heading.size": *home
+    "tokens.typography.marketing-heading.weight": *home
+    "tokens.typography.marketing-heading.lineHeight": *home
+    "tokens.typography.marketing-heading.use": *home
+    "tokens.typography.action.size": *home
+    "tokens.typography.action.weight": *home
+    "tokens.typography.action.lineHeight": *home
+    "tokens.typography.action.use": *home
+    "tokens.spacing.xs": *home
+    "tokens.spacing.sm": *home
+    "tokens.spacing.md": *home
+    "tokens.spacing.card": *lms
+    "tokens.rounded.control": *home
+    "tokens.rounded.card-item": *lms
+    "tokens.rounded.card": *lms
+    "tokens.shadow.flat": *home
+    "tokens.components.nav-primary-action.type": *home
+    "tokens.components.nav-primary-action.bg": *home
+    "tokens.components.nav-primary-action.fg": *home
+    "tokens.components.nav-primary-action.radius": *home
+    "tokens.components.nav-primary-action.padding": *home
+    "tokens.components.nav-primary-action.font": *home
+    "tokens.components.nav-primary-action.states": *home
+    "tokens.components.nav-primary-action.use": *home
+    "tokens.components.nav-outline-light.type": *home
+    "tokens.components.nav-outline-light.fg": *home
+    "tokens.components.nav-outline-light.border": *home
+    "tokens.components.nav-outline-light.radius": *home
+    "tokens.components.nav-outline-light.padding": *home
+    "tokens.components.nav-outline-light.font": *home
+    "tokens.components.nav-outline-light.states": *home
+    "tokens.components.nav-outline-light.use": *home
+    "tokens.components.nav-outline-dark.type": *home
+    "tokens.components.nav-outline-dark.fg": *home
+    "tokens.components.nav-outline-dark.border": *home
+    "tokens.components.nav-outline-dark.radius": *home
+    "tokens.components.nav-outline-dark.padding": *home
+    "tokens.components.nav-outline-dark.font": *home
+    "tokens.components.nav-outline-dark.states": *home
+    "tokens.components.nav-outline-dark.use": *home
+    "tokens.components.large-primary-action.type": *home
+    "tokens.components.large-primary-action.bg": *home
+    "tokens.components.large-primary-action.fg": *home
+    "tokens.components.large-primary-action.radius": *home
+    "tokens.components.large-primary-action.padding": *home
+    "tokens.components.large-primary-action.font": *home
+    "tokens.components.large-primary-action.states": *home
+    "tokens.components.large-primary-action.use": *home
+    "tokens.components.university-grid-card.type": *lms
+    "tokens.components.university-grid-card.bg": *lms
+    "tokens.components.university-grid-card.fg": *lms
+    "tokens.components.university-grid-card.radius": *lms
+    "tokens.components.university-grid-card.padding": *lms
+    "tokens.components.university-grid-card.font": *lms
+    "tokens.components.university-grid-card.states": *lms
+    "tokens.components.university-grid-card.use": *lms
 tokens:
-  source: prose-derived
-  extracted: "2026-06-08"
+  source: reconciled
+  extracted: "2026-07-13"
+  note: "Values are selector-backed public marketing claims from three supplied captures. No authenticated Classum product UI, documentation chrome, interaction transition, or declared-only font is promoted."
   colors:
     primary: "#ff4438"
-    brand: "#ff4438"
     canvas: "#f6f6f9"
     surface: "#ffffff"
-    subtle: "#f0f2f8"
-    hero-dark: "#06080d"
-    foreground: "#232334"
-    body: "#49495a"
+    ink: "#232334"
+    body: "#333333"
     muted: "#666b80"
-    inert: "#758696"
-    hairline: "#b5b9c8"
     on-primary: "#ffffff"
-    accent-sky: "#0a84ff"
-    accent-cobalt: "#243ce7"
-    accent-violet: "#a567e4"
-    accent-teal: "#00c3d0"
-    success: "#34c759"
-    warning: "#ffb020"
-    danger: "#ff4438"
   typography:
-    family: { sans: "Pretendard Variable" }
-    hero-h1:   { size: 52, weight: 700, lineHeight: 1.4, use: "Hero H1 on inverted dark band" }
-    cta:       { size: 15, weight: 600, lineHeight: 1.5, use: "Primary button label" }
-    nav:       { size: 14, weight: 400, lineHeight: 1.43, use: "Nav link" }
-    body:      { size: 14, weight: 400, lineHeight: 1.43, use: "Body / default — Korean-density baseline" }
-    caption:   { size: 12, weight: 500, use: "Illustration / display captions" }
-  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 80 }
-  rounded: { xs: 4, sm: 8, md: 16, lg: 20, xl: 30, full: 9999 }
-  shadow:
-    none: "none"
-    float: "rgba(0,0,0,0.08) 0px 8px 24px"
-  components_harvested: true
+    family: { ui: "Pretendard Variable" }
+    marketing-body: { size: 14, weight: 400, lineHeight: 1.43, use: "Repeated public-marketing text/card sample" }
+    marketing-heading: { size: 52, weight: 700, lineHeight: 1.40, use: "Public-marketing H1/H2 sample" }
+    action: { size: 15, weight: 600, lineHeight: 1.50, use: "Repeated public-marketing navigation action" }
+  spacing: { xs: 6, sm: 8, md: 16, card: 30 }
+  rounded: { control: 8, card-item: 12, card: 30 }
+  shadow: { flat: "none" }
   components:
-    button-primary: { type: button, bg: "#ff4438", fg: "#ffffff", radius: 8, padding: "6px 16px", font: "15/600", use: "Primary CTA — signal red fill, no shadow" }
-    button-secondary: { type: button, bg: "#ffffff", fg: "#232334", use: "Outline or text-only link, paired right of primary" }
-    nav: { type: tab, fg: "#232334", font: "14/400", use: "Horizontal menu, sticky on scroll, red 도입 문의 CTA right-aligned" }
-    card: { type: card, bg: "#ffffff", radius: 20, use: "White surface on lavender canvas, no border/shadow — bg contrast defines boundary" }
-    pill: { type: badge, radius: 9999, use: "Chip for feature tags and 신규 status markers" }
-    footer: { type: card, bg: "#06080d", fg: "#ffffff", use: "Dark band, white type, social icons + app-store badges + legal links" }
+    nav-primary-action: { type: button, bg: "#ff4438", fg: "#ffffff", radius: "8px", padding: "6px 16px", font: "15px / 600 Pretendard Variable", states: "default only; no interaction state captured", use: "Public marketing navigation CTA; home::[data-omd-capture=4]" }
+    nav-outline-light: { type: button, fg: "#ff4438", border: "1px solid #ff4438", radius: "8px", padding: "6px 16px", font: "15px / 600 Pretendard Variable", states: "default only; no interaction state captured", use: "Public marketing light-background navigation outline; home::[data-omd-capture=3]" }
+    nav-outline-dark: { type: button, fg: "#ffffff", border: "1px solid #ffffff", radius: "8px", padding: "6px 16px", font: "15px / 600 Pretendard Variable", states: "default only; no interaction state captured", use: "Public marketing dark-background navigation outline; home::[data-omd-capture=8]" }
+    large-primary-action: { type: button, bg: "#ff4438", fg: "#ffffff", radius: "8px", padding: "12px 34px", font: "18px / 600 Pretendard Variable", states: "default only; no interaction state captured", use: "Public marketing large CTA on home and learning routes; home::[data-omd-capture=17]" }
+    university-grid-card: { type: card, bg: "#f6f6f9", fg: "#333333", radius: "30px", padding: "30px", font: "14px / 400 Pretendard Variable", states: "default only; no interaction state captured", use: "University-LMS public-marketing grid card; university-lms::div.grid-card" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Classum (클라썸)
 
 ## 1. Visual Theme & Atmosphere
 
-Classum is a Seoul-built EdTech platform for universities and corporate L&D, and its marketing surface treats the screen the way a good classroom treats a whiteboard — quiet canvas, structured columns, one bright signal where attention must land. The body background sits at a barely-tinted lavender-gray (`#F6F6F9`), a half-step off pure white that makes elevation read without shadows, and the dominant card radius is a generous 20px that softens the otherwise dense, multi-section Webflow page composition. Type is set entirely in Pretendard Variable, the open-source Korean optical-sized sans by orioncactus, served from jsDelivr and antialiased aggressively — a deliberate choice that signals "we trust the open Korean web stack" rather than commissioning custom display type.
-
-The brand's color discipline is unusually tight for an EdTech site: long stretches of neutral gray-violet surface punctuated by a single high-saturation red (`#FF4438`) that lives almost exclusively on primary CTAs ("도입 문의" / 도입 문의 = "request adoption inquiry"). Accent blues, violets and teals appear inside marketing illustrations and feature pills, but the page's interactive grammar is fundamentally two-color: muted lavender for everything, red when you should click. The result reads as B2B-confident without being corporate-cold — closer to a research lab's recruiting page than a typical SaaS hero.
+Classum’s current public business site presents an AI-focused education offer for universities and corporate HR: the official home frames it as LMS, consultation, and skill solutions, while the university route focuses on an AI LMS for instructors and students. The three supplied routes are public marketing surfaces, not a captured signed-in learning application. Their visual system is therefore recorded as marketing expression only.
 
-Elevation is almost entirely flat. The CTA observed live had `box-shadow: none`, cards lean on radius and background contrast instead, and the only depth signal is the lavender canvas pulling cards forward without a stated z-axis. For a product whose actual application is a discussion-heavy LMS (Q&A threads, instructor responses, AI chatbot suggestions), the marketing site's flatness is a thesis: comprehension comes from layout clarity, not from chrome.
-
-**Key Characteristics:**
-- Lavender-gray canvas (`#F6F6F9`) instead of pure white — softens dense B2B information density
-- Single saturated brand red (`#FF4438`) reserved strictly for primary CTAs
-- Pretendard Variable as the only typeface — open-source Korean sans, jsDelivr-delivered
-- 20px dominant card radius, 8px CTA radius, 999px pills for status chips
-- Flat shadow language — `box-shadow: none` on primary CTA, depth through bg contrast
-- 14px / 1.43 lh body baseline — tight Korean reading rhythm, not Western 16px default
-- Webflow-built site, Channel Talk live chat — typical Korean B2B SaaS stack
+The captured pages pair a lavender-white field (`#F6F6F9` and `#FFFFFF`) with a signal-red action color (`#FF4438`). Large rounded content blocks and compact 8px actions keep the information-heavy pages calm without making their public CTAs look generic. The system is flat in the retained samples: `box-shadow: none` on the documented actions and ordinary grid cards.
 
 ## 2. Color Palette & Roles
 
-### Primary
-- **Signal Red** (`#FF4438`): Primary CTA fill only — "도입 문의", "소개서 받기" booking CTAs. Never used on body type, never on decorative blocks.
-- **Ink** (`#232334`): Primary heading color on light surfaces — a dark navy-charcoal, not true black. Warmer than `#000`.
-- **White** (`#FFFFFF`): Card and modal surface — used wherever content needs to lift off the lavender canvas.
-
-### Surface & Background
-- **Canvas** (`#F6F6F9`): Page background — the lavender-gray that defines the whole site mood.
-- **Surface** (`#FFFFFF`): Card / modal / sticky-nav surface.
-- **Subtle** (`#F0F2F8`): Tertiary fills, alternating rows, soft section dividers.
-- **Hero Dark** (`#06080D`–`#121215`): Inverted hero/footer band — the rare dark surface where white type takes over.
-
-### Neutrals & Text
-- **Ink** (`#232334`): Primary headings and body emphasis.
-- **Slate** (`#49495A`): Secondary body text — descriptions, captions.
-- **Mute** (`#666B80`): Tertiary labels, metadata, breadcrumb.
-- **Subtle** (`#758696`): Disabled / inert text.
-- **Border** (`#B5B9C8`): Card borders, divider rules.
-
-### Accent (illustration-only)
-- **Sky** (`#0A84FF`) / **Cobalt** (`#243CE7`): Hyperlinks and product-mark accents.
-- **Violet** (`#A567E4`): AI-feature illustration accents.
-- **Teal** (`#00C3D0`): Skill/competency data visualization.
-- **Green** (`#009A5A` / `#34C759`): Success states, growth metrics in case-study charts.
-
-### Semantic
-- Classum does not expose a formal semantic palette publicly; on the marketing surface, semantic color appears almost exclusively inside illustration assets. Inferred semantic mapping below for downstream use.
-- **Success**: `#34C759` (matches iOS system green — likely intentional given Pretendard's Apple-adjacent stack).
-- **Warning**: `#FFB020` (illustration-derived).
-- **Danger**: `#FF4438` (same as brand red — implies CTAs and destructive actions share visual weight; downstream consumers should split this).
-
-### Gradient System
-- The site avoids type gradients entirely. Visual gradients appear only in hero illustration backgrounds (blue-violet washes behind product mockups). Functional UI is fully flat.
+- **Signal red** (`#FF4438`) — observed public-marketing action background and outline/action text. It is not asserted as an in-app destructive or status color.
+- **Lavender canvas** (`#F6F6F9`) — observed public-marketing page/card background.
+- **White surface** (`#FFFFFF`) — observed action and surface background.
+- **Dark ink** (`#232334`) — observed dark action/background and text role on public marketing.
+- **Body charcoal** (`#333333`) — repeated public-marketing text and card foreground.
+- **Muted gray-violet** (`#666B80`) — university-LMS public-marketing supporting text sample.
+
+No semantic success, warning, error, product-app, or documentation palette is claimed from these captures.
 
 ## 3. Typography Rules
 
-### Font Family
-- **All roles**: `Pretendard Variable` — single typeface across hero, body, nav, CTA, footer. The variable axis covers weights 100–900; observed weights in production are 300 / 400 / 500 / 600 / 700.
-- **Source**: `https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css` (SIL OFL 1.1).
-- **Fallback stack**: `-apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif` — Korean-first system fallbacks before Western ones.
-- **Rendering**: `-webkit-font-smoothing: antialiased`, `text-rendering: optimizeLegibility` — applied globally.
+### Verified public-marketing family
 
-### Type Scale (observed live)
-- **Hero H1**: 52px / 72.8px line-height / weight 700 — used on the inverted dark hero band.
-- **CTA**: 15px / 22.5px / weight 600 — primary button label.
-- **Nav link**: 14px / 20px / weight 400.
-- **Body / default**: 14px / 20px / weight 400 — note this is *one step below* the Western 16px default, a deliberate Korean-density choice.
-- **Display caption** (illustration labels): observed 11–13px / weight 500–600.
+`Pretendard Variable` is the sole promoted UI family. It appears as the visible computed family across button, card, heading, and text roles (279 observed uses), is backed by a loaded `FontFace`, and has both jsDelivr and Classum-hosted WOFF2 sources in the supplied evidence. The upstream project documents the exact `"Pretendard Variable"` webfont family and distributes it under SIL Open Font License 1.1.
 
-### Weight Discipline
-Production CSS frequencies: 700 (55 occurrences) > 600 (32) > 400 (16) > bold-keyword (11) > 500 (11) > 300 (6). The system relies on **bold-vs-regular contrast** rather than mid-weight subtlety — when a Classum surface needs hierarchy, it jumps from 400 to 600/700, rarely passing through 500.
+- **Marketing heading** — `52px / 700 / 72.8px`; observed public H1/H2 sample.
+- **Marketing body** — `14px / 400 / 20px`; repeated public text/card sample.
+- **Navigation action** — `15px / 600 / 22.5px`; repeated public navigation action.
 
-### Korean Treatment
-Pretendard's optical sizing handles Korean syllables (한글) at the same metrics as Latin without manual `lang="ko"` overrides. Classum does not appear to use any letter-spacing adjustment for Korean (`letter-spacing: normal` on every observed sample) — trusting Pretendard's default kerning.
+`webflow-icons` is declared in the capture but has zero visible uses. It remains a declared-only icon asset, not a text family. No authenticated product or documentation font family was captured, so none is substituted or inferred.
 
-## 4. Spacing, Radius, Shadow
+## 4. Component Stylings
 
-### Radius (CSS bundle frequency)
-- `20px` (×18 — dominant card radius)
-- `var(--r-12)` (×12)
-- `999px` (×10 — pill chips)
-- `10px` (×9)
-- `30px` (×8 — large feature cards)
-- `100%` (×8 — circular avatars)
-- `8px` (×7 — CTA buttons)
-- `16px` (×7)
-- `4px` (×7 — input chips)
+### Public marketing navigation primary action
 
-The radius spectrum is wide but disciplined: CTAs at 8px, content cards at 20px, hero feature cards at 30px, pills at 999px. There is no 2px / 6px / 14px noise — Classum picks ratios cleanly.
+**Default**
+- Background: `#FF4438`
+- Text: `#FFFFFF`
+- Border: `0px solid #FFFFFF`
+- Radius: `8px`
+- Padding: `6px 16px`
+- Font: `15px / 600 Pretendard Variable`
+- Use: Home public-marketing navigation CTA; selector `home::[data-omd-capture="4"]`, six occurrences across the three captured routes.
 
-### Spacing
-- Container max-width and inner padding are Webflow-grid-driven; observed CTA padding `6px 16px`. The lavender canvas leaves wide unbranded margins between sections — vertical rhythm comes from 80–120px section padding.
+### Public marketing navigation outline on light
 
-### Shadow
-- The captured CTA had `box-shadow: none`. The CSS bundle does include `box-shadow` rules but they are reserved for floating elements (modals, dropdowns, the Channel Talk widget). Marketing-surface depth is canvas-vs-card, not z-axis.
+**Default**
+- Background: transparent
+- Text: `#FF4438`
+- Border: `1px solid #FF4438`
+- Radius: `8px`
+- Padding: `6px 16px`
+- Font: `15px / 600 Pretendard Variable`
+- Use: Home public-marketing light-background navigation action; selector `home::[data-omd-capture="3"]`, three occurrences across the captured routes.
 
-## 5. Component Patterns
+### Public marketing navigation outline on dark
 
-- **Primary CTA**: red fill (`#FF4438`), white label, weight 600, 8px radius, 6×16 padding, no shadow, no hover-lift observed (Webflow default opacity dim).
-- **Secondary CTA**: outline or text-only link, ink color, often paired right-of-primary.
-- **Nav**: 14px / 400 inline horizontal menu, login + "도입 문의" red CTA right-aligned, sticky on scroll.
-- **Cards**: white surface on lavender canvas, 20px radius, no border, no shadow — bg contrast alone defines the card boundary.
-- **Pills / chips**: 999px radius, used for feature tags and "신규" status markers inside hero illustrations.
-- **Forms**: not exposed on public surface (gated behind "도입 문의" form modal via Channel Talk).
-- **Footer**: dark band (`#06080D`–`#121215`), white type, social icons + app-store badges + legal links.
+**Default**
+- Background: transparent
+- Text: `#FFFFFF`
+- Border: `1px solid #FFFFFF`
+- Radius: `8px`
+- Padding: `6px 16px`
+- Font: `15px / 600 Pretendard Variable`
+- Use: Home public-marketing dark-background navigation action; selector `home::[data-omd-capture="8"]`, three occurrences across the captured routes.
 
-## 6. Visual Style
+### Public marketing large primary action
 
-- **Photography vs illustration**: heavily illustration-led. Product mockup screenshots (LMS dashboards, AI chat surfaces) are the primary content, framed inside browser-chrome mockups on gradient backdrops.
-- **Iconography**: line + filled hybrid, weight 1.5–2px strokes, matching Pretendard's geometric character.
-- **Charts / data**: case-study sections lean on horizontal bar / arc gauges with the accent palette (teal, green, violet).
-- **Mascot / character**: none observed.
+**Default**
+- Background: `#FF4438`
+- Text: `#FFFFFF`
+- Border: `0px solid #FFFFFF`
+- Radius: `8px`
+- Padding: `12px 34px`
+- Font: `18px / 600 Pretendard Variable`
+- Use: Home and learning public-marketing large CTA; selector `home::[data-omd-capture="17"]`, two occurrences across those routes.
 
-## 7. Voice & Microcopy Posture
+### University-LMS public-marketing grid card
 
-Classum's marketing voice (Korean) is **direct, B2B, outcome-oriented** — sentences are short declarative, present-tense, and verb-final per Korean syntax. Korean honorifics are formal `~합니다` style, not the casual `~해요` style seen in C2C Korean SaaS like Toss or Daangn. English voice (on the same site's translated sections) mirrors this: short claims, no exclamation marks, no marketing hyperbole. Calls to action are functional verbs (`문의`, `받기`, `보기`) — Classum does not pun or use playful imperatives.
+**Default**
+- Background: `#F6F6F9`
+- Text: `#333333`
+- Border: `0px solid #333333`
+- Radius: `30px`
+- Padding: `30px`
+- Font: `14px / 400 Pretendard Variable`
+- Use: University-LMS public-marketing grid card; selector `university-lms::div.grid-card`, two occurrences on that route.
 
-**Voice tendencies** (paraphrased, not quoted):
-- Lead with the operational benefit (efficiency, data consolidation), follow with the human outcome (autonomous growth, communication).
-- Use AI as a modifier, not as a noun headline ("AI 기반 LMS" vs "AI for education").
-- Audience-segmented copy: separate doors for universities and corporate HR, never a unified "for everyone" pitch.
+The supplied bundle records zero interaction transitions. Hover, focus, pressed, selected, disabled, dialog, menu, tab, toast, and form-error variants are deliberately absent rather than invented.
 
-> **IP note**: this section paraphrases only. Verbatim Classum taglines are not reproduced in this DESIGN.md.
+## 5. Layout Principles
 
-## 8. Interaction & Motion
+- The retained public routes use recurring 6px, 8px, 16px, and 30px spacing measurements; 30px is attached to the documented university-LMS cards, not promoted as a global application gutter.
+- The public marketing page moves between compact navigation controls and large rounded content blocks. No responsive breakpoint, signed-in application layout, or documentation layout was captured.
+- Use surface-local component geometry above; do not reuse a marketing CTA as an LMS workflow control without separate product evidence.
 
-- Webflow-default page transitions only — no custom motion library detected in the CSS bundle.
-- Scroll-triggered fades on section reveal (Webflow IX2).
-- No marquee, no parallax beyond Webflow defaults, no auto-rotating hero carousel.
-- Live chat (Channel Talk) is the one persistent interactive element bottom-right.
+## 6. Depth & Elevation
 
-## 9. Site Architecture (observed)
+The retained navigation actions and standard university-LMS grid card report `box-shadow: none`. One decorative university grid-card variant has a multicolor shadow in the raw evidence, but it is a separate `gradient-11` marketing decoration and is not generalized into the canonical elevation token. Treat the verified public marketing system as flat.
 
-```
-business.classum.com/
-├── Hero (dark band, AI 에듀테크 솔루션 positioning)
-├── Product pillars (4): AI LMS / Learning Community / Classum Connect / Skill Solution
-├── Audience split: 대학 vs 기업 HRD
-├── Case studies
-├── Resources (브로셔, 블로그, 채용)
-└── Footer (dark, legal + social + app badges)
-```
+## 7. Do's and Don'ts
 
-Top-nav surfaces: AI 기반 LMS · 학습 커뮤니티 · AI 상담 챗봇 · 스킬 솔루션 · 리소스 · 로그인 · 도입 문의 (red CTA).
+### Do
+- Use `#FF4438` only where the captured public-marketing surface shows an action or outline action.
+- Keep verified public marketing type in `Pretendard Variable` and preserve the observed 14px body and 15px compact-action scales.
+- Use 8px for documented actions and 30px only for the documented university-LMS public grid-card treatment.
+- Keep marketing cards flat unless a separately evidenced decorative variant is intentionally being reproduced.
 
+### Don't
+- Do not turn the public marketing red into an unverified product-state or destructive-action palette.
+- Do not substitute system fonts for the loaded `Pretendard Variable` family.
+- Do not fabricate app controls, documentation chrome, form states, or interaction states from the public landing pages.
+- Do not treat the decorative multicolor-shadow card as a default card elevation.
 
-## 16. Do's and Don'ts
+## 8. Responsive Behavior
 
-### Do
-- Reserve the saturated brand red `#FF4438` strictly for primary CTA fills like "도입 문의", and let everything else stay in the lavender-gray neutral range
-- Set the page background to the barely-tinted lavender-gray canvas `#F6F6F9` rather than pure white, so white cards (`#FFFFFF`) read as elevated through background contrast alone
-- Typeset every role — hero, body, nav, CTA, footer — in Pretendard Variable, using only the production weights 300/400/500/600/700 served from the jsDelivr CDN
-- Build hierarchy by jumping from weight 400 to 600/700 (bold-vs-regular contrast) instead of leaning on mid-weight 500 transitions
-- Apply the disciplined radius ladder — 8px on CTA buttons, 20px on content cards, 30px on large feature cards, 999px on pill chips — with no in-between 2px/6px/14px noise
-- Use Ink `#232334` (a warm navy-charcoal, not true black) for primary headings, with Slate `#49495A` for secondary body text and Mute `#666B80` for tertiary labels
+The supplied evidence is desktop `1440×900` only. It establishes no mobile breakpoint, mobile navigation state, or responsive component transformation. Preserve this uncertainty rather than extrapolating desktop marketing geometry into mobile or authenticated LMS behavior.
 
-### Don't
-- Spread `#FF4438` onto body type, decorative blocks, or a second button color — there is one button color for one job
-- Stack box-shadows for elevation on marketing surfaces; the primary CTA ships `box-shadow: none` and depth comes from canvas-vs-card contrast, reserving shadows only for floating UI like modals, dropdowns, and the chat widget
-- Pad the layout to a Western 16px body baseline — keep the deliberate Korean-density 14px / 1.43 line-height reading rhythm
-- Introduce serif accents, all-caps display type, decorative scripts, glassmorphism, or emoji-led headlines, all of which Classum's B2B-serious surface refuses
-- Write a generic "everyone benefits" pitch — every section should name its audience (대학 vs 기업 HRD) before splitting by feature
-- Add type gradients or auto-rotating hero carousels; gradients live only in hero illustration backdrops and functional UI stays fully flat
+## 9. Agent Prompt Guide
 
----
+For a Classum public-marketing surface, use the verified lavender canvas, white surfaces, `Pretendard Variable`, and red action treatment only in the source domain where each was observed. Prefer a flat composition with compact 8px navigation actions and route-local 30px university feature cards. If a task concerns an authenticated learner, instructor, administrator, documentation, form validation, or interactive state, request or collect that source-domain evidence before choosing components or tokens.
 
-## 10. Brand Philosophy (paraphrased, not quoted)
+## 10. Voice & Tone
 
-Classum's product thesis treats communication as the unit of learning — questions, answers, threaded discussion, and instructor presence are the primary surfaces, while content delivery is secondary. The marketing surface reflects this by privileging audience-segmented narrative (universities and HR-led enterprises each get their own doorway) over generic feature lists. AI is positioned as a labor-multiplier for educators and L&D managers, not as a replacement narrator — every AI feature on the site is framed alongside a human role it supports (TA, HR manager, instructor).
+The current public copy is direct, formal Korean B2B/education copy: it names the audience (university, instructor, student, or HR) and pairs AI capability with an operational or learning outcome. Preserve that observed posture rather than inventing a casual consumer voice.
 
-## 11. Design Principles (inferred from surface)
+| Context | Observed guidance |
+|---|---|
+| Public headline | Lead with the educational or operational result, then name the audience. |
+| CTA | Use short functional actions such as requesting material or making an inquiry. |
+| Product explanation | Describe the specific learning or administrative task before the AI capability. |
 
-1. **One signal color, one type family.** Red lives on CTAs, Pretendard does every text role. Restraint is the brand.
-2. **Korean-density typography.** 14px body, 1.43 lh — accept that Korean readers parse syllables faster and don't pad like Western sites.
-3. **Flat by default, depth on demand.** Marketing pages are shadow-free; reserve elevation for floating UI (modals, chat).
-4. **Audience-first IA.** Split surfaces by buyer (university vs HR) before splitting by feature.
-5. **Open-source over proprietary.** Pretendard, Webflow, Channel Talk — Classum optimizes for time-to-iterate, not for owning every layer.
+## 11. Brand Narrative
 
-## 12. Anti-patterns (what Classum's surface refuses)
+Classum’s official historical material says the company was founded in 2018 by Chaerin Lee and Youjin Choi to address challenges they experienced as learners. Its current public home describes an AI-centered set of LMS, consultation, and skill solutions for university and corporate-HR audiences; the university LMS page concentrates on reducing preparation and evaluation work so instructors can focus on students. The narrative here is confined to those first-party statements and does not claim unobserved product-design intent.
 
-- No multi-color CTA palette — there is one button color, one job.
-- No serif accents, no all-caps display type, no decorative scripts.
-- No glassmorphism, no skeuomorphic shadow stacks.
-- No emoji-led marketing headlines (rare for a 2026 Korean SaaS — a deliberate signal of B2B seriousness).
-- No "everyone benefits" generic pitches — every section names its audience.
+## 12. Principles
 
-## 13. Personas (inferred for downstream OmD use)
+1. **Name the education context.** Current public pages separate university and corporate-HR offers. *UI implication:* keep public navigation and feature groups audience-specific.
+2. **Connect AI to a concrete task.** The university LMS page describes preparation, quizzes, grading, feedback, and learner support. *UI implication:* pair an AI claim with the supported learning task.
+3. **Keep public calls to action legible.** The repeated public navigation action is red on white with an 8px radius. *UI implication:* retain the verified action hierarchy on comparable public marketing routes only.
 
-- **대학 운영팀 (University Operations Lead)**: needs LMS + Q&A unification across departments. Cares about TA workload reduction, instructor adoption, FERPA-adjacent Korean privacy posture.
-- **기업 HRD 매니저 (Corporate L&D Manager)**: needs measurable skill assessment + scalable internal community. Cares about completion rates, skill-gap analytics, integration with HRIS.
-- **AI 도입 검토자 (AI Procurement Reviewer)**: needs vendor with clear data-handling story, evaluates Classum Connect against in-house GPT pilots.
+## 13. Personas
 
-## 14. Accessibility Posture (observed, not certified)
+The following are source-bound audience roles, not synthetic user research.
 
-- Pretendard Variable rendered at 14px with `-webkit-font-smoothing: antialiased` — legible at small sizes, but 14px Korean body sits just at WCAG floor; downstream consumers should consider 15–16px base for broader audiences.
-- Primary CTA `#FF4438` on white = ~4.3:1 contrast (AA for large text, borderline for 14px). White CTA label on `#FF4438` background = ~4.6:1 — passes AA for body, narrowly.
-- No `prefers-reduced-motion` overrides detected.
-- Channel Talk widget injects its own focus order; keyboard-only navigation on the marketing site is otherwise clean.
+- **University instructor:** explicitly addressed on the public LMS page in the context of lesson preparation, assessment, feedback, and student-focused teaching.
+- **University student:** explicitly addressed on the same page as a participant in AI-supported, self-directed learning.
+- **Corporate HR audience:** explicitly named on the official home as the audience for Classum’s corporate/skill-solution offer.
 
-## 15. Verification Footer
+No behavioral, demographic, or satisfaction claims are inferred beyond those public audience descriptions.
 
-**Verified:** 2026-05-14
-**Tier 1 — Live inspect (succeeded):**
-- CDP `getComputedStyle` × 6 raw samples (hero h1, nav, primary CTA, secondary link, body, section card) on `https://business.classum.com/` — captured in `assets/_reference/.live-inspect-proof.json`.
-- Production CSS bundle frequency analysis on `https://cdn.prod.website-files.com/67b08d840cb9f278763c8005/css/classum-web.webflow.shared.ee81640c2.css` (13,904 lines).
+## 14. States
 
-**Tier 1 — Official DS lookup (negative result, documented):**
-- `classum.com/brand` — page title only, no DS/brand guideline content surfaced.
-- No public Figma library, no `design.classum.com`, no GitHub org with token repo found.
-- Classum operates as a closed B2B SaaS without published brand guidelines as of 2026-05-14.
+| State | Evidence boundary |
+|---|---|
+| Empty | Not captured on the three public marketing routes. |
+| Loading | Not captured. |
+| Inline error | Not captured. |
+| Form error | Not captured. |
+| Success | Not captured. |
+| Disabled | Not captured. |
+| Skeleton | Not captured. |
+| Hover | Not captured; interaction count is zero. |
+| Focus | Not captured; interaction count is zero. |
+| Pressed | Not captured; interaction count is zero. |
 
-**Tier 2 — Third-party indexes (both empty):**
-- `getdesign.md/classum` → "No designs found for 'classum'." (consistent with KR-10 systemic finding that English directories under-index Korean SaaS).
-- `styles.refero.design/?q=classum` → no entry returned.
+## 15. Motion & Easing
 
-**Conflicts unresolved:** none — Tier 1 live data was internally consistent across CSS bundle and runtime samples.
+No motion timing, easing token, or interaction transition is promoted. The supplied capture reports zero interaction kinds and zero interaction events. A future source-specific inspection is required before defining public marketing, authenticated product, or documentation motion behavior.
 
-**IP guardrails applied:**
-- Brand assets (logo, screenshots) referenced by URL only, not redistributed.
-- No verbatim taglines reproduced — §7 voice analysis is paraphrased.
-- Voice mimicry kept abstract (tone descriptors, not phrase templates).
+---
+**Verified:** 2026-07-13
+**Tier 1 sources:** https://business.classum.com/ · https://business.classum.com/learning · https://business.classum.com/university/lms · https://careers.classum.com/culture · https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/docs/en/README.md · https://github.com/orioncactus/pretendard/blob/main/LICENSE
+**Tier 2 sources:** https://getdesign.md/classum (retrieval attempted; no importable record returned) · https://styles.refero.design/?q=classum (retrieval attempted; no importable record returned)
+**Conflicts unresolved:** none