Qanda
Qanda
qanda
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 a

01

Color Palette

Brand

Accent

Neutrals

02

Typography

Type Scale

Rendered in system-ui to clearly show scale & weight.

display48px · 600 · 1.25
Design at scale
32px32px · 600 · 1.25
Section heading
heading-lg24px · 600 · 1.4
Subheading
body16px · 400 · 1.5
Body text. The quick brown fox jumps over the lazy dog. Designed for readable line-height in long-form content.
small12px · 400 · 1.5
Supporting text
caption12px · 400 · 1.5
Caption · timestamp · 2026
label10px · 500 · 1.5
BADGE / LABEL

Fonts

Primary
Inter
Open · OFL
Designed by Rasmus Andersson. Variable font with full weight range.
Install via Google Fonts
03

Spacing & Shape

Spacing

PurposeValuePreview
Densitycompact
Base unit4px
Section gap40px
Card padding20px
Element gap12px

Border Radius

ElementValuePreview
buttonsCompact8px
smallCompact8px
inlineStandard12px
contentComfortable16px
featureCard24px
conversationCard24px
badgesPill35px
Pill35px
brandPill35px
avatarsCircle9999px
cameraiconCircle9999px

Borders

ElementValuePreview
Border1px solid #f0f0f0

Elevation

Shadow 1
Shadow 2
Shadow 3
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
05

Components

Buttons

Primary Solid (Charcoal CTA)
Background`#3D3D3D` (charcoal-700)
Text`#F9F9F9` (off-white)
Radius`8px`
Font16px weight 400
Min-height`36px` (compact) / `40-48px` (standard)
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)
Padding16px horizontal
Min-height`42px`
Use: Conversation re-entry ("새 질문" / "New question") in the persistent left rail.
Image-Upload / Camera CTA (signature)
Backgroundtransparent or `#F9F9F9`
Iconcamera glyph in `#222222` charcoal
Size44px 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
Backgroundtransparent
Text`#222222` (active) / `#999999` (inactive)
Use: Nav links ("홈", "대화 기록", "학습 콘텐츠"). Active state is implied by color contrast, not background fill.