Duolingo

The design feels like an energetic, gamified classroom. Its core is built on a trinity of exuberant choices: the plump, ultra-rounded 'Feather' headline font, the vibrant 'Duo Green' that saturates all primary actions and logos, and the cast of charming, blob-like character illustrations. The layout uses vast white space as a clean canvas, making these colorful elements pop. A signature detail is the 3D-style button, which uses a solid bottom shadow to feel tactile and pressable, a stark contrast to the otherwise flat UI. The entire experience is crafted to feel fun, friendly, and encouraging, turning language learning from a chore into a game. Use 'Duo Green' '#58cc02' for all primary CTAs and brand-voice headlines. Apply a 12px border-radius to all interactive UI components like buttons and inputs. Use the 'feather' font exclusively for large, impactful headlines (48px+). Create depth on primary buttons with a solid, darker green bottom 'shadow' (e.g., box-shadow: 0 4px 0 #3f8f01). Pair every major content section with a large, on-brand character illustration. Use 'Sky Blue' '#1cb0f6' for all secondary interactive elements like outline buttons and text links. Set body copy and UI text with 'din-round' and its distinctive letter-spacing: 0.053em. Don't use sharp corners on any UI element. Don't use any color other than 'Duo Green' '#58cc02' for the main 'Get Started' action. Don't use the 'feather' headline font for small text or body copy. Don't apply traditional box-shadow for elevation on panels or cards. Don't create text links in any color other than 'Sky Blue' '#1cb0f6'. Don't use system fonts; the custom 'feather' and 'din-round' styles are integral to the brand. Don't design a section without considering its accompanying illustration.