디자인 시스템
web
v1.0.0
90/100

Duolingo Owl

@dante · Education

Gamified learning UI kit with bright owl green, chunky 4px press shadows, and bold rounded type — joyful, tactile, and unmistakably Duo.

HTML/CSS
React
shadcn/ui
Tailwind
#education
#gamification
#playful
#rounded
Duolingo Owl
다운로드4
패키지 JSON 다운로드
DESIGN.mdSKILL.md

개요

Duolingo Owl

Atmosphere

Gamification rendered as visual language. Bright, tactile, unapologetically loud. The interface treats every interactive element like a 3D button waiting to be pressed — chunky 4px bottom shadows compress on tap, 2–3px solid borders never thin into hairlines, and Duo the owl green (#58cc02) saturates roughly 30% of the surface. The page reads like a 2015 iOS app reborn with better hierarchy and bolder type.

Color

Owl green leads. Streak orange (#ff9600) anchors the streak/energy economy, gem pink (#ce82ff) signals premium currency, eel blue (#1cb0f6) handles hints and links, and cardinal red (#ff4b4b) is reserved exclusively for wrong-answer feedback. Snow white (#ffffff) is the base canvas; pale green (#dbf8c5) softens success banners. Every CTA pairs its fill with a darker pressed-shadow swatch — #58a700 under green, #cc7a00 under orange.

Typography

Feather Bold is the chrome face — rounded, friendly, set at weight 800 across headings and buttons. Mona Sans handles body text. Display sizes start at 56px and never apologize. Headings always weight 800; 700 reads weak in this system. Letterforms are rounded; sharp serifs would break the friendliness contract.

Shape & Spacing

Radius language is generous: 16–20px on cards, 12px on inputs, 9999px on chips, pills, and progress bars. Skill-tree bubbles are circular (50%) with a 6px darker bottom border. Spacing follows a 4px base scale (4, 8, 12, 16, 24, 32, 48, 64). Containers cap at 1080px with 24px gutters.

Motion

180ms compress on every button press; 320ms back-out for skill-node unlocks using cubic-bezier(0.34, 1.56, 0.64, 1) for a slight overshoot. Active lesson bubbles pulse 1.0 → 1.05 every 1.6s. Duo blinks every 4–6 seconds and jumps on streak milestones. Motion is rewarding, never decorative.

Voice in UI

Buttons SHOUT in uppercase Feather Bold. Footers whisper in lowercase Mona Sans. The mascot, not the copywriting, carries the personality.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (17)

owlGreen
#58cc02
owlGreenDeep
#58a700
owlGreenLight
#89e219
owlGreenPale
#dbf8c5
streakOrange
#ff9600
streakOrangeDeep
#cc7a00
gemPink
#ce82ff
eelBlue
#1cb0f6
cardinalRed
#ff4b4b
cardinalRedDeep
#cc3b3b
beeYellow
#ffc800
snow
#ffffff
eel
#f7f7f7
swan
#e5e5e5
wolf
#777777
eelBlack
#3c3c3c
hare
#afafaf

타이포그래피 (5)

display
Feather Bold, 'DIN Round Pro', 'Helvetica Neue', system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
heading
Feather Bold, 'DIN Round Pro', 'Helvetica Neue', system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
Mona Sans, 'Helvetica Neue', system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
JetBrains Mono, ui-monospace, Menlo, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
scale
unparsed
{
  "display": "56px/1.05",
  "h1": "32px/1.15",
  "h2": "24px/1.2",
  "h3": "18px/1.25",
  "bodyLarge": "17px/1.5",
  "body": "15px/1.5",
  "caption": "13px/1.4",
  "button": "16px/1.2"
}

컴포넌트 (16)

Button

Pill-cornered CTA with chunky 4px bottom border that compresses on press for a tactile 3D feel.

html
Hand-tuned CSS, no framework
1 props · 6 states · 9 tags · 2 소스

Input

Rounded 12px input with eel-blue focus ring; thick 2px borders, never hairlines.

html
Hand-tuned CSS
1 props · 5 states · 3 tags · 2 소스

Card

White surface with 2px border + 4px bottom shadow; lifts 2px on hover.

html
Hand-tuned CSS
0 props · 3 states · 4 tags · 2 소스
누락 상태: focus-visible, disabled

Badge

Bold pill chip used for XP gains, achievement labels, and 'NEW' callouts.

html
Hand-tuned CSS
1 props · 1 states · 9 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Heading

Display + H1/H2/H3 stack in Feather Bold 800 — confident, oversized.

html
Hand-tuned CSS
0 props · 1 states · 8 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Link

Eel-blue inline link with bold weight; underline appears on hover only.

html
Hand-tuned CSS
0 props · 4 states · 2 tags · 2 소스
누락 상태: disabled

Hero

Onboarding hero with mascot, oversized display heading, and a chunky primary CTA.

html
Hand-tuned CSS
0 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Nav

Top nav with mascot logo, current section pill, streak counter, gem counter.

html
Hand-tuned CSS
0 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Footer

Light footer with link columns; minimal, never decorative.

html
Hand-tuned CSS
0 props · 1 states · 6 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Stat

Bold numerical stat with caption — used for XP, streak days, lessons completed.

html
Hand-tuned CSS
0 props · 1 states · 4 tags · 2 소스
누락 상태: hover, focus-visible, disabled

ProgressBar

Pill-shaped XP progress bar with animated fill on increment.

html
Hand-tuned CSS
1 props · 1 states · 6 tags · 2 소스
누락 상태: hover, focus-visible, disabled

ChoiceTile

Multiple-choice quiz card with 2px border, 4px press shadow, keyboard hint chip, and selected/correct/wrong states.

html
Hand-tuned CSS
1 props · 6 states · 11 tags · 2 소스
누락 상태: focus-visible, disabled

HeartCounter

Lives display showing remaining hearts with empty-state outline.

html
Hand-tuned CSS
1 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

StreakBadge

Flame-iconned streak chip with day count; gradient orange and bold press shadow.

html
Hand-tuned CSS
1 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

LessonCard

Skill-tree node card with circular bubble, lock state, and progress crown.

html
Hand-tuned CSS
1 props · 3 states · 10 tags · 2 소스
누락 상태: focus-visible, disabled

Snackbar

Bottom-anchored feedback strip for correct/wrong answer reveal.

html
Hand-tuned CSS
1 props · 1 states · 8 tags · 2 소스
누락 상태: hover, focus-visible, disabled

DESIGN.md

Duolingo Owl

Atmosphere

Gamification rendered as visual language. Bright, tactile, unapologetically loud. The interface treats every interactive element like a 3D button waiting to be pressed — chunky 4px bottom shadows compress on tap, 2–3px solid borders never thin into hairlines, and Duo the owl green (#58cc02) saturates roughly 30% of the surface. The page reads like a 2015 iOS app reborn with better hierarchy and bolder type.

Color

Owl green leads. Streak orange (#ff9600) anchors the streak/energy economy, gem pink (#ce82ff) signals premium currency, eel blue (#1cb0f6) handles hints and links, and cardinal red (#ff4b4b) is reserved exclusively for wrong-answer feedback. Snow white (#ffffff) is the base canvas; pale green (#dbf8c5) softens success banners. Every CTA pairs its fill with a darker pressed-shadow swatch — #58a700 under green, #cc7a00 under orange.

Typography

Feather Bold is the chrome face — rounded, friendly, set at weight 800 across headings and buttons. Mona Sans handles body text. Display sizes start at 56px and never apologize. Headings always weight 800; 700 reads weak in this system. Letterforms are rounded; sharp serifs would break the friendliness contract.

Shape & Spacing

Radius language is generous: 16–20px on cards, 12px on inputs, 9999px on chips, pills, and progress bars. Skill-tree bubbles are circular (50%) with a 6px darker bottom border. Spacing follows a 4px base scale (4, 8, 12, 16, 24, 32, 48, 64). Containers cap at 1080px with 24px gutters.

Motion

180ms compress on every button press; 320ms back-out for skill-node unlocks using cubic-bezier(0.34, 1.56, 0.64, 1) for a slight overshoot. Active lesson bubbles pulse 1.0 → 1.05 every 1.6s. Duo blinks every 4–6 seconds and jumps on streak milestones. Motion is rewarding, never decorative.

Voice in UI

Buttons SHOUT in uppercase Feather Bold. Footers whisper in lowercase Mona Sans. The mascot, not the copywriting, carries the personality.

어댑터 (6)

전체 파일 (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

버전