oh-my-design-cli 1.0.2 → 1.2.0

package/web/references/qanda/DESIGN.md

@@ -0,0 +1,459 @@
+---
+omd: 0.1
+brand: QANDA
+---
+
+# Design System Inspiration of QANDA (콴다)
+
+## 1. Visual Theme & Atmosphere
+
+QANDA's interface is the digital equivalent of a clean study desk lit by a single warm lamp -- focused, friendly, and built for the moment a student stares at a problem they cannot solve. The page opens on a near-white canvas (`#FFFFFF` / `#F9F9F9`) with charcoal headings (`#222222`) and a single saturated **QANDA Orange** (`#FF5500`) that the brand treats as its core energy color. This is not the trustworthy orange of a marketplace; it is the high-energy, attention-pulling orange of a highlighter pen on a math worksheet -- the color a student reaches for when something *matters*.
+
+The aesthetic across both consumer (`qanda.ai`) and corporate (`mathpresso.com`) surfaces is **mobile-first edutech minimalism**: a light surface with generous whitespace, a single bold accent, and the iconic camera/upload affordance presented at the center of the conversation. Typography rides on the **Pretendard family** (Pretendard Std on KR, Pretendard JP on JP, Pretendard Variable on web) because the product is multilingual by design -- Korean, Japanese, Vietnamese, Indonesian, Thai, English, and Spanish all need to look native, not translated. Components are pill-shaped (`35px` chip radius, `8px` button radius, `24px` card radius) and lean youthful without becoming cartoonish.
+
+**Key Characteristics:**
+- QANDA Orange (`#FF5500`) as the dominant brand accent -- saturated, energetic, never muted
+- Pretendard family across all locales (Pretendard Std / Pretendard JP / Pretendard Variable) for multilingual parity
+- Light-first surfaces (`#FFFFFF` page, `#F9F9F9` chip fill, `#F0F0F0` divider)
+- Charcoal text hierarchy (`#222222` heading → `#5D5D5D` body → `#999999` caption)
+- Camera/image-upload CTA elevated to hero position -- the photo-to-solution loop is the product
+- Pill-and-rounded geometry: `8px` buttons, `24px` cards, `35px` chips, `9999px` avatars
+- 16px base type for all primary actions -- equal-weight friendliness, no aggressive type hierarchy
+- Two canonical surfaces: consumer (cool-gray, conversational) and corporate (warm taupe, narrative)
+
+## 2. Color Palette & Roles
+
+### Primary
+- **QANDA Orange** (`#FF5500`): Brand solid, hero highlights, badge fills, primary energy mark. Top-occurrence color across both surfaces (269 uses on qanda.ai/ko, 21 on mathpresso.com/ko). The single non-negotiable brand pigment.
+- **Charcoal 900** (`#222222`): Primary heading and body text on light surfaces. Avoids the harshness of pure black while staying authoritative.
+- **Charcoal 700** (`#3D3D3D`): Dark CTA fill ("시작하기" / Get started button) -- the brand uses charcoal, not orange, for its primary action button on consumer surfaces.
+- **Pure White** (`#FFFFFF`): Page background, primary surface.
+
+### Neutral Scale (consumer / qanda.ai)
+- **Gray 050** (`#F9F9F9`): Chip fill, secondary card surface.
+- **Gray 100** (`#F0F0F0`): Subtle divider, muted background.
+- **Gray 400** (`#B5B5B5`): Disabled stroke, weakest neutral.
+- **Gray 500** (`#999999`): Inactive nav label, placeholder text.
+- **Gray 700** (`#5D5D5D`): Footer body text, secondary information.
+
+### Warm Stone Scale (corporate / mathpresso.com)
+- **Stone Background** (`#F6F4F2`): Corporate page background, warmer than consumer #F9F9F9.
+- **Stone 100** (`#EFEFEF`): Section dividers on corporate surfaces.
+- **Stone 200** (`#D4CECB`): Soft borders in narrative sections.
+- **Stone 600** (`#9A9492`): Secondary corporate body (most-used corporate text color, 113 occurrences).
+- **Stone 700** (`#78716E`): Tertiary metadata.
+- **Stone 800** (`#665C57`): Body text on stone background.
+- **Stone 900** (`#111111`): Corporate near-black headings.
+
+### Semantic
+- **Positive Green** (`#0D9974`): Success states, correct-answer indicators on solution review screens.
+- **Positive Tint** (`#ECF7F4`): Success background fill, light affirmation.
+
+### Surface & Borders
+- Border default: `#F0F0F0` (consumer) / `#EFEFEF` (corporate)
+- Disabled fill: `#F9F9F9`
+
+## 3. Typography Rules
+
+### Font Family
+- **Consumer (qanda.ai)**: `"Pretendard Std", "Pretendard JP", Pretendard, system-ui, sans-serif`
+- **Corporate (mathpresso.com)**: `"Pretendard Std Variable", "Pretendard JP Variable", "Pretendard Variable", system-ui, sans-serif`
+- **Design Principle**: Pretendard's regional variants (KR Std, JP) are loaded explicitly so Korean and Japanese surfaces render with locale-correct metrics. The product ships in 7 languages -- typography must look native in each, not transliterated.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Notes |
+|------|------|------|--------|-------|
+| Hero Heading | Pretendard | 28-32px | 700 | "전 과목 문제 풀이, 더 쉽고 정확하게" — single-line bold KR statement |
+| Section Heading | Pretendard | 20-24px | 600 | Feature card titles ("풀이 첨삭", "선생님 Q&A") |
+| Body / Primary Action | Pretendard | 16px | 400 | All buttons, nav items, body copy -- equal-weight friendliness |
+| Body Small | Pretendard | 14px | 400 | Footer links, helper copy |
+| Caption | Pretendard | 13px | 400 | Footer regulatory/legal text |
+| Metadata | Pretendard | 12px | 400 | Timestamps, badges |
+
+### Principles
+- **16px is the universal floor for interactive text.** Buttons, nav, and primary copy all use 16px regular weight. The brand intentionally avoids tight micro-hierarchy on actions -- everything actionable looks equally tappable.
+- **Three weights only**: Regular (400), Semibold (600), Bold (700). No light or extra-bold.
+- **Korean-first line-height generosity**: Body text uses ~1.5 line-height to accommodate Hangul descenders without crowding.
+- **No display tracking experiments**: Letter-spacing stays at 0em across the system. Korean and CJK glyphs require generous default tracking that custom values would break.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Solid (Charcoal CTA)**
+- Background: `#3D3D3D` (charcoal-700)
+- Text: `#F9F9F9` (off-white)
+- Radius: `8px`
+- Min-height: `36px` (compact) / `40-48px` (standard)
+- Font: 16px weight 400
+- Use: Primary navigation actions ("시작하기", "Get started"). The brand uses charcoal -- not orange -- for its main CTA, reserving orange for highlight/energy moments.
+
+**Pill (New question / chip-style action)**
+- Background: `#F9F9F9` (gray-050)
+- Text: `#222222` (charcoal-900)
+- Radius: `35px` (pill)
+- Min-height: `42px`
+- Padding: 16px horizontal
+- Use: Conversation re-entry ("새 질문" / "New question") in the persistent left rail.
+
+**Image-Upload / Camera CTA (signature)**
+- Circular icon button anchored to the input row
+- Background: transparent or `#F9F9F9`
+- Icon: camera glyph in `#222222` charcoal
+- Size: 44px hit-target minimum
+- Use: The defining QANDA gesture -- tap to photograph a math problem. This affordance must be visible without scrolling on every surface where students ask questions.
+
+**Brand Accent Pill (orange highlight)**
+- Background: `#FF5500` or transparent with `#FF5500` text
+- Radius: `9999px` (pill)
+- Use: Promotional badges, "NEW" markers, premium upsell flags. Sparingly on conversation surfaces.
+
+**Tertiary / Text**
+- Background: transparent
+- Text: `#222222` (active) / `#999999` (inactive)
+- Use: Nav links ("홈", "대화 기록", "학습 콘텐츠"). Active state is implied by color contrast, not background fill.
+
+### Cards & Containers
+- Background: `#FFFFFF` or `#F9F9F9`
+- Border: `1px solid #F0F0F0` or no border
+- Radius: `24px` for feature cards, `16px` for content blocks, `12px` for compact tiles
+- Shadow: minimal -- `0 1px 4px rgba(0,0,0,0.04)` for floating cards; flat for inline
+
+### Chips & Tags
+- Background: `#F9F9F9` (default) or `#FF5500` (brand accent)
+- Text: `#222222` on neutral, `#FFFFFF` on orange
+- Radius: `35px` (full pill)
+- Height: 32-42px
+- Padding: 12-16px horizontal
+
+### Inputs & Conversation Bar
+- Background: `#FFFFFF` with `#F0F0F0` border
+- Radius: `24px` (large pill input on the central conversation surface)
+- Padding: 12px 16px
+- Placeholder: `#999999`
+- Right-side affordances: camera (image upload) icon + send button stacked horizontally
+
+### Navigation
+- Left rail (web): white background, vertical stack of icon+label rows at 16px regular
+- Active item: `#222222` text, no background fill
+- Inactive item: `#999999` text
+- Top utility row: "Get started" charcoal pill + "Download" pill + Settings icon
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4px
+- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px, 80px
+- Conversation panel gutter: 16-24px
+- Section vertical rhythm (corporate): 80-120px between hero blocks
+
+### Grid & Container
+- Mobile: full-width with 16px gutter
+- Web conversation: centered column with ~720px max-width on the message stack
+- Corporate landing: 1280px content max-width, 24px outer gutter
+
+### Whitespace Philosophy
+- **Calm, not cramped.** A student opening QANDA should feel a tutor's quiet attention, not a feature-stuffed dashboard. Every screen leads with one question, one input, one action.
+- **The camera affordance breathes.** The image-upload button is never visually crowded; it sits in its own gesture zone with at least 16px of clear space on all sides.
+- **Conversation density.** Past chat threads use tighter 12px row gaps; the active question surface uses 24px+ to feel inviting.
+
+### Border Radius Scale
+- Compact (`8px`): Buttons, small inputs
+- Standard (`12px`): Inline tiles
+- Comfortable (`16px`): Content cards
+- Card (`24px`): Feature cards, conversation input bar
+- Pill (`35px` or `9999px`): Chips, "새 질문" button, brand badges
+- Circle (`9999px`): Avatars, camera/icon buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, inline content, nav items |
+| Subtle (s1) | `0 1px 4px rgba(0,0,0,0.04)` | Floating cards, hovered tiles |
+| Standard (s2) | `0 4px 16px rgba(0,0,0,0.08)` | Conversation input bar, dropdowns |
+| Prominent (s3) | `0 8px 24px rgba(0,0,0,0.12)` | Modals, app-download tooltip |
+
+**Shadow Philosophy**: QANDA uses shadows sparingly -- the system is light-first and mostly flat. Where Karrot uses shadows for layering, QANDA uses **soft fills** (`#F9F9F9`, `#F0F0F0`) to suggest depth without elevation. The conversation input bar is the rare exception: it floats with `s2` to signal it as the active gesture surface.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use QANDA Orange (`#FF5500`) as the energy mark -- highlight badges, brand glyphs, accent strokes
+- Use charcoal `#3D3D3D` for primary CTAs on consumer surfaces -- orange is for energy, charcoal is for action
+- Load Pretendard with the locale-correct sub-family (Std for KR, JP for JP)
+- Default to 16px regular weight for all interactive text -- equal-weight friendliness is the voice
+- Center the camera/image-upload affordance on every question surface
+- Use pill geometry (`35px`, `9999px`) for chips, brand badges, and re-entry buttons
+- Switch to the warm-stone palette (`#F6F4F2`, `#9A9492`, `#78716E`) on corporate / About surfaces
+
+### Don't
+- Don't put orange on every CTA -- the brand uses charcoal for its primary action and reserves orange for moments of energy
+- Don't drop below 16px for primary interactive text -- mobile students need tappable scale
+- Don't introduce a secondary brand hue -- one accent (`#FF5500`) is the entire brand color story
+- Don't use heavy shadows -- the system is intentionally light and mostly flat
+- Don't mix the consumer cool-gray and corporate warm-stone palettes on the same surface -- they are two distinct canonical tracks
+- Don't substitute Inter or Roboto for Pretendard -- multilingual rendering requires the Pretendard family
+- Don't bury the camera affordance behind a menu -- the photo-to-solution gesture is the product
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <480px | Single column, full-width input, bottom nav |
+| Tablet | 480-1024px | Conversation column with collapsed left rail |
+| Desktop | >1024px | Persistent left rail (220px) + centered conversation |
+
+### Touch Targets
+- Primary CTA: 36-48px height
+- Camera/upload icon: 44px minimum hit area
+- Nav row: 48px height
+- Pill chip: 42px height
+
+### Collapsing Strategy
+- Left rail collapses to bottom tab bar below 1024px
+- App-download QR card hides on mobile (mobile users are already on the app target)
+- Conversation input remains sticky at the bottom on mobile, anchored center on web
+
+### Image Behavior
+- User-uploaded math problem photos: edge-to-edge in conversation thread, 16px radius
+- Step-by-step solution illustrations: full-width with 12px radius
+- Persona avatar (QANDA mascot): circular, 40-48px diameter
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand accent: QANDA Orange (`#FF5500`)
+- Primary CTA fill: Charcoal (`#3D3D3D`)
+- Heading text: Charcoal 900 (`#222222`)
+- Body text: Gray 700 (`#5D5D5D`)
+- Caption / inactive: Gray 500 (`#999999`)
+- Surface fill: Gray 050 (`#F9F9F9`)
+- Border: Gray 100 (`#F0F0F0`)
+- Success: Green (`#0D9974`)
+- Corporate background: Stone (`#F6F4F2`)
+- Corporate body: Stone 600 (`#9A9492`)
+
+### Example Component Prompts
+- "Build a QANDA conversation input: white bg, 1px #F0F0F0 border, 24px radius, 56px height. Left: camera icon button (44px, charcoal #222222). Center: placeholder 'Ask anything to study' in #999999 16px. Right: send button (disabled #F9F9F9, active #3D3D3D fill)."
+- "Create a QANDA primary CTA: #3D3D3D background, #F9F9F9 text, 16px weight 400, 36-40px height, 8px radius. Use for 'Get started' / '시작하기'."
+- "Design a 'New question' pill: #F9F9F9 background, #222222 text, 16px weight 400, 42px height, 35px radius, 16px h-padding. Left icon 20px charcoal."
+- "Build a feature card: white bg, 24px radius, 1px #F0F0F0 border. Icon top-left in #FF5500 orange. Heading 20px weight 600 #222222. Body 14px weight 400 #5D5D5D. 24px inner padding."
+- "Create a step-by-step solution layout: vertical stack of numbered steps. Each step: small circular badge with #FF5500 number + step body text in #222222 16px. 16px gap between steps. Latex/math content rendered inline."
+
+### Iteration Guide
+1. The brand color is `#FF5500` -- exactly that value. Do not substitute purple, pink, or a softened tint.
+2. Primary CTAs are charcoal (`#3D3D3D`), not orange. Orange is the highlight mark, not the action mark.
+3. Pretendard family (Std for KR, JP for JP, Variable for web) -- never substitute another sans-serif.
+4. 16px regular is the universal interactive type size. Resist hierarchy temptation on action labels.
+5. The camera/image-upload affordance must be visible on every question surface.
+6. Two canonical palettes exist: consumer cool-gray and corporate warm-stone. Keep them separate.
+7. Pill geometry (`35px`, `9999px`) signals friendly re-entry; `8px` signals action. Don't flip them.
+
+---
+
+## 10. Voice & Tone
+
+QANDA speaks like a slightly older sibling who happens to be very good at math: warm, encouraging, low-pressure, and allergic to anything that sounds like a textbook. The voice assumes the student in front of the screen has been stuck on the same problem for ten minutes and is one frustrated tap away from closing the app -- so it leads with calm reassurance (`Hi there! What would you like to study together?`) rather than a feature pitch. Korean surfaces stay in everyday endings (`-어요`, `-해요`) and second-person familiar (`알려주면`), never the formal `-ㅂ니다`. English mirrors that with conversational openings (*"Ask anything to study"*) instead of marketing copy (*"Unlock your study potential"*).
+
+| Context | Tone |
+|---|---|
+| CTAs | Verb-first Korean (`시작하기`, `새 질문`, `App 다운로드`) / plain English (`Get started`, `Download`, `New question`) |
+| Hero / first impression | One welcoming question, not a value prop. (`What would you like to study together?` / `모르는 문제를 알려주면 맞춤형 풀이를 제공해요`) |
+| Empty states | Reassuring + actionable. Never `데이터가 없습니다` or `No results`. |
+| Error messages | Specific, blameless. Prefer `사진을 다시 찍어주세요` over `오류가 발생했습니다`. |
+| Success / solution shown | Quiet competence, not celebration. The answer arriving *is* the reward. |
+| Premium upsell | Soft, value-first. Surface what unlocks, not what's locked. |
+| Multilingual surfaces | Locale-native phrasing, not translation. Indonesian, Vietnamese, Thai, Spanish each get a copywriter, not a translator. |
+| Tutor / teacher Q&A | Respectful of both student and teacher. Never positions AI as superior to human tutors. |
+
+**Forbidden phrases.** `오류가 발생했습니다`, `데이터가 없습니다`, `잠시만 기다려주세요` (overused -- use specific waits), `혁신적인`, `세계 최초`. English boilerplate: `Oops, something went wrong`, `We're sorry for the inconvenience`, `Unlock premium features`. Marketing-speak bans: `revolutionary`, `world-class`, `next-generation AI`, `cutting-edge`. Never frame AI as replacing teachers -- the brand explicitly partners with `선생님 Q&A` (Teacher Q&A) and `콴다과외` (QANDA Tutoring).
+
+**Voice samples.**
+
+- `Hi there! What would you like to study together?` — homepage hero, English. <!-- verified: https://qanda.ai/en, 2026-05 -->
+- `Ask anything to study` — input placeholder, English. <!-- verified: https://qanda.ai/en, 2026-05 -->
+- `Study smarter, wherever you are` — app-download CTA. <!-- verified: https://qanda.ai/en, 2026-05 -->
+- `전 과목 문제 풀이, 더 쉽고 정확하게` — homepage hero, KR. <!-- verified: https://qanda.ai/ko, 2026-05 -->
+- `모르는 문제를 알려주면 맞춤형 풀이를 제공해요` — homepage sub-hero, KR. <!-- verified: https://qanda.ai/ko, 2026-05 -->
+- `학습용 AI로 쉬운 풀이, 정확한 답` — value-prop line, KR. <!-- verified: https://qanda.ai/ko, 2026-05 -->
+- `교육 기회의 평등을 기술로 이룩하는 것` — corporate mission, KR. <!-- verified: https://mathpresso.com/ko, 2026-05 -->
+- `가장 효과적인 교육을 전 세계 모두에게` — corporate vision, KR. <!-- verified: https://mathpresso.com/ko, 2026-05 -->
+- `We Rebuild Education` — corporate brand line, EN. <!-- verified: https://mathpresso.com, 2026-05 -->
+
+## 11. Brand Narrative
+
+QANDA (콴다, short for *Q and A*) launched in **June 2015** as the first product of **Mathpresso, Inc.** (주식회사 매스프레소), founded in Seoul by **Lee Jong-heun (이종헌)** -- then a private math tutor -- and his high school friend **Lee Yong-jae (이용재, "Jake Lee")**, a Seoul National University computer engineering student who had been looking for a startup idea. Two more SNU classmates, **Jung Won-uk (정원욱)** and **Jeong Ho-jae (정호재)**, joined as co-founders. Their founding bet was that the bottleneck in education is not content -- there is more free math content online than any student could watch -- but **friction at the moment of confusion**. A student stuck on a problem at 11pm doesn't need a course; they need someone to look at *this specific problem* and explain it. QANDA's first product solved exactly that: photograph the problem, get a worked solution within seconds. The app was built around an OCR engine trained on math notation -- a much harder optical-recognition problem than reading printed text -- and the founding team treated that engine as the moat ([Wikipedia — QANDA](https://en.wikipedia.org/wiki/QANDA), [Inquirer Technology](https://technology.inquirer.net/100862/startup-mixes-koreas-strongest-areas-math-and-tech)).
+
+Ten years later the product has held its shape and scaled across Asia. **Mathpresso reports 97 million cumulative registered users, 8 million monthly active users, and 7.2 billion cumulative searches** across 50+ countries, with 90% of usage now coming from outside Korea -- Japan, Vietnam, Indonesia, and Thailand are major markets, with Spanish and English added to support Latin America and global English-speaking students ([mathpresso.com](https://mathpresso.com/ko)). The company has raised approximately **$130-150M / 153B KRW cumulative**, including a **July 2021 Series C of $50M** led by Yellowdog with **GGV Capital, Goodwater Capital, KDB, SKS Private Equity, SoftBank Ventures Asia, Legend Capital, Mirae Asset Venture Investment, and Smilegate Investment** ([PR Newswire — Series C](https://www.prnewswire.com/news-releases/mathpresso-developer-of-ai-based-learning-app-qanda-secures-50-million-in-series-c-funding-301324099.html), [Crunchbase — Mathpresso](https://www.crunchbase.com/organization/mathpresso)). **Google** and **Samsung Ventures** later joined the cap table; **KT Corporation** (Korean telecom giant) made a strategic investment in 2023 specifically to co-develop a math LLM ([PR Newswire — KT investment](https://www.prnewswire.com/news-releases/google-backed-edtech-company-mathpresso-secures-strategic-investment-from-telecom-giant-kt-301922854.html)).
+
+In **January 2024**, Mathpresso, **Upstage** (Korea's leading LLM startup), and **KT** announced **MathGPT**, a math-specialized small language model that **set a new world record on the MATH benchmark, surpassing Microsoft's ToRA-13B and outperforming GPT-4** on high-school math problems ([Korea Herald](https://www.koreaherald.com/article/3299066), [PR Newswire — MathGPT](https://www.prnewswire.com/news-releases/south-koreas-mathgpt-sets-a-new-world-record-in-mathematical-performance-302028223.html)). MathGPT is being integrated across QANDA's surfaces -- the consumer app, B2B/B2G SaaS, and the human-tutor product **콴다과외 (QANDA Tutor)** -- under the umbrella product **Cramify**, a hyper-personalized study tool. **QANDA was named to TIME's inaugural list of the World's Top EdTech Companies in 2024** ([Taiwan News](https://www.taiwannews.com.tw/news/5678819)). The brand refuses two adjacent positionings: it is not a replacement for teachers (the product surfaces `선생님 Q&A` / live human tutoring as a co-equal feature), and it is not a content library competing with Khan Academy or Coursera (the brand stays focused on the per-problem moment-of-stuck loop). The mission, stated on Mathpresso's corporate site, is *"교육 기회의 평등을 기술로 이룩하는 것"* — achieving educational opportunity equality through technology — paired with the vision *"가장 효과적인 교육을 전 세계 모두에게"* (the most effective education for everyone, globally) and the brand line *"We Rebuild Education"* ([mathpresso.com](https://mathpresso.com/ko)).
+
+## 12. Principles
+
+1. **The camera is the product.** The defining QANDA gesture is photographing a problem and getting a worked solution. Every question surface must surface the camera/image-upload affordance without scrolling, without a menu, and without a hidden state. *UI implication:* if a design hides the camera button behind a "+" menu or relegates it to a settings drawer, the design has drifted off-brand.
+2. **Orange is energy; charcoal is action.** `#FF5500` is the brand's energy mark -- it lights up badges, highlights, and brand glyphs. The primary CTA fill is charcoal `#3D3D3D`. Designs that use orange on every action over-saturate the brand and lose the highlight semantics. *UI implication:* at most one orange-filled element per viewport in a primary flow; primary CTAs default to charcoal.
+3. **16px is the universal floor for actionable text.** Buttons, nav, and primary copy all use 16px regular weight. The brand intentionally avoids tight type hierarchy on actions -- a student under cognitive load should not have to parse which thing is most tappable. *UI implication:* never drop a button label below 16px; never weight one button heavier than another to imply primacy -- use color (charcoal vs neutral pill) instead.
+4. **Pretendard, locale-correct.** Pretendard Std for KR, Pretendard JP for JP, Pretendard Variable for web/EN. The product ships in seven languages; substituting Inter or system-ui breaks Hangul and CJK metrics. *UI implication:* the font stack must explicitly declare the locale variant first; never rely on Pretendard auto-detecting locale.
+5. **Conversation, not catalog.** The home surface is a single greeting + a single input, not a feature grid. Other features (`풀이 첨삭`, `선생님 Q&A`, `퀴즈로 외우기`, `타이머`, `콴다과외`) live one tap away -- they do not crowd the entry moment. *UI implication:* the first-paint of any question surface should have one heading, one input, and the camera affordance -- nothing else competing for attention.
+6. **AI augments, never replaces, teachers.** The product surfaces `선생님 Q&A` (Teacher Q&A) and `콴다과외` (QANDA Tutoring) as co-equal features alongside AI solutions. Brand voice never frames AI as superior to human tutors. *UI implication:* upsell to human tutoring must read as expansion, not escalation. Avoid copy like "Get a real human" that implies AI is lesser.
+7. **Two canonical surfaces, two palettes.** Consumer (`qanda.ai`) uses cool-gray neutrals (`#F9F9F9`, `#F0F0F0`, `#999999`); corporate (`mathpresso.com`) uses warm-stone (`#F6F4F2`, `#9A9492`, `#78716E`). Both share `#FF5500` as the brand mark and Pretendard as the typeface. *UI implication:* never mix palettes within one surface. A pricing page on the consumer app stays cool-gray; a careers page on the corporate site stays warm-stone.
+8. **Multilingual is first-class, not localized.** 90% of QANDA's MAU is outside Korea. Korean is the headquarters language, not the canonical language. *UI implication:* designs should be reviewed at minimum in KR, EN, and one CJK + one Latin SEA locale (e.g., JP and VI/ID) before sign-off. Right-aligned reading order, longer Vietnamese strings, and JP vertical-feeling line-heights are all in scope.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by publicly described QANDA user segments, not individual people.*
+
+**민준 (Minjun), 16, Seoul.** Korean high school sophomore, 수능 prep track. Uses QANDA 4-5 times a week, almost always at his desk between 9pm and midnight. Photographs a math problem, scans the worked solution, sometimes uses `풀이 첨삭` (Solution Review) when his own attempt was wrong but he can't see why. Treats the AI as a fast tutor for routine problems and saves human-tutor (`콴다과외`) sessions for the hardest 모의고사 questions.
+
+**Sari, 17, Jakarta.** Indonesian high school student, science track. Found QANDA through a TikTok study-with-me creator. Uses it primarily on her phone in Bahasa Indonesia for matematika and fisika. Camera-first user: she rarely types a question, almost always photographs a textbook problem. The fact that the app feels native in Indonesian -- not awkwardly translated -- is why she picked QANDA over alternatives.
+
+**유키 (Yuki), 15, Osaka.** Japanese junior-high student preparing for 高校受験. Uses QANDA in Japanese, often during commute time on the train. Pretendard JP rendering matters -- she once tried a competitor app where Japanese rendered with Korean glyph metrics and uninstalled it within an hour.
+
+**이선생님 (Ms. Lee), 41, Daegu.** Middle school math teacher. Uses QANDA's B2B teacher dashboard to assign practice problems and review which problems her class is collectively struggling with (anonymized). Has a complicated relationship with the consumer app -- some students use it to skip thinking -- but appreciates that QANDA explicitly surfaces human tutoring rather than positioning AI as a teacher replacement.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no chat history)** | Single warm line (`아직 대화가 없어요. 모르는 문제를 사진으로 올려보세요`) + camera/upload icon as the primary affordance. No illustration. Never `데이터가 없습니다`. |
+| **Empty (search no result)** | One-line caption in `#5D5D5D` 14px (`이 문제와 일치하는 풀이를 찾지 못했어요. 사진을 다시 찍어볼까요?`) + retry CTA in charcoal `#3D3D3D`. |
+| **Loading (image-recognizing)** | OCR progress: subtle scanning animation overlaying the uploaded image, `#FF5500` accent line sweeping top-to-bottom over 1.5s. Caption: `문제를 인식하고 있어요`. |
+| **Loading (solution generating)** | Skeleton blocks at `#F0F0F0` matching the final step-by-step layout (3-5 numbered step rows). Shimmer at 1.2s. Camera affordance stays visible but disabled. |
+| **Loading (first paint)** | Ghost of the conversation surface: greeting line at `#F0F0F0`, input bar outline at `#F0F0F0`. No spinner. |
+| **Error (image too blurry)** | Inline below the upload: `#FF5500` 13px helper text (`사진이 흐려서 문제를 읽을 수 없어요. 더 선명하게 다시 찍어주세요`). Camera button highlighted in `#FF5500` to invite re-capture. |
+| **Error (network)** | Toast at bottom of conversation: `#222222` background, white 14px text, 3s auto-dismiss. One actionable sentence (`연결이 끊어졌어요. 다시 시도해주세요`). |
+| **Error (server / blocking)** | Full-screen centered: `#222222` 16px weight 600 heading, `#5D5D5D` 14px subline, retry CTA in charcoal `#3D3D3D`. No illustration. |
+| **Success (solution arrived)** | Step-by-step solution renders top-down with subtle stagger (each step fades + 8px upward translate over 200ms). `#0D9974` checkmark badge appears on the final step. Quiet, not celebratory. |
+| **Success (correct answer in 풀이 첨삭)** | `#0D9974` positive-green inline badge with `정답이에요` label. `#ECF7F4` tint flash behind the answer for 300ms. |
+| **Skeleton** | `#F0F0F0` blocks at exact final dimensions. Shimmer 1.2s with white highlight. Used for solution-generating, search-results, and chat-history loading. |
+| **Disabled (send button before input)** | Button drops to `#F9F9F9` fill with `#B5B5B5` icon. Geometry stays identical so the re-enable is frame-stable. |
+| **Premium-locked feature** | Inline soft block: `#F9F9F9` background card, lock icon in `#999999`, headline `프리미엄으로 더 자세한 풀이를 보세요`, soft `#FF5500` accent on the unlock CTA only. Never a hard paywall over the user's own captured problem. |
+
+## 15. Motion & Easing
+
+**Durations** (named, not raw milliseconds):
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle flips, send-button enable/disable |
+| `motion-fast` | 150ms | Hover, focus, button press, inline color flashes |
+| `motion-standard` | 250ms | Default — card taps, tab switches, message arrival |
+| `motion-slow` | 400ms | OCR scan sweep, step-by-step staggered reveal |
+| `motion-page` | 300ms | Route transitions, full-screen modal in/out |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Solutions arriving, modals opening, toasts entering |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Modals dismissing, toasts auto-closing |
+| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions, step staggers |
+| `ease-scan` | `cubic-bezier(0.65, 0.0, 0.35, 1)` | OCR scanning sweep — slightly stronger curve to feel deliberate |
+
+**Spring stance.** Subtle springs are permitted on the **solution-arrival stagger** (each step settles with a tiny overshoot, ~3% scale rebound) because the moment a stuck student sees their answer is the brand's emotional core -- a touch of life there reinforces *"the answer landed"* without becoming celebratory. Outside of solution arrival and the camera shutter feedback, springs are forbidden. CTAs do not bounce; modals do not overshoot; toasts do not wobble. The brand is built around students under cognitive load -- excess motion reads as noise.
+
+**Signature motions.**
+
+1. **Camera shutter feedback.** On image upload, a brief `#FFFFFF` flash overlays the camera button + a 96% scale press, releasing on capture (`motion-fast / ease-standard`). Mimics a real camera shutter so the gesture feels confirmed.
+2. **OCR scan sweep.** During problem recognition, a thin `#FF5500` line sweeps top-to-bottom over the uploaded image (`motion-slow / ease-scan`). Loops once per recognition cycle. The orange accent here is one of the few moments orange takes a primary visual role.
+3. **Step-by-step solution reveal.** When the AI solution arrives, each step (1, 2, 3, 4, 5...) fades in with an 8px upward translate, staggered at 80ms intervals (`motion-standard / ease-enter`). The final step gets a soft `#0D9974` checkmark badge with a tiny scale-spring (1.0 → 1.05 → 1.0) over 250ms. This is the brand's signature reveal.
+4. **Conversation message arrival.** New chat messages slide in from the bottom with a 12px translate (`motion-standard / ease-enter`). Older messages stay fixed -- no shifting context.
+5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. The OCR scan-sweep simplifies to a static `#F9F9F9` overlay with a caption. The solution stagger becomes a single fade. The app stays fully functional; just less kinetic.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 — Direct verification (Playwright + WebFetch, 2026-05):
+- https://qanda.ai/ko — live KR consumer surface. Verified primary brand color
+  #FF5500 (269 occurrences, top color rank 1), Pretendard Std/JP/Variable font
+  family, charcoal #3D3D3D primary CTA "시작하기" (8px radius, 36px height,
+  16px weight 400 white text), pill "새 질문" #F9F9F9 (35px radius, 42px height),
+  inactive nav #999999, footer text #5D5D5D, success green #0D9974.
+  Hero copy verbatim: "전 과목 문제 풀이, 더 쉽고 정확하게",
+  "모르는 문제를 알려주면 맞춤형 풀이를 제공해요",
+  "학습용 AI로 쉬운 풀이, 정확한 답". Features: "풀이 첨삭", "선생님 Q&A",
+  "퀴즈로 외우기", "타이머", "콴다과외".
+- https://qanda.ai/en — live EN consumer surface. Hero copy verbatim:
+  "Hi there! What would you like to study together?", "Ask anything to study",
+  "Study smarter, wherever you are". Footer confirms CEOs Yong Jae Lee +
+  Jong Heun Lee, Mathpresso, Inc., 218 Teheran-ro Gangnam-gu Seoul.
+- https://mathpresso.com/ko — corporate surface. Confirmed warm-stone palette
+  (#F6F4F2 page bg, #9A9492 most-used body 113 occurrences, #78716E secondary,
+  #665C57, #111111), shared #FF5500 brand accent (21 occurrences, distinctly
+  smaller share than consumer), Pretendard Variable font family. Mission
+  "교육 기회의 평등을 기술로 이룩하는 것", vision "가장 효과적인 교육을
+  전 세계 모두에게", brand line "We Rebuild Education". Metrics: 97M registered,
+  8M MAU, 7.2B cumulative searches, 153B KRW funding, 7 languages.
+
+Tier 2 — Design system records (WebFetch, 2026-05):
+- https://getdesign.md/qanda — no record ("No designs found for 'qanda'").
+- https://getdesign.md/mathpresso — no record.
+- https://styles.refero.design — not checked, but consistent absence expected
+  given QANDA has not published a public design system.
+
+Tier 2 — Press / philosophy (WebSearch, 2026-05):
+- https://en.wikipedia.org/wiki/QANDA — confirms June 2015 Mathpresso founding,
+  January 2016 QANDA app launch, OCR-based math problem recognition,
+  90M+ registered users across 50 countries.
+- https://technology.inquirer.net/100862/startup-mixes-koreas-strongest-areas-math-and-tech —
+  confirms founding story: Lee Jong-heun (private math tutor) + Lee Yong-jae
+  (Seoul National University CS student looking for a startup idea), with
+  SNU classmates Wonguk Jung and Hojae Jeong joining as co-founders.
+- https://www.prnewswire.com/news-releases/mathpresso-developer-of-ai-based-learning-app-qanda-secures-50-million-in-series-c-funding-301324099.html —
+  confirms July 2021 Series C, $50M (NOT the $75-80M cited in original spec),
+  led by Yellowdog with GGV Capital, Goodwater Capital, KDB, SKS PE,
+  SoftBank Ventures Asia, Legend Capital, Mirae Asset, Smilegate.
+- https://www.prnewswire.com/news-releases/google-backed-edtech-company-mathpresso-secures-strategic-investment-from-telecom-giant-kt-301922854.html —
+  confirms KT strategic investment, Google as backer.
+- https://www.koreaherald.com/article/3299066 +
+  https://www.prnewswire.com/news-releases/south-koreas-mathgpt-sets-a-new-world-record-in-mathematical-performance-302028223.html —
+  confirm January 2024 MathGPT release, co-developed by Mathpresso + Upstage + KT,
+  outperformed Microsoft ToRA-13B on MATH benchmark, surpassed GPT-4 on MATH.
+- https://www.taiwannews.com.tw/news/5678819 — confirms TIME World's Top
+  EdTech Companies 2024 inclusion.
+- https://www.crunchbase.com/organization/mathpresso — confirms cumulative
+  funding ~$130M+ (153B KRW reported on corporate site).
+
+Re-verification status:
+- The 97M registered / 8M MAU / 7.2B cumulative searches / 153B KRW figures
+  in §11 are carried from mathpresso.com/ko as of 2026-05 retrieval. Numbers
+  may drift; re-verify before quoting publicly.
+- The "$75M Series C 2021 + later" claim in the original spec is corrected
+  here to $50M Series C July 2021. Total cumulative funding ~$130-150M is
+  consistent with both Crunchbase and the corporate site.
+- The original spec suggested "Bright purple/pink primary — verify live
+  (could be #7B61FF or #FF008C)". Live verification (Playwright + computed
+  styles, 2026-05) shows the actual brand primary is #FF5500 ORANGE, not
+  purple/pink. The spec's color hypothesis was incorrect; #FF5500 is
+  documented here based on direct measurement (269 occurrences on qanda.ai/ko,
+  ranked #1 by frequency among non-trivial colors).
+
+Personas (§13) are fictional archetypes informed by publicly described QANDA
+user segments (KR high schooler, ID secondary student, JP middle schooler,
+KR teacher in B2B). Any resemblance to specific individuals is unintended.
+
+Interpretive claims (editorial, not documented QANDA statements):
+- "Orange is energy; charcoal is action" framing (§7, §12) — editorial reading
+  of the observed pattern (#FF5500 used heavily on highlights/badges but not
+  on the primary CTA fill, which is #3D3D3D charcoal). Not a sourced QANDA
+  brand statement.
+- "The camera is the product" (§12) — editorial framing of the observed UI
+  emphasis on the image-upload affordance. The OCR-based photo-to-solution
+  loop is documented as the core feature on Wikipedia and on QANDA's own
+  product pages, but the principle phrasing is editorial.
+- The spring-permitted-only-for-solution-arrival stance (§15) — derived from
+  the brand posture (students under cognitive load, calm tutor voice).
+  Not a documented QANDA motion rule.
+-->
+
+---
+
+**Verified:** 2026-05-08 (omd:add-reference, Apple-tier intent)
+**Tier 1 sources:** qanda.ai/ko (consumer KR — QANDA Orange `#FF5500` 269-occurrence top color, Pretendard Std/JP/Variable, charcoal `#3D3D3D` `8px` `36px·400` Primary + neutral pill `#F9F9F9` `35px` `42px·400` "새 질문" + footer `#5D5D5D` `400`); qanda.ai/en (consumer EN — verified hero microcopy "Hi there! What would you like to study together?" + "Ask anything to study"); mathpresso.com/ko (corporate — warm-stone palette `#F6F4F2`/`#9A9492`/`#78716E` 2nd canonical track, shared `#FF5500` accent at 21 occurrences, Pretendard Variable, mission/vision verbatim).
+**Tier 2 sources:** getdesign.md/qanda + getdesign.md/mathpresso — no record.
+**Tier 2 (Philosophy/founders):** Wikipedia (QANDA), Inquirer Technology (founding story Lee Jong-heun + Jake Lee + SNU co-founders), PR Newswire (Series C $50M July 2021 + KT strategic investment + MathGPT world record), Korea Herald (MathGPT outperforms GPT-4 on MATH benchmark), Taiwan News (TIME Top EdTech 2024), Crunchbase (Mathpresso cumulative funding).
+**Style ref:** `karrot` (KR §4 canonical schema, retained).
+**Conflicts unresolved:** Original spec hypothesized "purple/pink primary `#7B61FF` or `#FF008C`" — corrected to `#FF5500` ORANGE based on live measurement. Original spec cited "Series C ~$75M 2021" — corrected to $50M based on PR Newswire announcement. Both conflicts resolved in favor of measured/sourced values.