{"id":"7088d695-362b-4e09-b325-fa8136d4f350","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Duolingo","summary":"Playground Starter Kit","description":"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.","tags":["playful","gamification","rounded","bold","illustration-heavy","high-contrast","friendly","vibrant","flat-ui"],"industry":"other","colorScheme":"light","colors":[{"name":"Duo Green","hex":"#58cc02","role":"Primary CTAs, logos, headlines, interactive highlights — the brand's key signifier of action and identity.","group":"brand"},{"name":"Sky Blue","hex":"#1cb0f6","role":"Secondary outline buttons, inline text links — provides a clear, alternative interactive cue.","group":"accent"},{"name":"Duo Green Light","hex":"#d7ffb8","role":"Background tints for highlighted or active states, often paired with Duo Green.","group":"brand"},{"name":"Sunshine Yellow","hex":"#ffc700","role":"Used exclusively within illustrations for pops of warmth and energy.","group":"accent"},{"name":"Grape Soda","hex":"#a570ff","role":"Used exclusively within illustrations as a cool, playful accent.","group":"accent"},{"name":"Bubblegum Pink","hex":"#cc348d","role":"Used exclusively within illustrations for vibrant, friendly details.","group":"accent"},{"name":"Snow White","hex":"#ffffff","role":"Page backgrounds, button text, card surfaces.","group":"neutral"},{"name":"Cloud Gray","hex":"#e5e5e5","role":"Borders for secondary buttons and dividers.","group":"neutral"},{"name":"Silver","hex":"#afafaf","role":"Placeholder text, disabled states, secondary info text.","group":"neutral"},{"name":"Graphite","hex":"#777777","role":"Body copy, descriptive text.","group":"neutral"},{"name":"Charcoal","hex":"#4b4b4b","role":"Subheadings, secondary headlines.","group":"neutral"},{"name":"Almost Black","hex":"#3c3c3c","role":"Primary body and UI text.","group":"neutral"}],"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"}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.4,"letterSpacing":0.69},{"role":"body","size":15,"lineHeight":1.4,"letterSpacing":0.8},{"role":"heading-sm","size":19,"lineHeight":1.2,"letterSpacing":1.01},{"role":"heading","size":32,"lineHeight":1.2,"letterSpacing":1.7},{"role":"heading-lg","size":48,"lineHeight":1.2,"letterSpacing":-0.96},{"role":"display","size":64,"lineHeight":1.2,"letterSpacing":-1.28}],"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."]},"components":[{"name":"CTA Button Group","role":""},{"name":"Language Selector Bar","role":""},{"name":"Feature Section — Free Fun Effective","role":""},{"name":"Green Headline","role":"Feature section titles like 'free. fun. effective.'"},{"name":"Character Illustration","role":"Visual anchors for every major page section."},{"name":"Inline Text Link","role":"Clickable text within a paragraph."},{"name":"Language Flag Item","role":"Used in the language selector list."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- **Page Background**: `#ffffff` (Snow White)\n- **Primary Text**: `#3c3c3c` (Almost Black)\n- **Primary CTA**: `#58cc02` (Duo Green)\n- **Secondary Action**: `#1cb0f6` (Sky Blue)\n- **Borders**: `#e5e5e5` (Cloud Gray)\n\n### Example Component Prompts\n1. **Primary Button**: \"Create a button with 'GET STARTED' text. Background is '#58cc02', text is '#ffffff'. Use a 12px border-radius. Font is 'din-round' at 15px, weight 700. Padding is 16px 32px. Add a `box-shadow: 0 4px 0 #3f8f01`.\"\n2. **Headline**: \"Create a headline 'free. fun. effective.'. Font is 'feather' at 64px, weight 700. Color is '#58cc02'. Set letter-spacing to -1.28px.\"\n3. **Outline Button**: \"Create an outline button with 'I ALREADY HAVE AN ACCOUNT' text. Background is transparent. Text color is '#1cb0f6'. Border is 2px solid '#e5e5e5'. Use a 12px border-radius. Font is 'din-round' at 15px, weight 700. Padding is 14px 24px.\""}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775929658899-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775929658899-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/7088d695-362b-4e09-b325-fa8136d4f350-1777555799801-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/7088d695-362b-4e09-b325-fa8136d4f350-1777555799801-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/7088d695-362b-4e09-b325-fa8136d4f350-1777555799801-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/7088d695-362b-4e09-b325-fa8136d4f350-1777555799801-preview-detail-poster.jpg"},"similarStyleIds":["72b85d0a-1ff8-4dd3-b33a-f55aad6df5c9","528eb1d4-8508-4dc6-87b4-c7b92d648dac","476fea7c-d578-4625-b9e6-36e95faa6ca4","a122b132-2259-41ca-a301-4468dd17a386","3e5c272b-8d68-40d8-9726-b4d6914b4b16","79b4ebc4-30f6-45b6-b2d2-922e28e05ca9","90b8631c-4e2c-407e-86a3-d2bff456dc93","b5ca4e9a-2322-4796-b4c5-3b3bf194821f","f93ac72e-73b2-4b2c-80eb-351ddfa56f4d","d67e1407-6d16-47e8-89cf-22f5c5f2dd88","3677bc04-7461-4aa4-aec7-5291bac41b0b","a6fa9927-43a8-49fc-87ea-a41407766af3","fae6a5ec-f32e-4151-bc22-350055d673f7","6b201ccd-16ae-4c2d-84bb-498f7cb568dd","a80507cb-afda-46dd-a2b9-ba91f3a78e78","faec4b0c-cf93-4150-97de-0a8e7eed1840","51752cfb-4fd4-464f-8b78-ecbc813830e1","0c77bb2a-c7cd-499b-b5cd-90268eefe906","d91ae311-ba5c-461a-8895-eb0aed6585b4","dae5e893-ca18-44c3-8f83-358cb52af237"],"exports":{"designMdUrl":"/references/refero/7088d695-362b-4e09-b325-fa8136d4f350/design.md","tokensJsonUrl":"/references/refero/7088d695-362b-4e09-b325-fa8136d4f350/tokens.json","tailwindV4Url":"/references/refero/7088d695-362b-4e09-b325-fa8136d4f350/tailwind-v4.css","cssVariablesUrl":"/references/refero/7088d695-362b-4e09-b325-fa8136d4f350/tailwind-v4.css"}}