zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/classting/DESIGN.md

@@ -1,292 +0,0 @@
----
-id: classting
-name: "Classting"
-country: KR
-category: education
-homepage: "https://www.classting.com"
-primary_color: "#00C896"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=classting.com&sz=256"
-verified: "2026-06-03"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-08"
-  colors:
-    primary: "#00C896"
-    primary-hover: "#17A27E"
-    brand: "#00C896"
-    canvas: "#FAFAFB"
-    foreground: "#424242"
-    muted: "#757575"
-    on-primary: "#FFFFFF"
-    surface: "#FFFFFF"
-    surface-mint: "#EDF9F6"
-    surface-lavender: "#FAF5FF"
-    green-050: "#EFFFFA"
-    accent-purple: "#9F7AEA"
-    accent-orange: "#ED8936"
-    accent-blue: "#4299E1"
-    outline: "#ED872D"
-    footer: "#000000"
-  typography:
-    family: { sans: "Noto Sans KR", mono: "Noto Sans KR" }
-    body:        { size: 16, weight: 400, lineHeight: 1.5, use: "Body copy" }
-    label:       { size: 14, weight: 500, lineHeight: 1.0, use: "Sub-button / label" }
-    display-md:  { size: 28, weight: 700, use: "Section headings (.display-md)" }
-    display-lg:  { size: 42, weight: 700, lineHeight: 1.29, use: "Major feature headings (.display-lg)" }
-    display-x-lg: { size: 56, weight: 700, lineHeight: 1.21, use: "Hero headings (.display-x-lg)" }
-  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 6, md: 8, lg: 16, pill: 24, full: 9999 }
-  shadow:
-    subtle: "rgba(0,0,0,0.05) 0px 0px 12px"
-    raised: "rgba(0,0,0,0.08) 0px 2px 12px"
-    accent: "rgba(0,200,150,0.08) 0px 5px 25px"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#00C896", fg: "#FFFFFF", radius: 8, padding: "15px 16px", font: "14px/500", use: "primary CTA" }
-    button-black: { type: button, bg: "#424242", fg: "#FFFFFF", radius: 8, use: "alt CTA" }
-    button-outline: { type: button, fg: "#ED872D", radius: 8, use: "transparent, 1px #ED872D border" }
-    card: { type: card, bg: "#FFFFFF", radius: 16, padding: "24px 20px", use: "subtle 12px shadow" }
-    section-banner: { type: card, bg: "#00C896", radius: 24, padding: "64px 106px", use: "Consult banner" }
-    tag-mint: { type: badge, bg: "#EDF9F6", radius: 6, padding: "8px", font: "14px/500", use: "mint tag" }
----
-
-# Classting
-
-AI-powered K–12 education platform from Korea that connects teachers, students, and parents through personalized learning powered by adaptive diagnostics.
-
-## 1. Visual Theme & Atmosphere
-
-Classting's visual language is built on the clarity of purpose you'd expect from a product used in 99 % of Korean K–12 schools. The dominant feeling is optimistic and clinical at once: a vivid mint-green primary cuts through generous white space, signalling growth and trust, while soft gradient washes (mint → lavender) on section backgrounds give the interface a gentle warmth that never feels cold or corporate. Rounded cards at 16 px radius and pillowed CTA banners at 24 px keep the tone approachable for both teachers and students. The typographic scale is disciplined — Noto Sans KR anchors the Korean-first experience, with a bold 700-weight display stack that speaks with confidence and an unhurried 400-weight body that keeps comprehension low-effort. Depth is handled with light diffuse shadows (0 2px 12px rgba(0,0,0,0.08)) rather than heavy elevation, projecting an honest, de-cluttered utility that places data visibility above decoration.
-
-## 2. Color Palette & Roles
-
-- **CT Green 500:** `#00C896` — primary brand, CTA buttons, active nav, key data highlights
-- **CT Green 050:** `rgb(239, 255, 251)` (`#EFFFFA`) — card surface, tag background, mint wash sections
-- **CT Green 700:** `rgb(23, 162, 126)` (`#17A27E`) — hover state on green elements, body accent
-- **Purple 500:** `#9F7AEA` — secondary accent; AI / learning-path segments, gradient-self
-- **Orange 500:** `#ED8936` — tertiary accent; business / content segments
-- **Blue 500:** `#4299E1` — university segment, data gradient endpoint
-- **Dark Text:** `#424242` — primary body text, headings
-- **Gray 600:** `#757575` — secondary / supporting body text
-- **Surface White:** `#FAFAFB` — neutral page background, card base
-- **Surface Mint:** `#EDF9F6` — tag background, feature section washes
-- **Surface Lavender:** `#FAF5FF` — AI segment section wash
-- **Black:** `#000000` — footer, dark-mode CTA panels
-
-## 3. Typography Rules
-
-- **Primary typeface:** Noto Sans KR (Korean-first), with Noto Sans HK for Traditional Chinese locales
-- **Body copy:** 16px / 400 / 24px line-height
-- **Sub-button / label:** 14px / 500 / 14px line-height
-- **Display SM:** 28px / 700 — section headings (`.display-md`)
-- **Display LG:** 42px / 700 / 54px line-height — major feature headings (`.display-lg`)
-- **Display XL:** 56px / 700 / 68px line-height — hero headings (`.display-x-lg`)
-- **Font-size scale tokens:** 12px (size-60) → 14px (size-80) → 16px (size-100) → 18px (size-120) → 20px (size-140) → 24px (size-150)
-- **Weight scale:** Regular 400, Medium 500, Bold 700
-- **No italic usage** in marketing UI; emphasis achieved via color (#00C896) or weight change
-- **Gradient text** used decoratively on hero headings: `linear-gradient(to right, #00C896, #9F7AEA)` (green-self), `linear-gradient(to right, #9F7AEA, #F56565)` (AI)
-
-## 4. Component Stylings
-
-### Primary Button (Fill)
-
-**Green CTA — Default**
-- Background: `#00C896`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 15px 16px
-- Font: 14px / 500
-
-**Black CTA — Alt**
-- Background: `#424242`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 15px 16px
-- Font: 14px / 500
-
-**Orange CTA — Business Segment**
-- Background: `#ED8936`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 15px 16px
-- Font: 14px / 500
-
-**Outline CTA — Secondary**
-- Background: transparent
-- Text: `#ED872D`
-- Border: 1px solid `#ED872C`
-- Radius: 8px
-- Padding: 20px 24px
-- Font: 14px / 500
-
-### Card
-
-**Blog / Feature Card**
-- Background: `#FFFFFF`
-- Border: none
-- Radius: 16px
-- Padding: 24px 20px
-- Shadow: 0 0 12px `rgba(0,0,0,0.05)`
-
-**Section Banner (Consult)**
-- Background: `#00C896`
-- Radius: 24px
-- Padding: 64px 106px
-
-### Tag / Badge
-
-**Service Tag — Mint**
-- Background: `#EDF9F6`
-- Radius: 6px
-- Padding: 8px
-
-**Service Tag — Orange**
-- Background: `#FFFAF0`
-- Radius: 6px
-- Padding: 8px
-
----
-**Verified:** 2026-06-03
-**Tier 1 sources:** https://www.classting.com (homepage HTML + Webflow CSS bundle); https://cdn.prod.website-files.com/642a57a169d01c4b3830b2b5/css/classting-aac463.webflow.shared.c0fddf191.css (Classting Webflow CSS, 126 KB); https://ctcorp.ai/ko/brand-guidelines (official CT Corp. brand guidelines page, 2025-02-26 CI)
-**Tier 2 sources:** getdesign.md/classting — NOT LISTED (no designs found). refero — no result found for Classting KR.
-**Conflicts unresolved:** none
-
-## 5. Layout Principles
-
-- Max content width: 1,248px on marketing pages; 1,280px on pricing
-- Horizontal padding: 16px mobile → 48px desktop
-- Primary grid: flexbox rows, `justify-content: space-between`, gap-based spacing
-- Section vertical rhythm: `margin-top: 120px` between major sections; `padding: 64px 106px` on CTA banners
-- Spacing token scale: 0.25rem → 0.5rem → 0.75rem → 1rem → 1.25rem → 1.5rem → 2rem (--space-01 through --space-07)
-- Layout tokens: 1.5rem → 2.25rem → 3rem → 3.5rem → 4rem → 4.5rem → 5.5rem → 6rem → 7.5rem (--space-layout-01 through -09)
-- Responsive breakpoint: 720px (flex-direction switches from column to row on most feature sections); 540px (page background shifts from gray-200 to white)
-- Feature grid: hero image + content side-by-side at ≥ 720px; stacked on mobile
-
-## 6. Depth & Elevation
-
-- **Level 0 — Flat:** tag backgrounds, section washes — no shadow
-- **Level 1 — Subtle:** `box-shadow: 0 0 12px rgba(0,0,0,0.05)` — blog / feature cards
-- **Level 2 — Raised:** `box-shadow: 0 2px 12px rgba(0,0,0,0.08)` — interactive panels
-- **Level 3 — Focus ring / Accent:** `box-shadow: 0 5px 25px rgba(0,200,150,0.08)` — highlighted CTA feature cards
-- **Backdrop / overlay:** `rgba(0,0,0,0.45)` mobile backdrop; `rgba(0,0,0,0.60)` popup overlay
-- No heavy 4px/8px blur shadows; depth is expressed through mild diffusion, not dramatic elevation
-
-## 7. Do's and Don'ts
-
-### Do
-- Use `#00C896` for the single primary CTA per page — one dominant action, clearly coloured
-- Apply `border-radius: 8px` on fill buttons and `16px` on cards for consistent roundedness
-- Use Noto Sans KR for all Korean-language UI copy; never substitute with system fonts
-- Apply gradient text (`#00C896` → `#9F7AEA`) on hero display headings only, not on body copy
-- Keep section backgrounds as soft gradient washes (`#EDF9F6` → `#FAF5FF`) to delineate feature segments without hard borders
-- Maintain `#424242` as the default text colour — not pure black — to reduce contrast harshness
-
-### Don't
-- Don't use more than two accent colours (e.g., green + purple) in the same section; pick the colour that matches the product segment
-- Don't apply the 24px pill radius to small inline buttons; reserve pill radius for large section banners
-- Don't use `font-weight: 400` for CTA labels — labels must be 500 or 700 to carry authority
-- Don't place white text on `#EDF9F6` or `#FAFAFB` — contrast insufficient; use `#424242` or `#17A27E`
-- Don't add heavy drop shadows to cards; diffuse shadows (opacity ≤ 0.08) maintain the clean, data-first aesthetic
-- Don't use the AI gradient (`#9F7AEA` → `#F56565`) outside AI/learning-path feature contexts
-
-## 8. Responsive Behavior
-
-- Hero headlines scale: 56px (desktop, `.display-x-lg`) → 36px (mobile, `--fontSizes-700: 2.25rem`)
-- Section display-lg: 42px desktop → 28px (`.display-md` equivalent) on mobile
-- Flex layout: `flex-direction: column` on mobile, switches to `flex-direction: row` at 720px breakpoint
-- Section banner (`consult`): `padding: 64px 106px` → padded tightly on mobile with reduced side padding
-- Max-width containers (1248px) fill full viewport on small screens with `padding-left/right: 16px`
-- Feature image widths: 50% desktop (`@media ≥ 720px`) → 100% mobile
-- CTA buttons: full-width (`width: 100%`) on mobile; auto/fixed-width on desktop
-- Navigation: collapses at `data-collapse="all"` (Webflow nav menu)
-
-## 9. Agent Prompt Guide
-
-When building Classting-style UI components:
-- Set `--primary: #00C896` and `--text-dark: #424242` as the first two variables
-- Primary CTA: `background: #00C896; border-radius: 8px; padding: 15px 16px; color: #fff; font: 500 14px/14px "Noto Sans KR", sans-serif`
-- Cards: `background: #fff; border-radius: 16px; box-shadow: 0 0 12px rgba(0,0,0,0.05); padding: 24px 20px`
-- Hero heading: `font-size: 56px; font-weight: 700; line-height: 68px; color: #424242; font-family: "Noto Sans KR", sans-serif`
-- Section wash: `background: linear-gradient(120deg, #EDF9F6, #FAF5FF)` — school segment default
-- Tag pill: `background: #EDF9F6; border-radius: 6px; padding: 8px; font-size: 14px; font-weight: 500`
-- Avoid hardcoded pixel values for layout widths; use `max-width: 1248px; margin: 0 auto; padding: 0 16px`
-- For KR locale always load Noto Sans KR 400+500+700; for TW locale use Noto Sans HK instead
-- The purple accent (`#9F7AEA`) should appear only in AI-feature or self-directed-learning contexts
-
-## 10. Voice & Tone
-
-**Three adjectives:** Precise, Encouraging, Grounded
-
-| Do | Don't |
-|----|-------|
-| Use data as proof: "91.5% accuracy" | Vague promises: "better learning" |
-| Empathise with teacher workload | Lecture teachers on pedagogy |
-| Speak to students as capable learners | Infantilise or over-simplify |
-| Short, declarative sentences | Long qualifier chains |
-| Active voice: "We accelerate…" | Passive hedging: "Learning may be…" |
-
-**Voice samples (illustrative):**
-- *Illustrative:* "진단부터 추천까지. 데이터가 길을 만듭니다." (From diagnosis to recommendation. Data makes the path.) — punchy, confident, under 12 words.
-- *Illustrative:* "선생님이 매 학생을 개별적으로 파악하기 어려운 게 현실입니다. 클래스팅 AI가 그 공백을 채웁니다." (It's reality that teachers can't track every student individually. Classting AI fills that gap.) — empathetic acknowledgment followed by direct solution statement.
-- *Illustrative:* "맞춤 교육, 지금 시작하세요." (Start personalized education now.) — imperative CTA, no decoration.
-
-## 11. Brand Narrative
-
-Classting was founded in 2012 by Cho Hyun-gu, who taught in elementary school for four years beginning in 2009. Confronted daily with the impossibility of personalizing instruction for 30+ students in a single classroom, he built a class communication tool that would evolve into Korea's most widely adopted educational platform — present in 99 % of Korean K–12 schools and 47 countries, with over 8.1 million users and 980,000 active classes.
-
-The company's strategic center of gravity shifted from communication to intelligence. Under its corporate entity CT (Cognitive Technologies), Classting now operates an AI diagnostic engine that tracks individual knowledge states using the proprietary CLST model combined with ELO rating systems, achieving a 91.5 % correct-answer prediction rate. The mission statement — "We Accelerate Human Learning with Technology" — reflects this shift from tool to infrastructure: Classting is not a classroom app but an accelerant layered beneath every instructional decision.
-
-The brand's visual and verbal identity encodes this duality. The product's primary green (`#00C896`) is optimistic and natural — growth, not algorithm — while the precision of the typography system and the measured use of data language in copy signal a platform that earns trust through evidence. Classting's voice does not celebrate technology for its own sake; it celebrates the moment when a student masters a concept they once struggled with.
-
-## 12. Principles
-
-1. **Diagnosis before prescription.** No recommendation is made without an accurate picture of the student's current knowledge state. *UI implication:* Show diagnostic results explicitly before any learning path is presented; never skip or collapse the diagnostic step in the onboarding flow.
-
-2. **Evidence over enthusiasm.** Every product claim is anchored by a measurable outcome. *UI implication:* Key statistics (accuracy percentages, school counts, improvement rates) must appear at typographic hierarchy level — 700 weight, green accent — not buried in body copy.
-
-3. **The teacher is the user, the student is the beneficiary.** Features are designed from the teacher's operational reality outward. *UI implication:* Primary navigation surfaces teacher actions (assign, monitor, report) above student actions; student-facing views are sub-paths, not primary routes.
-
-4. **Upward equalization.** Technology must reduce — not amplify — the gap between well-resourced and under-resourced learners. *UI implication:* The free tier remains feature-rich; premium upsell is positioned as scale, never as access to basic diagnostic fairness.
-
-5. **Continuous improvement as default.** The system learns with every interaction and surfaces new insights automatically. *UI implication:* Dashboards must display trend data (not just snapshots); empty states for trend charts should prompt continued use, never declare "no data."
-
-## 13. Personas
-
-*Illustrative Elementary School Teacher — "Min-jeong"*
-Min-jeong, 34, manages a class of 28 third-graders in Busan. She has 6 years of experience but limited time: lesson planning, parent communication, and admin consume her evenings. She adopted Classting for the class communication features and stayed for the AI diagnostic reports that tell her — before Monday's class — which three students are likely to fall behind this week. She reads dashboards on her phone between pickup duty and needs information density that fits a 5-inch screen.
-
-*Illustrative Middle School Student — "Junho"*
-Junho, 14, is preparing for high school entrance examinations and is intensely aware of his ranking in class. He uses the FastTrack recommendation engine because it shows him exactly which problem types to drill — not the whole textbook. He responds to progress visualizations (journey maps, streak counts) and checks his rank on the leaderboard every morning. Gamification is not a gimmick for him; it is motivation made tangible.
-
-*Illustrative School Administrator — "Principal Park"*
-Principal Park, 52, oversees a middle school of 800 students in Seoul. She approved the Classting AI school licence based on a single concern: whether the platform's diagnostic data could be aggregated into school-level reporting for the district office. She does not use the platform daily; she receives a monthly PDF report and attends a quarterly review. Her design touchpoint is that report — its clarity and credibility determine whether she renews.
-
-*Illustrative EdTech Procurement Officer — "Director Kim"*
-Director Kim, 45, evaluates EdTech solutions for a regional office of education overseeing 120 schools. He benchmarks platforms on three axes: accuracy of AI claims, data privacy compliance (PIPA/K-GDPR), and integration with the national digital textbook infrastructure. His interaction with Classting begins at the pricing and case study pages, not the product UI. He needs social proof (school counts, accuracy rates) within the first screen.
-
-## 14. States
-
-- **Empty state (class feed):** Illustration of an empty classroom with a single call-to-action "첫 게시물을 작성해보세요" (Write your first post); green primary button; no placeholder data
-- **Loading (diagnostic):** Skeleton shimmer — gray-300 (`hsl(0,0%,88%)`) animated `pulse` at 1.5s ease-in-out infinite; radius matches the actual card at 6px or 16px
-- **Error — network (data fetch):** Inline error message in red-600 (`hsl(0,76%,57%)`), retry CTA in green; never red buttons for destructive-only actions
-- **Error — input validation:** Border switches to red-600 on the input field; helper text appears below at 12px / 400 in red-600; border-color token: `--colors-border-color-input-active: hsl(165,100%,39%)` on focus (green), red on error
-- **Success (assignment submitted):** Toast notification with `#00C896` left-border accent; white background; auto-dismiss after 3 s
-- **Skeleton (dashboard cards):** Full card width at 16px radius, pulse shimmer in gray-300 (`hsl(0,0%,88%)`); paragraph lines shimmer at reduced height (12px bars with 8px gap)
-- **Disabled (button):** `background-color: hsl(0,0%,74%)` (gray-400); `color: #fff`; `cursor: not-allowed`; no hover effect
-- **Disabled (input):** `background-color: hsl(0,0%,96%)` (gray-100); `border-color: hsl(0,0%,74%)`; `cursor: not-allowed`
-
-## 15. Motion & Easing
-
-- **Micro-interactions (hover, toggle):** `transition: background-color 0.1s, color 0.1s` — very fast, immediate feedback
-- **Panel / overlay transitions:** `transition: all 0.3s` — moderate, deliberate
-- **Skeleton pulse animation:** `animation: pulse 1.5s ease-in-out infinite` — slow, non-distracting
-- **Easing default:** `ease` (Webflow `data-easing="ease"`) for nav and panel animations
-- **Nav animation duration:** 500ms (`data-duration="500"`) — slightly slow for educational context; ensures teacher users are not disoriented by fast transitions
-- **Motion principles:** Motion is never decorative. Every animation either confirms state change (0.1s micro), reveals structure (0.3s panel), or signals system work (1.5s skeleton). Avoid transform-heavy keyframe animations on data-heavy views (dashboards) — cognitive load is already high.
-- **Reduced-motion:** Skeleton pulse should respect `prefers-reduced-motion: reduce`; replace with static gray-300 fill

package/.opencode/oh-my-design/web/references/classum/DESIGN.md

@@ -1,279 +0,0 @@
----
-id: classum
-name: Classum
-display_name_kr: Classum (클라썸)
-country: KR
-category: education
-homepage: "https://www.classum.com"
-primary_color: "#ff4438"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=classum.com&sz=256"
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-08"
-  colors:
-    primary: "#ff4438"
-    brand: "#ff4438"
-    canvas: "#f6f6f9"
-    surface: "#ffffff"
-    subtle: "#f0f2f8"
-    hero-dark: "#06080d"
-    foreground: "#232334"
-    body: "#49495a"
-    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
-  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" }
----
-
-# 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.
-
-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
-
-## 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.
-
-## 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.
-
-### 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.
-
-### 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.
-
-### 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.
-
-## 4. Spacing, Radius, Shadow
-
-### 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)
-
-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.
-
-### 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.
-
-### 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.
-
-## 5. Component Patterns
-
-- **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.
-
-## 6. Visual Style
-
-- **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.
-
-## 7. Voice & Microcopy Posture
-
-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.
-
-**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.
-
-> **IP note**: this section paraphrases only. Verbatim Classum taglines are not reproduced in this DESIGN.md.
-
-## 8. Interaction & Motion
-
-- 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.
-
-## 9. Site Architecture (observed)
-
-```
-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)
-```
-
-Top-nav surfaces: AI 기반 LMS · 학습 커뮤니티 · AI 상담 챗봇 · 스킬 솔루션 · 리소스 · 로그인 · 도입 문의 (red CTA).
-
-
-## 16. Do's and Don'ts
-
-### 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
-
-### 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
-
----
-
-## 10. Brand Philosophy (paraphrased, not quoted)
-
-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).
-
-## 11. Design Principles (inferred from surface)
-
-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.
-
-## 12. Anti-patterns (what Classum's surface refuses)
-
-- 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.
-
-## 13. Personas (inferred for downstream OmD use)
-
-- **대학 운영팀 (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.
-
-## 14. Accessibility Posture (observed, not certified)
-
-- 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.
-
-## 15. Verification Footer
-
-**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).
-
-**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.
-
-**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.
-
-**Conflicts unresolved:** none — Tier 1 live data was internally consistent across CSS bundle and runtime samples.
-
-**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).

