Duolingo 风格指南

字体
主字体：Google Fonts 的 'Nunito'（字重：400、500、600、700、800、900）
展示/标题字体：'Feather Bold'，来自 https://db.onlinewebfonts.com/c/14936bb7a4b6575fd2eee80a3ab52cc2?family=Feather+Bold
字体栈回退：'Nunito', 'DIN Round Pro', -apple-system, BlinkMacSystemFont, sans-serif
颜色变量（CSS 自定义属性）

--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
结构与布局
固定导航栏（高度 64px、白色背景、底部边框）
左侧：Duolingo 徽标图片（https://d35aaqx5ub95lt.cloudfront.net/images/splash/f92d5f2f7d56636846861c458c0d0b6c.svg，140x33px），后接一条 1px 垂直分隔线（高 24px），再接“风格指南”标签（11px、大写、字间距 1.5px、灰色）
右侧：水平导航链接——“颜色”“字体”“按钮”“卡片”“组件”（13px、粗体、大写、字间距 0.5px、灰色，悬停/激活状态为绿色，悬停时显示淡绿色背景）
最大宽度：1440px，居中
主视觉区（居中，绿色到白色的渐变背景）
标题：“duolingo design”，使用 Feather Bold 字体，52px，绿色（#58CC02），小写
描述：“Duolingo 设计系统的综合视觉参考，涵盖颜色、字体排印、按钮变体、卡片和 UI 组件。”——17px、gray-light 颜色、最大宽度 520px、行高 1.5
下方两个按钮：主按钮“开始使用”（绿色、白色文字、12px 圆角、4px 绿色 box-shadow 营造 3D 效果、粗体大写）和次按钮“我已有账户”（透明背景、2px 灰色边框、蓝色文字、4px 灰色 box-shadow 营造 3D 效果）
两个按钮：高度 48px、水平内边距 24px、字号 15px、字重 700、大写
按钮激活状态：移除 box-shadow，translateY(4px)
内边距：顶部 56px、左右 40px、底部 40px
主网格（2 列网格、无间隙、最大宽度 1440px）
每个面板的垂直内边距为 36px、水平内边距为 40px，并有底部边框和右侧边框（border-color）。偶数面板无右侧边框。

每个面板都有分区标签：11px、字重 800、大写、字间距 2px、灰色（nav-text），并通过 ::after 伪元素添加一条向右延伸的 1px 线条。

面板顺序（从左到右、从上到下）：

面板 1：调色板（浅色）
由 12 个色块组成的网格，grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))，间隙 12px。每个色块：

正方形（aspect-ratio: 1）、12px 圆角、1px 边框 rgba(0,0,0,0.06)
悬停：scale(1.05)，并应用 box-shadow 0 8px 24px rgba(0,0,0,0.12)
色块下方：名称（12px、粗体、gray-text）和十六进制值（10px、gray-light、半粗体）
颜色顺序：

绿色——rgb(88, 204, 2)——#58CC02
绿色悬停——rgb(75, 178, 0)——#4BB200
蓝色——rgb(28, 176, 246)——#1CB0F6
深蓝色——rgb(16, 15, 62)——#100F3E
红色——#FF4B4B
橙色——#FF9600
金色——#FFC800
页脚绿色——#4EC604
灰色文字——rgb(75, 75, 75)——#4B4B4B
浅灰色——rgb(119, 119, 119)——#777777
导航文字——rgb(175, 175, 175)——#AFAFAF
边框——rgb(229, 229, 229)——#E5E5E5
面板 2：字体排印（浅色）
垂直堆叠，间隙 20px。每行都是 flex 行（基线对齐、间隙 20px），包含一个元信息列（宽 80px、右对齐），其中字号以蓝色显示（11px、粗体），下方显示字重标签（10px、nav-text 颜色），之后是示例文字。

各行：

48px / Feather Bold——“展示”——绿色，Feather Bold 字体
32px / Bold 700——“一级标题”——gray-text 颜色
28px / Feather Bold——“二级标题”（小写）——绿色，Feather Bold 字体
18px / Medium 500——“用于段落和描述的正文，采用舒适易读的行高。”——gray-light 颜色、行高 1.6
14px / Bold 700——“说明标签”——大写、nav-text 颜色、字间距 0.5px
12px / Semi 600——“用于元数据和提示的小号辅助文字”——gray-light 颜色
面板 3：按钮变体（浅色）
垂直堆叠，间隙 16px。每行包含一个 80px 宽的标签（10px、粗体、大写、字间距 1px、nav-text），随后是间隙 12px、可换行的按钮。

