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:
#FF5500) as the dominant brand accent -- saturated, energetic, never muted#FFFFFF page, #F9F9F9 chip fill, #F0F0F0 divider)#222222 heading → #5D5D5D body → #999999 caption)8px buttons, 24px cards, 35px chips, 9999px avatars#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.#222222): Primary heading and body text on light surfaces. Avoids the harshness of pure black while staying authoritative.#3D3D3D): Dark CTA fill ("시작하기" / Get started button) -- the brand uses charcoal, not orange, for its primary action button on consumer surfaces.#FFFFFF): Page background, primary surface.#F9F9F9): Chip fill, secondary card surface.#F0F0F0): Subtle divider, muted background.#B5B5B5): Disabled stroke, weakest neutral.#999999): Inactive nav label, placeholder text.#5D5D5D): Footer body text, secondary information.#F6F4F2): Corporate page background, warmer than consumer #F9F9F9.#EFEFEF): Section dividers on corporate surfaces.#D4CECB): Soft borders in narrative sections.#9A9492): Secondary corporate body (most-used corporate text color, 113 occurrences).#78716E): Tertiary metadata.#665C57): Body text on stone background.#111111): Corporate near-black headings.#0D9974): Success states, correct-answer indicators on solution review screens.#ECF7F4): Success background fill, light affirmation.#F0F0F0 (consumer) / #EFEFEF (corporate)#F9F9F9"Pretendard Std", "Pretendard JP", Pretendard, system-ui, sans-serif"Pretendard Std Variable", "Pretendard JP Variable", "Pretendard Variable", system-ui, sans-serif| 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 |
Primary Solid (Charcoal CTA)
#3D3D3D (charcoal-700)#F9F9F9 (off-white)8px36px (compact) / 40-48px (standard)Pill (New question / chip-style action)
#F9F9F9 (gray-050)#222222 (charcoal-900)35px (pill)42pxImage-Upload / Camera CTA (signature)
#F9F9F9#222222 charcoalBrand Accent Pill (orange highlight)
#FF5500 or transparent with #FF5500 text9999px (pill)Tertiary / Text
#222222 (active) / #999999 (inactive)#FFFFFF or #F9F9F91px solid #F0F0F0 or no border24px for feature cards, 16px for content blocks, 12px for compact tiles0 1px 4px rgba(0,0,0,0.04) for floating cards; flat for inline#F9F9F9 (default) or #FF5500 (brand accent)#222222 on neutral, #FFFFFF on orange35px (full pill)#FFFFFF with #F0F0F0 border24px (large pill input on the central conversation surface)#999999#222222 text, no background fill#999999 text8px): Buttons, small inputs12px): Inline tiles16px): Content cards24px): Feature cards, conversation input bar35px or 9999px): Chips, "새 질문" button, brand badges9999px): Avatars, camera/icon buttons| 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.
#FF5500) as the energy mark -- highlight badges, brand glyphs, accent strokes#3D3D3D for primary CTAs on consumer surfaces -- orange is for energy, charcoal is for action35px, 9999px) for chips, brand badges, and re-entry buttons#F6F4F2, #9A9492, #78716E) on corporate / About surfaces#FF5500) is the entire brand color story| 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 |
#FF5500)#3D3D3D)#222222)#5D5D5D)#999999)#F9F9F9)#F0F0F0)#0D9974)#F6F4F2)#9A9492)#FF5500 -- exactly that value. Do not substitute purple, pink, or a softened tint.#3D3D3D), not orange. Orange is the highlight mark, not the action mark.35px, 9999px) signals friendly re-entry; 8px signals action. Don't flip them.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. Ask anything to study — input placeholder, English. Study smarter, wherever you are — app-download CTA. 전 과목 문제 풀이, 더 쉽고 정확하게 — homepage hero, KR. 모르는 문제를 알려주면 맞춤형 풀이를 제공해요 — homepage sub-hero, KR. 학습용 AI로 쉬운 풀이, 정확한 답 — value-prop line, KR. 교육 기회의 평등을 기술로 이룩하는 것 — corporate mission, KR. 가장 효과적인 교육을 전 세계 모두에게 — corporate vision, KR. We Rebuild Education — corporate brand line, EN. 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, Inquirer Technology).
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). 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, Crunchbase — 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).
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, PR Newswire — MathGPT). 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). 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).
#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.풀이 첨삭, 선생님 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.선생님 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.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.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.
| 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. |
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.
#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.#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.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.motion-standard / ease-enter). Older messages stay fixed -- no shifting context.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.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.
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 a
Brand
Accent
Neutrals
Type Scale
Rendered in system-ui to clearly show scale & weight.
Fonts
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Section gap | 40px | |
| Card padding | 20px | |
| Element gap | 12px |
Border Radius
| Element | Value | Preview |
|---|---|---|
| buttonsCompact | 8px | |
| smallCompact | 8px | |
| inlineStandard | 12px | |
| contentComfortable | 16px | |
| featureCard | 24px | |
| conversationCard | 24px | |
| badgesPill | 35px | |
| Pill | 35px | |
| brandPill | 35px | |
| avatarsCircle | 9999px | |
| cameraiconCircle | 9999px |
Borders
| Element | Value | Preview |
|---|---|---|
| Border | 1px solid #f0f0f0 |
Elevation
Do and Don't guidelines parsed from DESIGN.md.
Do
Don't
Buttons