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.

Primary
Typography
· Pretendard
Radius

Evidence snapshot

legacy snapshot
Claims grounded
0/103 · 0%
Sources
0 surfaces · 0 sources
UI font basis
frontmatter · low
Components
9 documented · harvested

Needs work: conflict unresolved · freshness conflict · proof incomplete · tier1 source missing · token source unverified · verification v2 missing

Design System
QANDA logo

QANDA

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.

04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

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

  • n't put orange on every CTA -- the brand uses charcoal for its primary action and reserves orange for moments of energy
  • n't drop below 16px for primary interactive text -- mobile students need tappable scale
  • n't introduce a secondary brand hue -- one accent (#FF5500) is the entire brand color story
  • n't use heavy shadows -- the system is intentionally light and mostly flat
  • n't mix the consumer cool-gray and corporate warm-stone palettes on the same surface -- they are two distinct canonical tracks
  • n't substitute Inter or Roboto for Pretendard -- multilingual rendering requires the Pretendard family
  • n't bury the camera affordance behind a menu -- the photo-to-solution gesture is the product

Related design systems