admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
161 lines
6.8 KiB
Markdown
161 lines
6.8 KiB
Markdown
# Design System Inspired by Duolingo
|
||
|
||
> Category: Productivity & SaaS
|
||
> Language-learning platform. Bright owl green, chunky shadows, gamified joy.
|
||
|
||
## 1. Visual Theme & Atmosphere
|
||
|
||
Duolingo is gamification rendered as visual language. The interface is unapologetically bright, with **owl green** (`#58cc02`) as the brand primary and a chunky 4px bottom-shadow on every interactive element that reads like a 3D button waiting to be pressed. The page is white (`#ffffff`) with thick 2–3px borders in a deep gray (`#e5e5e5`) and the entire system reads like an iOS app from 2015 reborn with better hierarchy.
|
||
|
||
Typography uses **Feather Bold** (a custom rounded sans) for chrome and **Mona Sans** (or Inter) for body. Display sizes are big and confident — Duolingo never whispers. Headings often carry the green underline-stroke or sit on a green pill, and the mascot Duo (a green owl) appears as an active illustration character, not a static logo.
|
||
|
||
Shape language is friendly: 16–20px radii on cards, 12px on buttons, 9999px on chips and progress bars. Iconography is filled, rounded, and color-coded by skill — every lesson surface has an instantly identifiable color pairing.
|
||
|
||
**Key Characteristics:**
|
||
- Owl green (`#58cc02`) as the dominant brand color, used in 30%+ of the surface
|
||
- Chunky 4px bottom-shadow on every button (the "tactile press" affordance)
|
||
- 2–3px solid borders, never hairlines
|
||
- Feather Bold (rounded display) + Mona Sans (body)
|
||
- Big confident type — display sizes start at 48px and climb
|
||
- Mascot-as-character: Duo the owl appears in onboarding, errors, streaks
|
||
- Streak orange (`#ff9600`) and gem pink (`#ce82ff`) as secondary brand colors
|
||
|
||
## 2. Color Palette & Roles
|
||
|
||
### Primary
|
||
- **Owl Green** (`#58cc02`): Brand primary, primary CTA, correct answer.
|
||
- **Owl Green Deep** (`#58a700`): Pressed/shadow color for green buttons.
|
||
- **Owl Green Light** (`#89e219`): Hover, soft fills.
|
||
- **Owl Green Pale** (`#dbf8c5`): Soft surface, success banner.
|
||
|
||
### Secondary Accents
|
||
- **Streak Orange** (`#ff9600`): Streak counter, fire icon, premium energy.
|
||
- **Streak Orange Deep** (`#cc7a00`): Pressed orange.
|
||
- **Gem Pink** (`#ce82ff`): Gem currency, Super Duolingo.
|
||
- **Eel Blue** (`#1cb0f6`): Hint button, info link.
|
||
- **Cardinal Red** (`#ff4b4b`): Wrong answer, life lost.
|
||
- **Bee Yellow** (`#ffc800`): Pro badge, achievement.
|
||
|
||
### Surface
|
||
- **Snow** (`#ffffff`): Primary background.
|
||
- **Eel** (`#f7f7f7`): Section break, secondary surface.
|
||
- **Swan** (`#e5e5e5`): Disabled background, inset block.
|
||
- **Wolf** (`#777777`): Dark divider, secondary text.
|
||
|
||
### Ink & Text
|
||
- **Eel Black** (`#3c3c3c`): Primary text.
|
||
- **Wolf** (`#777777`): Secondary text, captions.
|
||
- **Hare** (`#afafaf`): Disabled, placeholder.
|
||
|
||
### Border
|
||
- **Swan** (`#e5e5e5`): Standard 2px border.
|
||
- **Hare** (`#afafaf`): Emphasized border on hover.
|
||
|
||
## 3. Typography Rules
|
||
|
||
### Font Family
|
||
- **Display / UI / Headings**: `Feather Bold`, with fallback: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
|
||
- **Body / Long-form**: `Mona Sans`, with fallback: `'Helvetica Neue', system-ui, sans-serif`
|
||
- **Code (rare, schools/admin)**: `JetBrains Mono`, with fallback: `ui-monospace, Menlo, monospace`
|
||
|
||
### Hierarchy
|
||
|
||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Display | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Onboarding hero |
|
||
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Page title |
|
||
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Section heading |
|
||
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Card title, lesson row |
|
||
| Body Large | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Lesson prompt, instruction |
|
||
| Body | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Standard prose |
|
||
| Caption | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP counter, metadata |
|
||
| Button | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Standard button label |
|
||
| Streak | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Streak number, on flame |
|
||
|
||
### Principles
|
||
- **800 is default**: Feather Bold runs at 800 across headings and buttons. 700 feels weak in this system.
|
||
- **Big type**: heading sizes are 25–40% larger than typical product brands — confidence as identity.
|
||
- **Rounded letterforms**: every glyph has soft terminals; sharp serifs would break the friendliness contract.
|
||
|
||
## 4. Component Stylings
|
||
|
||
### Buttons
|
||
|
||
**Primary (Owl Green)**
|
||
- Background: `#58cc02`
|
||
- Text: `#ffffff`
|
||
- Padding: 14px 24px
|
||
- Radius: 16px
|
||
- Border-bottom: 4px solid `#58a700` (the chunky shadow)
|
||
- Hover: background `#89e219`
|
||
- Active: translate-y 4px, border-bottom 0 (button "presses")
|
||
- Use: "Continue", "Check", main CTA.
|
||
|
||
**Secondary (White with Bottom-Shadow)**
|
||
- Background: `#ffffff`
|
||
- Text: `#777777`
|
||
- Border: 2px solid `#e5e5e5`
|
||
- Border-bottom: 4px solid `#e5e5e5`
|
||
- Radius: 16px
|
||
- Padding: 14px 24px
|
||
- Hover: text `#3c3c3c`, border `#afafaf`
|
||
|
||
**Streak Orange**
|
||
- Background: `#ff9600`
|
||
- Text: `#ffffff`
|
||
- Border-bottom: 4px solid `#cc7a00`
|
||
- Use: streak goal, "Start streak"
|
||
|
||
**Error (Cardinal Red)**
|
||
- Background: `#ff4b4b`
|
||
- Text: `#ffffff`
|
||
- Border-bottom: 4px solid `#cc3b3b`
|
||
- Use: wrong answer feedback.
|
||
|
||
### Cards / Lesson Tiles
|
||
- Background: `#ffffff`
|
||
- Border: 2px solid `#e5e5e5`
|
||
- Border-bottom: 4px solid `#e5e5e5`
|
||
- Radius: 16px
|
||
- Padding: 16px
|
||
- Hover: lift 2px, shadow `0 4px 0 #d7d7d7`
|
||
|
||
### Skill Tree Node (Lesson Bubble)
|
||
- Size: 80×72px
|
||
- Background: skill-color tinted (green for active, gray for locked)
|
||
- Border-bottom: 6px solid darker variant
|
||
- Radius: 50% (circular)
|
||
- Active: pulses 1.0 → 1.05 every 1.6s
|
||
|
||
### Inputs
|
||
- Background: `#ffffff`
|
||
- Border: 2px solid `#e5e5e5`
|
||
- Radius: 12px
|
||
- Padding: 12px 16px
|
||
- Focus: border `#1cb0f6` (eel blue), ring `0 0 0 3px rgba(28, 176, 246, 0.2)`
|
||
|
||
### Progress Bar
|
||
- Track: `#e5e5e5`
|
||
- Fill: `#58cc02` (or `#ff9600` for streak)
|
||
- Radius: 9999px
|
||
- Height: 16px
|
||
- Animated fill: 320ms ease-out on increment.
|
||
|
||
## 5. Spacing & Layout
|
||
|
||
- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
|
||
- **Container**: max 1080px, 24px gutter.
|
||
- **Lesson tree column**: 320px wide; centered on desktop.
|
||
|
||
## 6. Motion
|
||
|
||
- **Duration**: 180ms for button press; 320ms for skill-node unlock; 1.6s for active-node pulse.
|
||
- **Easing**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out, slight overshoot) for unlocks.
|
||
- **Mascot**: Duo blinks every 4–6s, jumps on streak milestones (480ms ease-out spring).
|
||
|
||
## 7. Usage Guardrails
|
||
|
||
- Keep the high-saturation owl green, chunky bottom shadows, and rounded lesson geometry together; flat green buttons alone do not read as Duolingo.
|
||
- Reserve oversized bold type for lesson, streak, and progress moments where the product needs encouragement or feedback.
|
||
- Use playful motion sparingly around progress state changes, avoiding generic bouncy animation on every control.
|