# Duolingo에서 영감을 받은 디자인 시스템

> Category: 생산성 & SaaS
> 언어 학습 플랫폼. 밝은 올빼미 그린, 굵직한 그림자, 게임화된 즐거움.

## 1. 비주얼 테마와 분위기

Duolingo는 시각 언어로 표현된 게임화 디자인입니다. 인터페이스는 거리낌 없이 밝으며, **올빼미 그린**(`#58cc02`)을 브랜드 프라이머리로 사용하고 모든 인터랙티브 요소 하단에 4px의 굵직한 그림자를 두어 눌리기를 기다리는 3D 버튼처럼 보입니다. 페이지는 흰색(`#ffffff`)이며 2–3px의 굵은 테두리는 진한 회색(`#e5e5e5`)으로, 전체 시스템은 더 나은 계층 구조로 재탄생한 2015년 iOS 앱처럼 읽힙니다.

타이포그래피는 크롬에 **Feather Bold**(커스텀 둥근 산세리프), 본문에 **Mona Sans**(또는 Inter)를 사용합니다. 디스플레이 크기는 크고 자신감 넘치며——Duolingo는 절대 속삭이지 않습니다. 제목에는 종종 초록색 밑줄 획이 있거나 초록색 필 위에 올라가며, 마스코트 Duo(초록색 올빼미)는 정적인 로고가 아닌 활동적인 일러스트 캐릭터로 등장합니다.

형태 언어는 친근합니다: 카드에 16–20px 반지름, 버튼에 12px, 칩과 프로그레스 바에 9999px. 아이코노그래피는 채워진 형태의 둥근 스타일이며 스킬별로 색상이 코딩되어——모든 레슨 화면에는 즉시 식별 가능한 색상 쌍이 있습니다.

**주요 특징:**
- 올빼미 그린(`#58cc02`)이 지배적인 브랜드 컬러로 서페이스의 30% 이상 사용
- 모든 버튼에 4px 굵직한 바텀 그림자("촉각적 누름" 어포던스)
- 2–3px 솔리드 테두리, 헤어라인은 절대 사용 안 함
- Feather Bold(둥근 디스플레이) + Mona Sans(본문)
- 크고 자신감 넘치는 텍스트——디스플레이 크기는 48px에서 시작해 올라감
- 마스코트=캐릭터: Duo 올빼미가 온보딩, 오류, 스트릭에 등장
- 스트릭 오렌지(`#ff9600`)와 젬 핑크(`#ce82ff`)가 세컨더리 브랜드 컬러

## 2. 컬러 팔레트와 역할

### 프라이머리
- **올빼미 그린**(`#58cc02`): 브랜드 프라이머리, 주요 CTA, 정답.
- **올빼미 그린 딥**(`#58a700`): 초록 버튼의 누름/그림자 색상.
- **올빼미 그린 라이트**(`#89e219`): 호버, 소프트 필.
- **올빼미 그린 페일**(`#dbf8c5`): 소프트 서페이스, 성공 배너.

### 세컨더리 악센트
- **스트릭 오렌지**(`#ff9600`): 스트릭 카운터, 불꽃 아이콘, 프리미엄 에너지.
- **스트릭 오렌지 딥**(`#cc7a00`): 오렌지 눌림 상태.
- **젬 핑크**(`#ce82ff`): 젬 화폐, Super Duolingo.
- **장어 블루**(`#1cb0f6`): 힌트 버튼, 정보 링크.
- **카디널 레드**(`#ff4b4b`): 오답, 목숨 소실.
- **비 옐로우**(`#ffc800`): 프로 배지, 업적.

### 서페이스
- **스노우**(`#ffffff`): 프라이머리 배경.
- **장어**(`#f7f7f7`): 섹션 구분, 세컨더리 서페이스.
- **스완**(`#e5e5e5`): 비활성화 배경, 인셋 블록.
- **울프**(`#777777`): 다크 구분선, 세컨더리 텍스트.

### 잉크 & 텍스트
- **장어 블랙**(`#3c3c3c`): 프라이머리 텍스트.
- **울프**(`#777777`): 세컨더리 텍스트, 캡션.
- **헤어**(`#afafaf`): 비활성화, 플레이스홀더.

### 테두리
- **스완**(`#e5e5e5`): 표준 2px 테두리.
- **헤어**(`#afafaf`): 호버 시 강조 테두리.

## 3. 타이포그래피 규칙

### 폰트 패밀리
- **디스플레이 / UI / 제목**: `Feather Bold`, 폴백: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
- **본문 / 장문**: `Mona Sans`, 폴백: `'Helvetica Neue', system-ui, sans-serif`
- **코드 (드물게, 학교/관리)**: `JetBrains Mono`, 폴백: `ui-monospace, Menlo, monospace`

### 계층 구조

