Duolingo Path — Tactile Inflated 3D Stepping Stones & Depressable Lip Buttons
Claymorphism / Inflated 3D Matte · product UI flow · via Mobbin
Source: pending · Classification: pending
- Steal · component patternNotes by Will
Construct primary action buttons with a border-bottom: 4px solid #46a302 extruded lip that translates translateY(4px) and zeroes border-bottom-width on :active, delivering physical arcade-button feedback in pure CSS.
- Steal · grid/layoutNotes by Will
Arrange lesson nodes along a sinusoidal S-curve vertical path so a 50-lesson curriculum reads as a spatial board game rather than a long checklist.
Fonts: DIN Next Rounded, Nunito · Original: Duolingo Design
private-reference-only
View original ↗Source & usage rights
Original: Duolingo Design. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-07. Capture does not establish source verification.