디자인 시스템 갤러리 Duolingo

Duolingo

Duo 부엉이 마스코트와 굵은 라운드 그림자의 게임화 학습 톤

서양소비자라이프스타일차가운humanismmodern-minimal디자인폰트comfortableroundlayered라이트다크한글 지원출시 2011개정 2024

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

  • 브랜드명: Duolingo
  • 한 줄 정체성: 게임처럼 매일 5분, 부엉이가 채찍질하는 언어 학습 앱
  • 공식 디자인 철학: "Make learning fun and effective — playful, mascot-led, gamified"
  • 시그니처 요소 1개: Duo 부엉이 마스코트 + Duolingo Green(#58CC02) + 모든 버튼의 4px 하단 그림자(누르면 들어가는 게임 톤)

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 게임화, 친근함, 활기참
  • 무드 설명: 선명한 배경 위 굵은 라운드 형태와 색이 풍부한 학습 카드가 리듬을 만든다. 게임 UX의 핵심인 "버튼 눌림" 효과(box-shadow를 더 어두운 짝색으로 4px)가 주요 인터랙션에 반복된다.
  • 비주얼 스타일: 휴머니즘 + 모던 미니멀 (mascot)
  • 밀도(Density): Comfortable — 큰 터치 타깃
  • 모서리 성향: Round (12~24px)
  • 평면성: Layered — 컬러 그림자(skeumorphic-like)

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Duolingo Green */
  --color-primary-50:  #E5F8D5;
  --color-primary-100: #C2EFA4;
  --color-primary-200: #94E368;
  --color-primary-300: #6FD432;
  --color-primary-400: #58CC02;  /* 기본 */
  --color-primary-500: #58CC02;
  --color-primary-600: #58A700;     /* 그림자 색 */
  --color-primary-700: #46850A;
  --color-primary-800: #336107;
  --color-primary-900: #1F3D04;

  /* Secondary - Duolingo Blue (correct answer) */
  --color-secondary-500: #1CB0F6;

  /* Accent colors */
  --color-streak: #FF9600;        /* 불꽃 */
  --color-gem:    #1CB0F6;        /* 보석 */
  --color-heart:  #FF4B4B;        /* 하트 */

  /* Neutral - warm */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F7;
  --color-neutral-100:  #F1F1F1;
  --color-neutral-200:  #E5E5E5;
  --color-neutral-300:  #C7C7C7;
  --color-neutral-500:  #AFAFAF;
  --color-neutral-700:  #777777;
  --color-neutral-800:  #4B4B4B;
  --color-neutral-900:  #3C3C3C;
  --color-neutral-1000: #1F1F1F;

  /* Semantic */
  --color-success-bg: #E5F8D5;
  --color-success-fg: #58CC02;
  --color-warning-bg: #FFF1D9;
  --color-warning-fg: #FF9600;
  --color-error-bg:   #FFE0E0;
  --color-error-fg:   #FF4B4B;
  --color-info-bg:    #DDF4FE;
  --color-info-fg:    #1CB0F6;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F7F7F7;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(60,60,60,0.50);

  /* Text */
  --text-primary:    #3C3C3C;
  --text-secondary:  #777777;
  --text-tertiary:   #AFAFAF;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #C7C7C7;

  /* Border */
  --border-default: #E5E5E5;
  --border-subtle:  #F1F1F1;
  --border-strong:  #C7C7C7;
  --border-focus:   #58CC02;
}

