提示词
字体
主字体：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
隐藏按钮标签
输入行：列方向原文提示词（English）
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, typography, button variants, cards, and UI components." -- 17px, gray-light color, max-width 520px, 1.5 line-height
Two buttons below: Primary "GET STARTED" button (green, white text, 12px border-radius, 4px green box-shadow for 3D effect, uppercase bold) and Secondary "I ALREADY HAVE AN ACCOUNT" button (transparent with 2px gray border, blue text, 4px gray box-shadow for 3D effect)
Both buttons: 48px height, 24px horizontal padding, 15px font-size, 700 weight, uppercase
Buttons have active state: box-shadow removed, translateY(4px)
Padding: 56px top, 40px sides, 40px bottom
Main Grid (2-column grid, no gap, max-width 1440px)
Each panel has 36px vertical and 40px horizontal padding, bottom border and right border (border-color). Even panels have no right border.
Each panel has a section label: 11px, 800 weight, uppercase, 2px letter-spacing, gray (nav-text), with a 1px line extending to the right via ::after pseudo-element.
Panels in order (left-to-right, top-to-bottom):
Panel 1: Color Palette (light)
Grid of 12 color swatches, grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)), 12px gap. Each swatch:
Square (aspect-ratio: 1), 12px border-radius, 1px border rgba(0,0,0,0.06)
Hover: scale(1.05) with box-shadow 0 8px 24px rgba(0,0,0,0.12)
Below swatch: name (12px, bold, gray-text) and hex value (10px, gray-light, semi-bold)
Colors in order:
Green -- rgb(88, 204, 2) -- #58CC02
Green Hover -- rgb(75, 178, 0) -- #4BB200
Blue -- rgb(28, 176, 246) -- #1CB0F6
Dark Blue -- rgb(16, 15, 62) -- #100F3E
Red -- #FF4B4B
Orange -- #FF9600
Golden -- #FFC800
Footer Green -- #4EC604
Gray Text -- rgb(75, 75, 75) -- #4B4B4B
Gray Light -- rgb(119, 119, 119) -- #777777
Nav Text -- rgb(175, 175, 175) -- #AFAFAF
Border -- rgb(229, 229, 229) -- #E5E5E5
Panel 2: Typography (light)
Vertical stack with 20px gap. Each row is a flex row (baseline-aligned, 20px gap) with a meta column (80px wide, right-aligned) showing size in blue (11px bold) and weight label below (10px, nav-text color), then the sample text.
Rows:
48px / Feather Bold -- "Display" -- green color, Feather Bold font
32px / Bold 700 -- "Heading One" -- gray-text color
28px / Feather Bold -- "heading two" (lowercase) -- green color, Feather Bold font
18px / Medium 500 -- "Body text for paragraphs and descriptions with comfortable reading line-height." -- gray-light color, 1.6 line-height
14px / Bold 700 -- "CAPTION LABEL" -- uppercase, nav-text color, 0.5px letter-spacing
12px / Semi 600 -- "Small utility text for metadata and hints" -- gray-light color
Panel 3: Button Variants (light)
Vertical stack with 16px gap. Each row has an 80px label (10px, bold, uppercase, 1px letter-spacing, nav-text) then buttons with 12px gap, flex-wrap.
Rows:
"Primary" -- 3 buttons: "GET STARTED" (green bg, white text, 4px green shadow), "SMALL" (same but 36px height, 13px font, 16px padding, 10px radius, 3px shadow), "DISABLED" (same as primary but opacity 0.45, pointer-events none)
"Secondary" -- 3 buttons: "LEARN MORE" (transparent, 2px #CFCFCF border, blue text, 4px #CFCFCF shadow), "SMALL" (same sizing as small primary), "DISABLED" (opacity 0.45)
"Danger" -- 2 buttons: "DELETE" (#FF4B4B bg, white text, 4px #CC3C3C shadow), "REMOVE" (small variant)
"Ghost" -- 1 button: "VIEW ALL" (no bg/border/shadow, green text, green bg on hover at 0.08 opacity)
Panel 4: Dark Theme Buttons (dark-blue background)
Section label and ::after line use white at 35% and 10% opacity respectively.
Two rows:
"GET STARTED" primary + "TRY 1 WEEK FREE" (white bg, dark-blue text, 4px #88879F shadow, hover bg #c8f040)
Small variants of both
Panel 5: Cards (light)
2-column grid, 16px gap. Each card: white bg, 2px border (border-color), 16px border-radius. Hover: translateY(-4px), box-shadow 0 12px 32px rgba(0,0,0,0.08).
Card 1:
Image: https://images.pexels.com/photos/4145354/pexels-photo-4145354.jpeg?auto=compress&cs=tinysrgb&w=400&h=200&fit=crop (120px height, cover)
Tag: "NEW" (green text, green bg at 10% opacity, 11px, 800 weight, uppercase, 6px radius, 3px/8px padding)
Title: "Spanish for Beginners" (16px, bold, gray-text)
Description: "Start your language journey with interactive lessons designed to build fluency." (13px, gray-light, 1.5 line-height)
Footer (12px top border, 12px/16px padding): left "12 UNITS" (12px bold uppercase nav-text), right "START" (12px bold uppercase blue, hover opacity 0.7)
Card 2:
Image: https://images.pexels.com/photos/267669/pexels-photo-267669.jpeg?auto=compress&cs=tinysrgb&w=400&h=200&fit=crop
Tag: "POPULAR" (blue text, blue bg at 10% opacity)
Title: "French Conversations"
Description: "Practice real-world dialogue and improve pronunciation with native speakers."
Footer: "8 UNITS" / "CONTINUE"
Panel 6: Dark Theme Cards (dark-blue background)
2-column grid, same structure but no images. Cards have bg rgba(255,255,255,0.06), border rgba(255,255,255,0.08). Titles are white, descriptions are white at 50% opacity, footer border is white at 8% opacity, footer text is white at 30% opacity.
Card 1:
Tag: "SUPER" (golden #FFC800 text, golden bg at 15% opacity)
Title: "Unlimited Hearts"
Desc: "Keep learning without interruption with Super Duolingo benefits."
Footer: "PREMIUM" / "UPGRADE"
Card 2:
Tag: "PRO" (orange #FF9600 text, orange bg at 15% opacity)
Title: "Mastery Quizzes"
Desc: "Challenge yourself with advanced assessments to test your skill level."
Footer: "ADVANCED" / "TRY NOW"
Panel 7: Components (light)
Vertical stack with 20px gap. Each group has a label (10px bold uppercase, 1px letter-spacing, nav-text).
Badges: Flex row, 8px gap. Pill-shaped badges (4px/10px padding, 20px radius, 12px bold uppercase):
"COMPLETED" (green text, green bg 12%)
"IN PROGRESS" (blue text, blue bg 12%)
"FAILED" (red text, red bg 12%)
"STREAK" (orange text, orange bg 12%)
"PREMIUM" (golden-brown #b8920f text, golden bg 15%)
Input + Button: Flex row, 12px gap. Input (flex:1, 48px height, 16px padding, 2px border border-color, 12px radius, 15px font, 600 weight, focus border turns blue, placeholder is nav-text color 500 weight) + Primary "SUBSCRIBE" button.
Toggle: Flex row with two toggle switches. Each toggle is 48x28px. Track is border-color bg, 14px radius. Thumb is 22x22px white circle, 3px from edges, with 1px 3px rgba(0,0,0,0.15) shadow. Checked state: track turns green, thumb translates 20px right. Labels "Sound effects" and "Animations" (14px, 600 weight). First toggle is checked by default.
Progress: 3 progress bars in a column, 10px gap. Each row: flex, 12px gap, bar (flex:1, 12px height, border-color bg, 6px radius, overflow hidden), fill (6px radius, 0.6s ease width transition), value (12px bold, 32px wide, right-aligned).
85% green fill
60% blue fill
35% orange fill
Tooltips & Streak: Flex row, 16px gap, center-aligned.
Tooltip trigger: "Hover me" (13px, bold, green text, green bg 8%, 8px/16px padding, 8px radius). On hover shows tooltip bubble above (dark-blue bg, white 12px 600-weight text, 6px/12px padding, 8px radius, 5px triangle arrow pointing down via ::after border trick).
Streak counter: Inline-flex, 6px gap, 6px/14px padding, orange bg 10%, 20px radius. Fire emoji (18px) + "42" (16px, 800 weight, orange).
Panel 8: Dark Theme Components (dark-blue background)
Labels use white at 30% opacity.
Language Pills: Flex row, 8px gap. Each pill: inline-flex, 6px gap, 6px/12px padding, 2px border, 12px radius, cursor pointer, hover turns border green with subtle green bg.
"Spanish" (ACTIVE -- green border, green bg 8%, white text) with flag https://d35aaqx5ub95lt.cloudfront.net/vendor/59a90a2cedd48b751a8fd22014768fd7.svg
"French" (inactive -- white border 12%, white text 70%) with flag https://d35aaqx5ub95lt.cloudfront.net/vendor/482fda142ee4abd728ebf4ccce5d3307.svg
"German" with flag https://d35aaqx5ub95lt.cloudfront.net/vendor/c71db846ffab7e0a74bc6971e34ad82e.svg
"Japanese" with flag https://d35aaqx5ub95lt.cloudfront.net/vendor/edea4fa18ff3e7d8c0282de3f102aaed.svg
Flag images: 24x18px, object-fit contain. Pill text: 13px, bold.
Avatar Group: Flex row with overlapping circular avatars (36px, 50% radius, 2px white border, -8px margin-left except first). Images:
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
Count badge "+5" (same 36px circle, #f0f0f0 bg, 11px 800 weight, gray-light)
Text next to group: "8 learners active" (13px, 600 weight, white 50% opacity)
Progress (Dark): 2 bars, track bg is white 8%, values are white 60%:
72% golden fill
45% green fill
Badges (Dark):
"MASTERED" (green bg 15%, #7ADB2E text)
"REVIEW" (blue bg 15%, #4DC4F8 text)
"CROWN" (golden bg 15%, #FFC800 text)
Responsive Breakpoints
900px and below:
Grid becomes single column, no right borders
Hero h1: 36px
Nav links hidden
Cards grid becomes single column
Hero buttons stack vertically, max-width 280px
600px and below:
Hero padding: 40px 20px 32px
Hero h1: 28px
Panel padding: 28px 20px
Color grid: 3 columns
Type meta column: hidden
Display type: 32px
Button labels: hidden
Input row: column direction
