콴다 DESIGN.md

Design System Inspiration of QANDA (콴다)

Overview

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)

Primary tasks

• Photograph a problem you are stuck on and get a worked solution
• Type a question into the conversation bar and send it
• Follow a solution step by step once the answer arrives
• Ask a human teacher or book a tutor session for the hardest problems
• Revisit an earlier question from your past chat threads

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, 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).

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.

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.

Colors

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

Typography

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

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.

Layout

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

Responsive Behavior

Breakpoints

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

Elevation & Depth

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.subtle: 0 1px 4px rgba(0,0,0,0.04)
• shadow.standard: 0 4px 16px rgba(0,0,0,0.08)
• shadow.prominent: 0 8px 24px rgba(0,0,0,0.12)

Motion & Easing

Durations (named, not raw milliseconds):

Easings:

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.

---

Verified: 2026-05-08 (omd:add-reference, Apple-tier intent) Tier 1 sources: https://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); https://qanda.ai/en (consumer EN — verified hero microcopy "Hi there! What would you like to study together?" + "Ask anything to study"); https://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.

Components

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

States

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

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").

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.

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.

---

Governance

Known Gaps

• Contrast, badge-accent. Text #ffffff on #ff5500 measures 3.21:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-text. Text #222222 on #00000000 measures 1.32:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-success. Text #0d9974 on #ecf7f4 measures 3.29:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.