QANDA's design system uses #FF5500 as its primary color and Inter for typography, with 8px corner radius. 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
#FF5500
Typography
Inter
Radius
8px
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

button-primary
Background#3d3d3d
Text#f9f9f9
Radius8px
Font16px / 400
Use: Primary CTA — 시작하기 / Get started; charcoal not orange
button-pill
Background#f9f9f9
Text#222222
Radius35px
Padding0 16px
Font16px / 400
Use: New question / chip re-entry in left rail
button-camera
Background#f9f9f9
Text#222222
Radius9999px
Use: Signature image-upload / camera CTA, 44px hit target
button-text
Backgroundtransparent
Text#222222
Use: Nav links, active by color contrast; inactive #999999

Badges

badge
badge-accent
Background#ff5500
Text#ffffff
Radius9999px
Use: Promotional badges, NEW markers, premium flags
chip
chip
Background#f9f9f9
Text#222222
Radius35px
Padding0 16px
Use: Chips/tags; orange variant #ff5500 fg #ffffff
badge
badge-success
Background#ecf7f4
Text#0d9974
Use: Correct-answer 정답이에요 in 풀이 첨삭

Cards

card
card
Background#ffffff
Radius24px
Use: Feature cards, 1px #f0f0f0 border, minimal shadow

Inputs

input
Background#ffffff
Radius24px
Padding12px 16px
Use: Conversation bar, 1px #f0f0f0 border, placeholder #999999

Related design systems