oh-my-design-cli 1.5.0 → 1.5.1

package/web/references/class101/DESIGN.md

@@ -0,0 +1,433 @@
+---
+id: class101
+name: Class101
+country: KR
+category: education
+homepage: "https://class101.net"
+primary_color: "#FF5D00"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=class101.net&sz=128"
+verified: "2026-05-19"
+omd: "0.1"
+---
+
+# Design System Inspiration of Class101 (클래스101)
+
+## 1. Visual Theme & Atmosphere
+
+Class101 is Korea's leading online-class subscription platform — "세상의 모든 클래스를 하나의 구독으로" (every class in the world, in one subscription). It built its name on creator-led hobby and skill classes (drawing, baking, photography, side-business) and now runs a Netflix-style subscription (CLASS101+) over that catalog. The interface is a bright, warm, motivational learning storefront: a clean white canvas (`#FFFFFF`) wall-to-wall with photographic class thumbnails, organized into editorial rows, with a single energetic orange doing all the brand work.
+
+That orange — observed live as `#FF5D00`, a vivid pure orange leaning red — is the emotional core. It's the color of enthusiasm, of "start now," of the spark of a new hobby. It marks brand accents, highlights, and key promotional moments. Notably, Class101's *primary action button* is not orange but a confident near-black (`#202020`) with a generous `12px` radius — the orange is reserved as the brand spark while black carries the workhorse "시작하기" CTA. This pairing (warm-orange brand identity + grounded black action) gives the platform an energetic-yet-trustworthy feel: motivating like a coach, dependable like a tool.
+
+Typography is Pretendard Variable (`"Pretendard Variable", "Pretendard JP Variable", Pretendard, system-ui, ...`), the modern Korean product sans, rendered in near-black on white with a friendly gray scale. Geometry is soft and rounded — `12px` on buttons, `8px` on surfaces — and the layout is image-forward, letting class thumbnails and creator faces carry the warmth. The atmosphere is "your motivated Sunday morning" — bright, hopeful, and gently pushing you to make something.
+
+**Key Characteristics:**
+- Energetic pure-orange brand spark (`#FF5D00`) — accents, highlights, promotions
+- Near-black primary CTA (`#202020`) with `12px` radius — grounded action vs. orange brand
+- Clean white canvas (`#FFFFFF`) — image-forward class storefront
+- Pretendard Variable type stack in near-black → gray on white
+- Soft rounded geometry — `12px` buttons, `8px` surfaces
+- Editorial class-thumbnail rows; creator faces and project photos carry warmth
+- Motivational, coach-like tone — "make something" energy
+
+## 2. Color Palette & Roles
+
+Colors below are extracted from live computed styles on class101.net/ko (2026-05-19). Class101 does not publish a public token layer; values are observed.
+
+### Brand
+- **Class101 Orange** (`#FF5D00`): The brand spark — logo accent, highlights, key promotional moments, emphasis. Observed `rgb(255, 93, 0)`. *(Brief-provided value was `#FF5C00`; live observed `#FF5D00` — within one unit, use the live value.)*
+- **Orange Tint** (`#FFF1E8`): Light orange wash for highlight backgrounds and benefit blocks.
+
+### Action (Neutral)
+- **Action Black** (`#202020`): Primary CTA background ("시작하기", "구독하기"). Observed `rgb(32, 32, 32)`, 12px radius, 50px tall. The grounded workhorse action.
+- **Action Black Hover** (`#000000`): Pressed/hover for the action button.
+
+### Surfaces
+- **Canvas White** (`#FFFFFF`): Page background, card surfaces. Observed body bg.
+- **Surface Gray** (`#F3F3F3`): Section bands, input fills, grouping surfaces. Observed `rgb(243, 243, 243)`.
+- **Surface Raised** (`#FAFAFA`): Subtle raised panels.
+
+### Text
+- **Text Primary** (`#000000`): Headings, primary labels, class titles. Observed `rgb(0, 0, 0)`.
+- **Text Body** (`#333333`): Body copy, descriptions.
+- **Text Secondary** (`#767676`): Metadata, creator names, captions.
+- **Text Tertiary** (`#AAAAAA`): Placeholder, disabled labels, fine print.
+
+### Borders & Dividers
+- **Border Default** (`#E5E5E5`): Card borders, dividers, input outlines.
+- **Border Strong** (`#D1D1D1`): Active/emphasized borders.
+
+### Semantic
+- **Success** (`#22C55E`): Completion, enrolled, download done.
+- **Error / Sale** (`#FF3B30`): Errors and (distinct from brand orange) hot sale tags.
+- **Warning** (`#FAAD14`): Pending, attention.
+
+## 3. Typography Rules
+
+### Font Stack
+```
+"Pretendard Variable", "Pretendard JP Variable", "Pretendard JP", Pretendard, system-ui, -apple-system, Roboto, "Helvetica Neue", "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif
+```
+
+Pretendard Variable leads (with JP variants for cross-market parity), the modern Korean product sans. All rendering is near-black to gray on white.
+
+### Type Scale (observed home + listing surfaces)
+
+| Role | Size | Weight | Line Height | Use |
+|---|---|---|---|---|
+| Hero | 32–40px | 700 | 1.25 | Home hero, campaign headlines |
+| Section Heading | 22–24px | 700 | 1.35 | Category/row headers |
+| Card Title | 16px | 600 | 1.4 | Class card titles |
+| Body | 16px | 400 | 1.5 | Descriptions, marketing body (observed 16px/400) |
+| CTA / Label | 16px | 500–600 | 1.4 | Buttons (observed 16px), nav |
+| Creator / Meta | 14px | 400 | 1.4 | Creator names, class metadata |
+| Caption | 12px | 400 | 1.4 | Badges, fine print |
+
+### Conventions
+- **700 for headlines, 600 for card titles, 400–500 for body/labels** — friendly, readable, not heavy.
+- **Black headline, gray meta** — `#000000` → `#333333` → `#767676`.
+- **Larger base body (16px)** than typical dense apps — this is a reading/learning surface, legibility-first.
+- **Korean-primary** — Korean copy is first-class; English in titles only.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA (시작하기 / 구독하기)**
+- Background: `#202020`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 12px
+- Padding: 15px 14px
+- Font: 16px / 600 / Pretendard
+- Hover: background `#000000`
+- Use: Primary action — observed 50px tall, near-black grounded button
+
+**Brand CTA (promotional / highlight)**
+- Background: `#FF5D00`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 12px
+- Padding: 15px 14px
+- Font: 16px / 600 / Pretendard
+- Use: High-energy promotional moments, "지금 구독하고 시작" campaigns — the orange spark
+
+**Secondary / Outline**
+- Background: `#FFFFFF`
+- Text: `#202020`
+- Border: 1px solid `#E5E5E5`
+- Radius: 12px
+- Padding: 15px 14px
+- Font: 16px / 600 / Pretendard
+- Use: Secondary action paired with the black primary
+
+**Ghost / Text**
+- Background: transparent
+- Text: `#333333`
+- Border: none
+- Radius: 8px
+- Font: 16px / 500 / Pretendard
+- Use: Tertiary nav, "더보기"
+
+### Inputs
+
+**Search / Text Field**
+- Background: `#F3F3F3`
+- Text: `#000000`
+- Border: none (filled) — or 1px solid `#E5E5E5` on white
+- Radius: 8px
+- Padding: 12px 16px
+- Font: 16px / 400 / Pretendard
+- Placeholder: `#AAAAAA`
+- Focus: border `#202020`
+- Use: Class search, form fields
+
+### Cards
+
+**Class Card**
+- Background: `#FFFFFF`
+- Border: none (shadowless on white) / `0 2px 8px rgba(0,0,0,0.06)` on hover
+- Radius: 8px
+- Padding: 0 (image-led) + 12px text region
+- Use: The catalog atom — thumbnail top, title + creator + meta below
+
+**Highlight / Benefit Card**
+- Background: `#F3F3F3` (or `#FFF1E8` orange tint for benefit emphasis)
+- Border: none
+- Radius: 8px
+- Padding: 24px
+- Use: Subscription benefits, membership perks, value callouts
+
+### Badges / Chips
+
+**Category Chip**
+- Background: `#F3F3F3`
+- Text: `#333333`
+- Border: none
+- Radius: 999px
+- Padding: 6px 14px
+- Font: 13px / 500 / Pretendard
+- Use: Category filters (드로잉 / 베이킹 / 사진 / 부업)
+
+**Hot / New Badge**
+- Background: `#FF5D00`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 6px
+- Padding: 2px 8px
+- Font: 12px / 600 / Pretendard
+- Use: "NEW", "인기", high-energy emphasis on cards
+
+### Tabs / Nav
+
+**Top Nav Item**
+- Active text: `#000000` (weight 600)
+- Inactive text: `#767676`
+- Indicator: weight + color shift (minimal)
+- Font: 16px / 500–600 / Pretendard
+- Use: Category navigation
+
+### Toasts
+
+**Snackbar**
+- Background: `#202020`
+- Text: `#FFFFFF`
+- Radius: 8px
+- Padding: 12px 16px
+- Use: "찜한 클래스에 추가했어요" transient feedback
+
+### Dialogs
+
+**Modal / Bottom Sheet**
+- Background: `#FFFFFF`
+- Text: `#000000`
+- Radius: 16px (top corners on sheet)
+- Padding: 24px
+- Backdrop: `rgba(0,0,0,0.5)`
+- Use: Login, plan selection, class preview
+
+---
+
+**Verified:** 2026-05-19
+**Tier 1 sources:** class101.net/ko (live computed styles via Playwright — primary CTA `#202020` (rgb 32,32,32) / 12px radius / 16px / 50px tall / padding 15px 14px; brand orange `#FF5D00` (rgb 255,93,0) most-frequent saturated accent; surface gray `#F3F3F3` (rgb 243,243,243) / 8px; body bg white; font `"Pretendard Variable", "Pretendard JP Variable", Pretendard, system-ui, ...`).
+**Tier 2 sources:** getdesign.md/class101 — not checked; styles.refero.design — not checked.
+**Conflicts unresolved:** Brief-provided brand orange `#FF5C00` vs live observed `#FF5D00` — within 1 unit (rgb 92 vs 93 on green); live `#FF5D00` adopted as canonical. Black-vs-orange CTA: live primary action is black `#202020`; orange `#FF5D00` is the brand-spark accent — treated as distinct roles (action vs. brand), not a conflict.
+
+## 5. Layout Principles
+
+### Page Structure
+- Top nav (~64px) over a centered max-width content column (~1200px).
+- Home is a stack of horizontally-scrolling class rows by category and editorial theme.
+
+### Spacing
+- Base unit 8px; common values 4 / 8 / 12 / 16 / 24 / 32 / 40.
+- Card gutter ~16px; section vertical gap ~40px.
+- Page horizontal padding ~24px desktop, 16px mobile.
+
+### Density
+**Medium-density, image + reading forward.** Class cards pack 3–4 per row with prominent thumbnails. Class-detail pages are spacious and reading-optimized (curriculum, creator intro, reviews) — this is a learning surface, so legibility wins over density.
+
+### Border Radius Scale
+- Small (6px): badges
+- Standard (8px): cards, inputs, ghost buttons
+- Comfortable (12px): primary/brand buttons
+- Large (16px): modals, sheets
+- Pill (999px): category chips
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat | no shadow | Page bg, inline, cards at rest |
+| Hover | `0 2px 8px rgba(0,0,0,0.06)` | Card hover lift |
+| Floating | `0 4px 16px rgba(0,0,0,0.1)` | Dropdowns, sticky CTA |
+| Modal | `0 8px 24px rgba(0,0,0,0.16)` | Dialogs, bottom sheets |
+
+Shadows are light and neutral. Separation comes primarily from the white-card / `#F3F3F3`-band contrast rather than heavy elevation — the warmth comes from imagery and the orange spark, not from dramatic depth.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use orange `#FF5D00` as the brand spark — accents, highlights, hot/promo moments.
+- Use black `#202020` for the everyday primary action button.
+- Keep the canvas white; let class thumbnails and creator faces carry warmth.
+- Use a larger 16px base body — this is a reading/learning surface.
+- Use 12px button radius, 8px cards, 999px chips.
+
+### Don't
+- Don't make every primary button orange — orange is the spark, black is the action.
+- Don't add heavy shadows; use white/`#F3F3F3` contrast for separation.
+- Don't shrink body text below 16px on learning surfaces.
+- Don't pair orange with sale-red carelessly — keep error/sale red (`#FF3B30`) distinct from brand orange.
+- Don't crowd class-detail pages; curriculum and reviews need room.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | <768px | Single-column feed, ~1.5 cards peeking, bottom nav, full-width sticky CTA |
+| Tablet | 768–1024px | 2–3 cards per row, condensed nav |
+| Desktop | >1024px | 3–4 cards per row, full nav, ~1200px content |
+
+### Touch & Media
+- Carousels swipeable on touch; chevron-driven on desktop.
+- Sticky bottom "구독하기" CTA with safe-area inset on class detail.
+- Min 44px tap targets.
+
+### Image Behavior
+- Class thumbnails 16:9 or 4:3, `object-fit: cover`, lazy-loaded, 8px rounded top.
+- Creator/hero images full-bleed with overlay text where used.
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand spark: Orange `#FF5D00`; tint `#FFF1E8`
+- Primary action: Black `#202020` (hover `#000000`)
+- Canvas: White `#FFFFFF`; band `#F3F3F3`
+- Text: `#000000` → `#333333` → `#767676` → `#AAAAAA`
+- Border: `#E5E5E5`; focus `#202020`
+- Success `#22C55E`; error/sale `#FF3B30`; warning `#FAAD14`
+
+### Example Component Prompts
+- "Build a Class101 primary button: bg `#202020`, white text 16px weight 600, 12px radius, padding 15px 14px, 50px tall. Hover bg `#000000`."
+- "Create a Class101 brand/promo button: bg `#FF5D00`, white text 16px weight 600, 12px radius — for high-energy subscription campaigns only."
+- "Create a Class101 class card: white bg, no border, 8px radius. Thumbnail top (16:9, cover, rounded 8px top). Below: title (16px weight 600 `#000000`), creator name (14px `#767676`), category chip (bg `#F3F3F3`, `#333333`, 999px). Hover shadow `0 2px 8px rgba(0,0,0,0.06)`."
+- "Design a benefit card: bg `#FFF1E8` (orange tint), 8px radius, 24px padding, heading `#000000`, orange `#FF5D00` highlight number."
+
+### Iteration Guide
+1. Orange `#FF5D00` is the spark; black `#202020` is the action — don't swap their roles.
+2. White canvas; thumbnails and creators carry warmth.
+3. Pretendard Variable stack first.
+4. 16px base body — legibility on a learning surface.
+5. Radius: 12px buttons, 8px cards/inputs, 999px chips.
+6. Light shadows; white/`#F3F3F3` contrast separates.
+7. Keep sale-red distinct from brand orange.
+
+---
+
+## 10. Voice & Tone
+
+Class101 speaks like an encouraging mentor who believes you can actually make the thing — warm, motivating, second-person, action-oriented. The register is friendly-polite Korean with `~요`/`~어요` endings (`오늘부터 시작해볼까요?`, `찜한 클래스에 추가했어요`), the supportive-coach voice, never the cold institutional `~습니다` except in policy. The brand premise — *every class in one subscription* — and its hobby/skill roots mean the copy is about *starting*, *making*, *your* potential: it nudges without pressure and celebrates small progress. Korean is primary; English in class titles only.
+
+| Context | Tone |
+|---|---|
+| CTAs | Encouraging Korean verb form (`시작하기`, `구독하기`, `수강하기`, `둘러보기`). |
+| Discovery | Motivational, second person (`오늘부터 시작해볼까요?`, `당신을 위한 클래스`). |
+| Success toasts | Past-tense soft ending (`찜한 클래스에 추가했어요`). No emoji on chrome. |
+| Error messages | Blameless, specific, one action (`영상을 불러올 수 없어요. 잠시 후 다시 시도해 주세요`). Never `오류가 발생했습니다`. |
+| Empty states | Warm + one action (`아직 수강 중인 클래스가 없어요. 관심 클래스를 찾아볼까요?`). |
+| Progress / completion | Celebratory but calm (`첫 강의를 완료했어요!`). |
+| Legal / billing | Formal `~합니다` register — the exception. |
+
+**Forbidden phrases.** `오류가 발생했습니다` (generic error), `죄송하지만` on non-destructive failures, guilt/pressure framing on lapsed learners (`아직도 안 하셨나요?` style), superlatives (`최고의 강의`) on UI chrome, English-first strings on Korean surfaces, emoji on system toasts (emoji belongs to creator/community content).
+
+**Voice samples.**
+- `시작하기` — primary CTA, observed live on the `#202020` button. <!-- verified: class101.net/ko via Playwright 2026-05-19 -->
+- `세상의 모든 클래스를 하나의 구독으로` — brand tagline (page title `CLASS101 | 세상의 모든 클래스를 하나의 구독으로`). <!-- verified: page title via Playwright 2026-05-19 -->
+- `오늘부터 시작해볼까요?` — illustrative motivational discovery line. <!-- illustrative: not verified verbatim -->
+- `찜한 클래스에 추가했어요` — illustrative wishlist toast, soft `~요`. <!-- illustrative: not verified verbatim -->
+
+## 11. Brand Narrative
+
+Class101 (클래스101) is operated by **Class101, Inc.**, founded by **Ko Ji-yoon (고지윤)** in 2018 (the company is registered with a US entity, 101 Inc., reflecting its global ambitions — footer business address in Wilmington, Delaware). It launched as an **online-class marketplace** where creators taught hobby and skill classes — drawing, calligraphy, baking, photography, side-business — often bundled with a *materials kit* shipped to the learner so they could actually make the project, not just watch a video. That "kit + class" model was the founding insight: learning a hobby should end in something you made with your hands. ([class101.net](https://class101.net/) — platform; footer corporate info)
+
+Over time Class101 evolved into **CLASS101+**, a Netflix-style flat-rate subscription giving access to the whole catalog — "세상의 모든 클래스를 하나의 구독으로." The brand shifted from one-off class purchase to all-you-can-learn, and the design followed: an editorial, image-forward storefront optimized for *browsing and starting* rather than *buying a single SKU*. The energetic orange is the throughline — it's the color of the spark that makes someone press "시작하기" on a Sunday and actually begin.
+
+What Class101 refuses: the dry, lecture-hall seriousness of academic e-learning (this is hobby and self-improvement, made joyful), the cold credential-mill aesthetic of certification platforms, and high-pressure "limited time only!" urgency that would betray the supportive-mentor tone. Class101 is a motivational learning storefront — bright, warm, and pushing you, gently, to make something.
+
+## 12. Principles
+
+1. **The spark vs. the action.** Orange `#FF5D00` is the emotional spark (brand, promo, highlight); black `#202020` is the dependable action button. *UI implication:* Don't make every primary button orange. Reserve orange for the moments that should feel energizing.
+
+2. **Learning is starting.** Copy and discovery push toward beginning, not toward buying. *UI implication:* `시작하기`, `오늘부터 시작해볼까요?` — lead with the verb of doing.
+
+3. **Legibility is a learning feature.** Base body is 16px; reading surfaces breathe. *UI implication:* Never shrink class-detail body below 16px; curriculum and reviews get room.
+
+4. **Imagery carries the warmth.** Thumbnails and creator faces supply emotion; chrome stays near-monochrome. *UI implication:* White canvas, near-black text, gray meta. Don't compete with the creative work shown.
+
+5. **Encourage, never pressure.** The tone is a supportive mentor, not an urgency-marketing engine. *UI implication:* No guilt framing, no fake scarcity. Celebrate progress (`첫 강의를 완료했어요!`), invite return warmly.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by publicly described Class101 user segments (Korean hobby and skill learners), not individual people.*
+
+**서연 (Seo-yeon), 27, Seoul.** Office worker who wants a creative outlet. Subscribed to CLASS101+ for drawing and watercolor classes. Browses on weekends, picks by thumbnail and creator vibe. Loves that one subscription unlocks everything — low commitment to start any class.
+
+**도윤 (Do-yun), 33, Incheon.** Exploring a side business (online store, content creation). Uses Class101 for practical skill classes — Photoshop, marketing, photography. Values clear curriculum and real creator credibility over hype. Will finish a class if the structure is clear.
+
+**하은 (Ha-eun), 23, Busan.** University student learning a hobby (baking, calligraphy). Drawn in by the kit-and-class model — wants to actually make something. Motivated by progress tracking and the encouraging tone. Mobile-first, watches on commute.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no enrolled classes)** | Warm line `#767676` (`아직 수강 중인 클래스가 없어요`) + black CTA (`클래스 둘러보기`). |
+| **Empty (search no results)** | `#767676` caption (`검색 결과가 없어요. 다른 키워드로 찾아보세요`) + suggested categories. |
+| **Loading (feed first paint)** | Card-shaped skeletons at `#F3F3F3` matching layout, subtle shimmer. |
+| **Loading (video buffer)** | Centered ring spinner in `#FF5D00` over the dimmed player. |
+| **Error (playback)** | Centered line `#000000` (`영상을 불러올 수 없어요. 잠시 후 다시 시도해 주세요`) + retry (outline) button. |
+| **Error (inline field)** | Input border `#FF3B30`, caption below in red, one actionable sentence. |
+| **Success (wishlist add)** | Snackbar `#202020` + white text (`찜한 클래스에 추가했어요`), 3s dismiss. |
+| **Success (lesson complete)** | Inline celebration — green `#22C55E` check + `첫 강의를 완료했어요!` + progress bar advance. Calm, not confetti-spam. |
+| **Skeleton** | `#F3F3F3` blocks at exact card dimensions, 8px radius, ~1.2s shimmer. |
+| **Disabled (button)** | Black CTA drops to `rgba(32,32,32,0.4)`, white text; geometry stable. |
+
+## 15. Motion & Easing
+
+Class101's motion is friendly and encouraging — smooth reveals, gentle lifts, a small celebratory pop on progress. Energetic but never frantic.
+
+**Durations:**
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle/checkbox, heart fill |
+| `motion-fast` | 150ms | Hover lift, button press, chip select |
+| `motion-standard` | 250ms | Card hover, sheet open, tab switch |
+| `motion-slow` | 350ms | Page-to-detail, hero crossfade, progress celebration |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | Default — most motion |
+| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets, modals, toasts appearing |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
+| `ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Reserved — progress/completion celebration only |
+
+**Spring stance.** Spring is licensed for one thing: the small pop on lesson-complete / progress milestones. Everywhere else (navigation, card hover, sheets) uses standard easing. The platform should feel encouraging at the moment of achievement and calm otherwise.
+
+**Signature motions.**
+1. **Card hover lift.** Card raises ~2px with `0 2px 8px rgba(0,0,0,0.06)` over `motion-standard / ease-standard`.
+2. **Progress milestone.** On lesson complete, the green check draws and pops to ~1.15 over `motion-slow / ease-spring` while the progress bar fills with `ease-standard`. The one spring moment.
+3. **Sheet/modal entrance.** Bottom sheet rises from `y+40px` over `motion-standard / ease-enter` with a backdrop fade to `rgba(0,0,0,0.5)`.
+4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, lifts/slides/pops collapse to instant; skeletons go static `#F3F3F3`. No exceptions.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 (UI tokens, §1–9): class101.net/ko live computed styles via Playwright
+MCP, 2026-05-19. Confirmed: primary CTA `#202020` (rgb 32,32,32) 12px radius
+16px 50px tall padding 15px 14px; brand orange `#FF5D00` (rgb 255,93,0) the
+most-frequent saturated accent; surface gray `#F3F3F3` (rgb 243,243,243) 8px;
+white bg; font `"Pretendard Variable", "Pretendard JP Variable", Pretendard,
+system-ui, ...`. Page title `CLASS101 | 세상의 모든 클래스를 하나의 구독으로`.
+
+Brief brand orange `#FF5C00` vs live `#FF5D00` — within 1 unit; live adopted.
+Black-vs-orange CTA treated as distinct roles (action vs brand spark).
+
+Tier 2 (narrative): class101.net footer (corporate info, 101 Inc. Wilmington
+DE address) + general public knowledge of Class101's kit+class origin and
+CLASS101+ subscription pivot. Founder Ko Ji-yoon (고지윤), founded 2018 — widely
+documented; not re-verified against primary Class101 press in this pass.
+
+Voice samples: `시작하기` and tagline `세상의 모든 클래스를 하나의 구독으로`
+verified live (button + page title). `오늘부터 시작해볼까요?`,
+`찜한 클래스에 추가했어요`, `첫 강의를 완료했어요!`, empty/error copy are
+ILLUSTRATIVE patterns following Class101's encouraging `~요` register; not
+verbatim.
+
+Personas (§13) are fictional archetypes. Any resemblance to specific users is
+unintended.
+-->