{"id":"7088d695-362b-4e09-b325-fa8136d4f350","name":"Duolingo","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/7088d695-362b-4e09-b325-fa8136d4f350","originalSiteUrl":"https://duolingo.com","capturedAt":"2026-04-11T17:48:57.053Z","colors":[{"name":"Duo Green","hex":"#58cc02","role":"Primary CTAs, logos, headlines, interactive highlights — the brand's key signifier of action and identity.","group":"brand","cssVariable":"--color-duo-green"},{"name":"Sky Blue","hex":"#1cb0f6","role":"Secondary outline buttons, inline text links — provides a clear, alternative interactive cue.","group":"accent","cssVariable":"--color-sky-blue"},{"name":"Duo Green Light","hex":"#d7ffb8","role":"Background tints for highlighted or active states, often paired with Duo Green.","group":"brand","cssVariable":"--color-duo-green-light"},{"name":"Sunshine Yellow","hex":"#ffc700","role":"Used exclusively within illustrations for pops of warmth and energy.","group":"accent","cssVariable":"--color-sunshine-yellow"},{"name":"Grape Soda","hex":"#a570ff","role":"Used exclusively within illustrations as a cool, playful accent.","group":"accent","cssVariable":"--color-grape-soda"},{"name":"Bubblegum Pink","hex":"#cc348d","role":"Used exclusively within illustrations for vibrant, friendly details.","group":"accent","cssVariable":"--color-bubblegum-pink"},{"name":"Snow White","hex":"#ffffff","role":"Page backgrounds, button text, card surfaces.","group":"neutral","cssVariable":"--color-snow-white"},{"name":"Cloud Gray","hex":"#e5e5e5","role":"Borders for secondary buttons and dividers.","group":"neutral","cssVariable":"--color-cloud-gray"},{"name":"Silver","hex":"#afafaf","role":"Placeholder text, disabled states, secondary info text.","group":"neutral","cssVariable":"--color-silver"},{"name":"Graphite","hex":"#777777","role":"Body copy, descriptive text.","group":"neutral","cssVariable":"--color-graphite"},{"name":"Charcoal","hex":"#4b4b4b","role":"Subheadings, secondary headlines.","group":"neutral","cssVariable":"--color-charcoal"},{"name":"Almost Black","hex":"#3c3c3c","role":"Primary body and UI text.","group":"neutral","cssVariable":"--color-almost-black"}],"typography":[{"role":"Used exclusively for large, impactful headlines (H1, H2). Its extremely rounded, heavy, and slightly condensed character gives the brand its signature playful and confident voice.","sizes":"48px, 64px","family":"feather","weight":"700","lineHeight":"1.20","substitute":"Fredoka One, Baloo 2","letterSpacing":"-0.02em"},{"role":"The workhorse font for all UI text, body copy, and buttons. The noticeably wide letter-spacing (`0.053em`) is a key trait, creating a very open and readable texture. Weight 700 is used for buttons and emphasized text.","sizes":"13px, 14px, 15px, 17px, 19px, 32px","family":"din-round","weight":"500, 700","lineHeight":"1.15-1.47","substitute":"Nunito Sans, Varela Round","letterSpacing":"0.053em"}],"spacing":{"radius":{"cards":"12px","inputs":"12px","buttons":"12px"},"elementGap":"16px","sectionGap":"80-120px","cardPadding":"24px","pageMaxWidth":"1140px"},"radius":{"cards":"12px","inputs":"12px","buttons":"12px"},"shadows":{"philosophy":"The system is intentionally flat, avoiding traditional shadows for elevation. Depth is created exclusively on primary buttons using a solid, darker-hue bottom border (emulated via `box-shadow`) that mimics a physical button pad. All other elements like cards and containers remain flat on the Snow White page background."},"guidelines":{"do":["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`."],"dont":["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."]}}