| 역할 | 폰트 | 크기 | 굵기 | 줄간격 | 자간 | 비고 |
|------|------|------|--------|-------------|----------------|-------|
| 디스플레이 | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | 온보딩 히어로 |
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | 페이지 제목 |
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | 섹션 제목 |
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | 카드 제목, 레슨 행 |
| 본문 라지 | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | 레슨 프롬프트, 안내 |
| 본문 | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | 표준 산문 |
| 캡션 | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP 카운터, 메타데이터 |
| 버튼 | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | 표준 버튼 레이블 |
| 스트릭 | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | 스트릭 숫자, 불꽃 위 |

### 원칙
- **800이 기본값**: Feather Bold는 제목과 버튼에서 800으로 실행됩니다. 이 시스템에서 700은 약하게 보입니다.
- **큰 타입**: 제목 크기가 일반적인 제품 브랜드보다 25–40% 더 크며——자신감이 곧 정체성입니다.
- **둥근 글자꼴**: 모든 글리프에 부드러운 끝부분이 있습니다. 날카로운 세리프는 친근함의 계약을 깨뜨립니다.

## 4. 컴포넌트 스타일링

### 버튼

**프라이머리 (올빼미 그린)**
- 배경: `#58cc02`
- 텍스트: `#ffffff`
- 패딩: 14px 24px
- 반지름: 16px
- 바텀 테두리: 4px solid `#58a700` (굵직한 그림자)
- 호버: 배경 `#89e219`
- 액티브: translate-y 4px, 바텀 테두리 0 (버튼 "눌림")
- 사용: "계속", "확인", 메인 CTA.

**세컨더리 (바텀 그림자가 있는 흰색)**
- 배경: `#ffffff`
- 텍스트: `#777777`
- 테두리: 2px solid `#e5e5e5`
- 바텀 테두리: 4px solid `#e5e5e5`
- 반지름: 16px
- 패딩: 14px 24px
- 호버: 텍스트 `#3c3c3c`, 테두리 `#afafaf`

**스트릭 오렌지**
- 배경: `#ff9600`
- 텍스트: `#ffffff`
- 바텀 테두리: 4px solid `#cc7a00`
- 사용: 스트릭 목표, "스트릭 시작"

**에러 (카디널 레드)**
- 배경: `#ff4b4b`
- 텍스트: `#ffffff`
- 바텀 테두리: 4px solid `#cc3b3b`
- 사용: 오답 피드백.

### 카드 / 레슨 타일
- 배경: `#ffffff`
- 테두리: 2px solid `#e5e5e5`
- 바텀 테두리: 4px solid `#e5e5e5`
- 반지름: 16px
- 패딩: 16px
- 호버: 2px 상승, 그림자 `0 4px 0 #d7d7d7`

### 스킬 트리 노드 (레슨 버블)
- 크기: 80×72px
- 배경: 스킬 색상 tint (활성화는 초록, 잠김은 회색)
- 바텀 테두리: 6px solid 더 어두운 변형
- 반지름: 50% (원형)
- 활성화: 1.6s마다 1.0 → 1.05 펄스

### 입력
- 배경: `#ffffff`
- 테두리: 2px solid `#e5e5e5`
- 반지름: 12px
- 패딩: 12px 16px
- 포커스: 테두리 `#1cb0f6` (장어 블루), 링 `0 0 0 3px rgba(28, 176, 246, 0.2)`

### 프로그레스 바
- 트랙: `#e5e5e5`
- 필: `#58cc02` (또는 스트릭 시 `#ff9600`)
- 반지름: 9999px
- 높이: 16px
- 애니메이션 필: 증가 시 320ms ease-out.

## 5. 간격 & 레이아웃

- **기본 단위**: 4px. 스케일: 4, 8, 12, 16, 24, 32, 48, 64.
- **컨테이너**: 최대 1080px, 24px 거터.
- **레슨 트리 열**: 너비 320px; 데스크톱에서 중앙 정렬.

## 6. 모션

- **지속시간**: 버튼 누름 180ms; 스킬 노드 잠금 해제 320ms; 활성 노드 펄스 1.6s.
- **이징**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (백아웃, 약간의 오버슈트) 잠금 해제용.
- **마스코트**: Duo는 4–6s마다 눈을 깜빡이고, 스트릭 마일스톤에서 점프 (480ms ease-out 스프링).

## 7. 사용 가이드라인

- 고채도 올빼미 그린, 굵직한 바텀 그림자, 둥근 레슨 기하학적 요소를 함께 유지하세요. 평평한 초록 버튼 단독으로는 Duolingo처럼 읽히지 않습니다.
- 특대형 볼드 타입은 제품이 격려나 피드백이 필요한 레슨, 스트릭, 진행 상황 순간을 위해 아껴두세요.
- 플레이풀한 모션은 진행 상태 변화 주변에 절제하여 사용하고, 모든 컨트롤에 일반적인 바운시 애니메이션을 사용하는 것은 피하세요.