[data-theme="dark"] {
  --color-success-bg: #1C3C12;
  --color-warning-bg: #3D310A;
  --color-error-bg:   #442327;
  --color-info-bg:    #102F3D;
  --bg-base:     #131F24;
  --bg-subtle:   #17272E;
  --bg-elevated: #202F36;
  --bg-overlay:  rgba(0,0,0,0.68);
  --text-primary:    #F1F7FB;
  --text-secondary:  #AFAFAF;
  --text-tertiary:   #7F939C;
  --text-on-primary: #15240A;
  --text-disabled:   #52656D;
  --border-default: #37464F;
  --border-subtle:  #263941;
  --border-strong:  #52656D;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문: Feather Bold (Duolingo 자체 서체) / DIN Round Pro — 폴백 Arial Rounded MT Bold
    • 한글: Pretendard (OFL) / Apple SD Gothic Neo
  • 위계:
    • Display: 56px / 800 / 1.05 / -0.02em
    • H1: 32px / 800 / 1.15 / -0.01em
    • H2: 22px / 800 / 1.27 / 0
    • H3: 17px / 800 / 1.3 / 0
    • Body Large: 16px / 700 / 1.5 / 0
    • Body: 14px / 700 / 1.43 / 0
    • Body Small: 13px / 700 / 1.43 / 0
    • Caption: 11px / 800 / 1.27 / 0.04em (uppercase)

Spacing

스페이싱

  • Base unit: 4px
  • 토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 64px; ``
  • Container: max-width 540px (앱 콘텐츠), 좌우 패딩 16px

Border Radius

Border Radius

--radius-none: 0;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation

시그니처 — 모든 액션 element는 컬러 다운(2-shade darker) 4px 하단 그림자:

--shadow-none: none;
--shadow-button: 0 4px 0 var(--color-primary-600);    /* primary 버튼 */
--shadow-card: 0 4px 0 var(--color-neutral-200);
--shadow-sm: 0 2px 0 rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.14);
--shadow-xl: 0 16px 32px rgba(88,204,2,0.30);

Iconography

Iconography

  • 스타일: Filled + 일러스트레이션 (mascot 친화)
  • Stroke 굵기: N/A (filled)
  • 모서리 처리: Round
  • 추천 라이브러리: 자체 일러스트 + Lucide 폴백

Component Guide

컴포넌트 가이드

Button (시그니처 — 4px shadow)

.btn {
  font: 800 14px/1 'Feather Bold','DIN Round Pro','Pretendard',sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.btn-primary { background: var(--color-primary-500); color: #fff; box-shadow: 0 4px 0 var(--color-primary-600); }
.btn-primary:hover { background: var(--color-primary-300); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-primary-600); }
.btn-primary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); box-shadow: 0 4px 0 var(--color-neutral-300); }

.btn-secondary { background: #fff; color: var(--color-secondary-500); border: 2px solid var(--border-default); box-shadow: 0 4px 0 var(--border-default); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost { background: transparent; color: var(--text-primary); box-shadow: none; }
.btn-danger { background: var(--color-error-fg); color: #fff; box-shadow: 0 4px 0 #C73A3A; }

Input

.input {
  background: var(--bg-base);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--border-default);
}
.input:focus { outline: none; border-color: var(--color-secondary-500); box-shadow: 0 4px 0 var(--color-secondary-500); }

Card (Lesson card)

.card { background: #fff; border: 2px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-card); }
.card-elevated { box-shadow: 0 6px 0 var(--border-default); }
.card-outlined { box-shadow: none; }

Badge / Streak/XP

.tag { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 800; line-height: 18px; display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.tag-solid   { background: var(--color-primary-500); color: #fff; }
.tag-subtle  { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 2px solid var(--border-default); color: var(--text-primary); }
.streak { color: var(--color-streak); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.gem    { color: var(--color-gem); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.heart  { color: var(--color-heart); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }

Navigation

.topnav { padding: 12px 16px; display: flex; align-items: center; gap: 12px; background: var(--bg-base); border-bottom: 2px solid var(--border-default); }
.topnav .brand { color: var(--color-primary-500); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }

Motion

Motion

--duration-fast: 80ms;
--duration-base: 200ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* 정답 셀렉트 시 spring */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

Anti-patterns

Anti-patterns

1. button에 4px 하단 그림자 제거 금지 — Duolingo 시그니처 (눌리는 효과) 2. 본문에 thin (300~400) 폰트 사용 금지 — 700+ Bold가 시그니처 3. Duo 부엉이 마스코트를 임의 색 변경 금지 4. streak/gem/heart 의미 색을 임의 매핑 금지 5. 정답/오답 신호를 색만으로 표현 금지 — 사운드 + 애니메이션 동반

Sources

출처

  1. https://www.duolingo.com/
  2. https://design.duolingo.com/
  3. https://blog.duolingo.com/