Duolingo Styleguide

在云境TS 中打开并复制 →

内容预览

Fonts Primary font: 'Nunito' from Google Fonts (weights: 400, 500, 600, 700, 800, 900) Display/heading font: 'Feather Bold' from https://db.onlinewebfonts.com/c/14936bb7a4b6575fd2eee80a3ab52cc2?family=Feather+Bold Font stack fallback: 'Nunito', 'DIN Round Pro', -apple-system, BlinkMacSystemFont, sans-serif Color Variables (CSS custom properties) --green: rgb(88, 204, 2) --green-hover: rgb(75, 178, 0) --green-shadow: #61B800 --dark-blue: rgb(16, 15, 62) --blue: rgb(28, 176, 246) --gray-text: rgb(75, 75, 75) --gray-light: rgb(119, 119, 119) --border-color: rgb(229, 229, 229) --nav-text: rgb(175, 175, 175) --footer-green: #4EC604 --red: #FF4B4B --orange: #FF9600 --golden: #FFC800 Structure & Layout Fixed Navbar (64px height, white background, bottom border) Left side: Duolingo logo image (https://d35aaqx5ub95lt.cloudfront.net/images/splash/f92d5f2f7d56636846861c458c0d0b6c.svg, 140x33px), followed by a 1px vertical divider (24px tall), then "STYLE GUIDE" label (11px, uppercase, letter-spacing 1.5px, gray) Right side: Horizontal nav links - "Colors", "Type", "Buttons", "Cards", "Components" (13px, bold, uppercase, 0.5px letter-spacing, gray, with green hover/active states and subtle green background on hover) Max-width: 1440px, centered Hero Section (centered, green-to-white gradient background) Headline: "duolingo design" in Feather Bold font, 52px, green color (#58CC02), lowercase Description: "A comprehensive visual reference for the Duolingo design system covering colors, typo

……（完整源码请在站内查看）