package/.opencode/oh-my-design/web/references/classum/assets/_reference/.live-inspect-proof.json

@@ -1,72 +0,0 @@
-{
-  "verified_at": "2026-05-14T11:00:00Z",
-  "url": "https://business.classum.com/",
-  "method": "CDP Runtime.evaluate via :9222, getComputedStyle on production DOM",
-  "css_bundle": "https://cdn.prod.website-files.com/67b08d840cb9f278763c8005/css/classum-web.webflow.shared.ee81640c2.css",
-  "raw_samples": [
-    {
-      "name": "hero_h1",
-      "selector": "h1",
-      "text_excerpt": "상담부터 학습까지, AI 중심의 에듀테크 솔루션",
-      "color": "rgb(255, 255, 255)",
-      "backgroundColor": "rgba(0, 0, 0, 0)",
-      "fontFamily": "Pretendard Variable, Pretendard, -apple-system, system-ui, ...",
-      "fontSize": "52px",
-      "fontWeight": "700",
-      "lineHeight": "72.8px",
-      "letterSpacing": "normal"
-    },
-    {
-      "name": "nav",
-      "selector": "nav, header",
-      "text_excerpt": "AI 기반 LMS / 학습 커뮤니티 / AI 상담 챗봇 / 도입 문의",
-      "color": "rgb(51, 51, 51)",
-      "fontFamily": "Pretendard Variable",
-      "fontSize": "14px",
-      "fontWeight": "400",
-      "lineHeight": "20px"
-    },
-    {
-      "name": "primary_cta",
-      "selector": "a[href*=contact], a.btn-common, button",
-      "text_excerpt": "도입 문의",
-      "color": "rgb(255, 255, 255)",
-      "backgroundColor": "rgb(255, 68, 56)",
-      "fontFamily": "Pretendard Variable",
-      "fontSize": "15px",
-      "fontWeight": "600",
-      "lineHeight": "22.5px",
-      "borderRadius": "8px",
-      "padding": "6px 16px",
-      "boxShadow": "none"
-    },
-    {
-      "name": "secondary_link",
-      "selector": "a",
-      "color": "rgb(51, 51, 51)",
-      "fontFamily": "Pretendard Variable",
-      "fontSize": "14px",
-      "fontWeight": "400"
-    },
-    {
-      "name": "body",
-      "selector": "body",
-      "color": "rgb(51, 51, 51)",
-      "backgroundColor": "rgb(246, 246, 249)",
-      "fontFamily": "Pretendard Variable",
-      "fontSize": "14px",
-      "fontWeight": "400",
-      "lineHeight": "20px"
-    },
-    {
-      "name": "section_card",
-      "selector": "section",
-      "text_excerpt": "흩어진 데이터를 모아 AI가 답하는 효율적인 운영 환경",
-      "color": "rgb(51, 51, 51)",
-      "backgroundColor": "rgba(0, 0, 0, 0)",
-      "fontFamily": "Pretendard Variable",
-      "fontSize": "14px"
-    }
-  ],
-  "sample_count": 6
-}