各行：

“主要”——3 个按钮：“开始使用”（绿色背景、白色文字、4px 绿色阴影）、“小型”（样式相同，但高度 36px、字号 13px、内边距 16px、圆角 10px、阴影 3px）、“已禁用”（与主按钮相同，但透明度 0.45、pointer-events none）
“次要”——3 个按钮：“了解更多”（透明背景、2px #CFCFCF 边框、蓝色文字、4px #CFCFCF 阴影）、“小型”（尺寸与小型主按钮相同）、“已禁用”（透明度 0.45）
“危险”——2 个按钮：“删除”（#FF4B4B 背景、白色文字、4px #CC3C3C 阴影）、“移除”（小型变体）
“幽灵”——1 个按钮：“查看全部”（无背景/边框/阴影、绿色文字，悬停时显示透明度为 0.08 的绿色背景）
面板 4：深色主题按钮（dark-blue 背景）
分区标签和 ::after 线条分别使用透明度 35% 和 10% 的白色。

两行：

“开始使用”主按钮 + “免费试用 1 周”（白色背景、dark-blue 文字、4px #88879F 阴影，悬停背景为 #c8f040）
两者的小型变体
面板 5：卡片（浅色）
2 列网格，间隙 16px。每张卡片：白色背景、2px 边框（border-color）、16px 圆角。悬停：translateY(-4px)、box-shadow 0 12px 32px rgba(0,0,0,0.08)。

卡片 1：

图片：https://images.pexels.com/photos/4145354/pexels-photo-4145354.jpeg?auto=compress&cs=tinysrgb&w=400&h=200&fit=crop（高度 120px、cover）
标签：“全新”（绿色文字、透明度 10% 的绿色背景、11px、字重 800、大写、圆角 6px、内边距 3px/8px）
标题：“西班牙语入门”（16px、粗体、gray-text）
描述：“通过旨在培养流利度的互动课程，开启你的语言学习之旅。”（13px、gray-light、行高 1.5）
页脚（12px 顶部边框、内边距 12px/16px）：左侧“12 个单元”（12px、粗体、大写、nav-text），右侧“开始”（12px、粗体、大写、蓝色，悬停透明度 0.7）
卡片 2：

图片：https://images.pexels.com/photos/267669/pexels-photo-267669.jpeg?auto=compress&cs=tinysrgb&w=400&h=200&fit=crop
标签：“热门”（蓝色文字、透明度 10% 的蓝色背景）
标题：“法语会话”
描述：“练习真实场景对话，并与母语者一起改善发音。”
页脚：“8 个单元”/“继续”
面板 6：深色主题卡片（dark-blue 背景）
2 列网格，结构相同但无图片。卡片背景为 rgba(255,255,255,0.06)，边框为 rgba(255,255,255,0.08)。标题为白色，描述为透明度 50% 的白色，页脚边框为透明度 8% 的白色，页脚文字为透明度 30% 的白色。

卡片 1：

标签：“超级”（金色 #FFC800 文字、透明度 15% 的金色背景）
标题：“无限红心”
描述：“凭借 Super Duolingo 权益，不受打扰地持续学习。”
页脚：“高级版”/“升级”
卡片 2：

标签：“专业版”（橙色 #FF9600 文字、透明度 15% 的橙色背景）
标题：“精通测验”
描述：“通过进阶测评挑战自己，检验你的技能水平。”
页脚：“进阶”/“立即尝试”
面板 7：组件（浅色）
垂直堆叠，间隙 20px。每组都有一个标签（10px、粗体、大写、字间距 1px、nav-text）。

徽章：Flex 行，间隙 8px。胶囊形徽章（内边距 4px/10px、圆角 20px、12px、粗体、大写）：

“已完成”（绿色文字、透明度 12% 的绿色背景）
“进行中”（蓝色文字、透明度 12% 的蓝色背景）
“失败”（红色文字、透明度 12% 的红色背景）
“连续记录”（橙色文字、透明度 12% 的橙色背景）
“高级版”（金棕色 #b8920f 文字、透明度 15% 的金色背景）
输入框 + 按钮：Flex 行，间隙 12px。输入框（flex:1、高度 48px、内边距 16px、2px border-color 边框、圆角 12px、字号 15px、字重 600，聚焦时边框变为蓝色，占位文字为 nav-text 颜色、字重 500）+ 主按钮“订阅”。

