Duolingo

This design system feels like a vibrant, welcoming arcade where learning is a game. The dominant vivid green (#58cc02) and rounded forms, especially the 12px border-radius buttons, create a friendly, approachable atmosphere, softening the otherwise crisp text. Typographic hierarchy is clear with distinct weights and sizes for headings and body, often anchored by a deeper neutral (#4b4b4b and #3c3c3c) that provides stability to the lively greens and blues. A crisp white background allows the saturated brand colors and whimsical illustrations to pop, fostering a sense of fun and engagement. Use Duolingo Green (#58cc02) for primary interactive elements and key accents to maintain brand recognition. Apply 12px border-radius to all buttons and prominent interactive links for a consistent friendly aesthetic. Employ feather font with weight 700 and letter-spacing -0.020em for all display-level headings to ensure visual impact. Use Arctic White (#ffffff) as the primary page background color to allow vibrant brand elements to stand out. Ensure generous elementGap of 12px and sectionGap of 101px to create a comfortable, spacious layout. Use outline Green (#a5ed6e) for secondary actions that need to align with the brand's green while differentiating from the primary filled action. Do not use feather font for body text or small UI elements; reserve it for large headings only. Avoid arbitrary color choices outside the defined palette, especially for interactive elements, to prevent dilution of brand identity. Do not use sharp corners on buttons or prominent interactive components; always apply a 12px border-radius. Do not clutter sections; maintain the 12px element gap and 101px section gap for comfortable density. Avoid using Action Blue (#1cb0f6) as a filled button background; it is reserved for outlined buttons and links. Do not use Muted Silver (#afafaf) for main headings or primary calls to action; reserve it for subtle interactive elements.