开关：Flex 行，包含两个切换开关。每个开关为 48x28px。轨道背景为 border-color、圆角 14px。滑块是 22x22px 白色圆形，距边缘 3px，带 1px 3px rgba(0,0,0,0.15) 阴影。选中状态：轨道变为绿色，滑块向右 translate 20px。标签为“音效”和“动画”（14px、字重 600）。第一个开关默认选中。

进度：3 个进度条纵向排列，间隙 10px。每行：flex、间隙 12px；进度条（flex:1、高度 12px、border-color 背景、圆角 6px、overflow hidden）；填充（圆角 6px、宽度过渡 0.6s ease）；数值（12px、粗体、宽 32px、右对齐）。

85% 绿色填充
60% 蓝色填充
35% 橙色填充
工具提示与连续记录：Flex 行，间隙 16px，居中对齐。

工具提示触发器：“悬停查看”（13px、粗体、绿色文字、透明度 8% 的绿色背景、内边距 8px/16px、圆角 8px）。悬停时在上方显示工具提示气泡（dark-blue 背景、白色文字，12px、字重 600，内边距 6px/12px、圆角 8px，并通过 ::after 边框技巧添加一个 5px 向下三角箭头）。
连续记录计数器：inline-flex、间隙 6px、内边距 6px/14px、透明度 10% 的橙色背景、圆角 20px。火焰表情符号（18px）+“42”（16px、字重 800、橙色）。
面板 8：深色主题组件（dark-blue 背景）
标签使用透明度 30% 的白色。

语言胶囊：Flex 行，间隙 8px。每个胶囊：inline-flex、间隙 6px、内边距 6px/12px、2px 边框、圆角 12px、cursor pointer，悬停时边框变为绿色并显示淡绿色背景。

“西班牙语”（激活——绿色边框、透明度 8% 的绿色背景、白色文字），旗帜为 https://d35aaqx5ub95lt.cloudfront.net/vendor/59a90a2cedd48b751a8fd22014768fd7.svg
“法语”（未激活——透明度 12% 的白色边框、透明度 70% 的白色文字），旗帜为 https://d35aaqx5ub95lt.cloudfront.net/vendor/482fda142ee4abd728ebf4ccce5d3307.svg
“德语”，旗帜为 https://d35aaqx5ub95lt.cloudfront.net/vendor/c71db846ffab7e0a74bc6971e34ad82e.svg
“日语”，旗帜为 https://d35aaqx5ub95lt.cloudfront.net/vendor/edea4fa18ff3e7d8c0282de3f102aaed.svg
旗帜图片：24x18px、object-fit contain。胶囊文字：13px、粗体。
头像组：Flex 行，圆形头像相互重叠（36px、50% 圆角、2px 白色边框，除第一个头像外均设置 -8px margin-left）。图片：

https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=80&h=80&fit=crop
https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=80&h=80&fit=crop
https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=80&h=80&fit=crop
计数徽章“+5”（同样为 36px 圆形、#f0f0f0 背景、11px、字重 800、gray-light）
头像组旁的文字：“8 名学习者活跃中”（13px、字重 600、透明度 50% 的白色）
进度（深色）：2 个进度条，轨道背景为透明度 8% 的白色，数值为透明度 60% 的白色：

72% 金色填充
45% 绿色填充
徽章（深色）：

“已掌握”（透明度 15% 的绿色背景、#7ADB2E 文字）
“复习”（透明度 15% 的蓝色背景、#4DC4F8 文字）
“皇冠”（透明度 15% 的金色背景、#FFC800 文字）
响应式断点
900px 及以下：

网格变为单列，无右侧边框
主视觉 h1：36px
隐藏导航链接
卡片网格变为单列
主视觉按钮垂直堆叠，最大宽度 280px
600px 及以下：

主视觉内边距：40px 20px 32px
主视觉 h1：28px
面板内边距：28px 20px
颜色网格：3 列
隐藏字体元信息列
展示字体：32px
隐藏按钮标签
输入行：列方向