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。
131 lines
8.6 KiB
CSS
131 lines
8.6 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
||
* design-systems/duolingo/tokens.css
|
||
*
|
||
* Structured token bindings for "Design System Inspired by Duolingo".
|
||
* Bright owl-green gamified universe: chunky 4px bottom-shadows, big
|
||
* confident type, friendly pill geometry, mascot-driven warmth.
|
||
*
|
||
* Key brand decisions encoded here:
|
||
* - Owl Green (#58cc02) — dominant brand color, primary CTA + correct answer
|
||
* - Snow white canvas (#ffffff) — never tinted; optical clarity is the foundation
|
||
* - 4px chunky offset shadow (--elev-raised) — the "tactile press" signature
|
||
* - Feather Bold + Mona Sans — rounded display + Swiss workhorse body
|
||
* - Display starts at 56px — Duolingo never whispers; size is identity
|
||
* - Pill-and-rounded radii — 16px cards, 12px buttons/inputs, 9999px chips
|
||
* - Spring easing (back-out, slight overshoot) — gamified joy in motion
|
||
* - Eel-blue focus ring (#1cb0f6 tinted) — playful contrast to the green brand
|
||
* ─────────────────────────────────────────────────────────────────── */
|
||
|
||
:root {
|
||
/* ─── Surface ─────────────────────────────────────────────────────
|
||
* Snow white canvas with Eel as the section-break tone. Pure optical
|
||
* clarity — Duolingo never tints the page itself, only the chrome. */
|
||
--bg: #ffffff; /* Snow — primary background, the page canvas */
|
||
--surface: #f7f7f7; /* Eel — section break, secondary surface, lesson row */
|
||
--surface-warm: var(--surface); /* alias — palette has no third (warm) surface tier */
|
||
|
||
/* ─── Foreground ──────────────────────────────────────────────────
|
||
* Three real text tiers: Eel Black for primary, Wolf for secondary,
|
||
* Hare for tertiary. Each tier carries clear, child-readable contrast. */
|
||
--fg: #3c3c3c; /* Eel Black — primary text, headings, button labels */
|
||
--fg-2: var(--fg); /* alias — single primary text weight throughout */
|
||
--muted: #777777; /* Wolf — secondary text, captions, dividers */
|
||
--meta: #afafaf; /* Hare — tertiary metadata, placeholder, disabled */
|
||
|
||
/* ─── Border ──────────────────────────────────────────────────────
|
||
* Swan grey at thick 2–3px on most surfaces. Borders are visual,
|
||
* never hairlines — they read as part of the chunky aesthetic. */
|
||
--border: #e5e5e5; /* Swan — standard 2px border, card edge */
|
||
--border-soft: var(--border); /* alias — single border tier (no inner-row separation) */
|
||
|
||
/* ─── Accent ──────────────────────────────────────────────────────
|
||
* Owl Green — the brand IS this green. Used liberally in 30%+ of the
|
||
* surface for buttons, progress bars, success states, brand chrome. */
|
||
--accent: #58cc02;
|
||
--accent-on: #ffffff;
|
||
--accent-hover: #89e219; /* Owl Green Light — hover state, soft fills */
|
||
--accent-active: #58a700; /* Owl Green Deep — pressed state, the chunky shadow color */
|
||
|
||
/* ─── Semantic ────────────────────────────────────────────────────
|
||
* Success IS owl green — DESIGN.md: "primary CTA, correct answer" are
|
||
* the same affordance. Bee Yellow warns; Cardinal Red marks wrong. */
|
||
--success: #58cc02; /* Owl Green — "correct answer" is the brand */
|
||
--warn: #ffc800; /* Bee Yellow — pro badge, achievement glow */
|
||
--danger: #ff4b4b; /* Cardinal Red — wrong answer, life lost */
|
||
|
||
/* ─── Typography ──────────────────────────────────────────────────
|
||
* Feather Bold (rounded display) drives chrome and headings; Mona Sans
|
||
* carries body. Default weight is 800 — Duolingo never whispers. */
|
||
--font-display: "Feather Bold", "DIN Round Pro", "Helvetica Neue", sans-serif;
|
||
--font-body: "Mona Sans", "Helvetica Neue", system-ui, sans-serif;
|
||
--font-mono: "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
||
|
||
/* Type scale — DESIGN.md §3. Display 56px is +25–40% above typical
|
||
* product brands; the ladder favors round whole-pixel sizes. */
|
||
--text-xs: 12px; /* Tiny utility, progress numerals */
|
||
--text-sm: 13px; /* Caption — XP counter, metadata */
|
||
--text-base: 15px; /* Body — standard prose */
|
||
--text-lg: 18px; /* H3 / lesson row title / featured body */
|
||
--text-xl: 24px; /* H2 — section heading */
|
||
--text-2xl: 32px; /* H1 — page title */
|
||
--text-3xl: 40px; /* Sub-display — hero secondary, marketing eyebrow */
|
||
--text-4xl: 56px; /* Display — onboarding hero, never timid */
|
||
|
||
--leading-body: 1.5;
|
||
--leading-tight: 1.15; /* Headings — slight breathing under big rounded faces */
|
||
--tracking-display: -0.01em; /* ≈ -0.56px at 56px — confident, not condensed */
|
||
|
||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||
* 4px base unit (DESIGN.md §5): 4, 8, 12, 16, 20, 24, 32, 48. */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-8: 32px;
|
||
--space-12: 48px;
|
||
|
||
/* Section rhythm — generous on desktop, tight on phone so the lesson
|
||
* tree column reads as a continuous flow rather than chunked pages. */
|
||
--section-y-desktop: 80px;
|
||
--section-y-tablet: 56px;
|
||
--section-y-phone: 40px;
|
||
|
||
/* ─── Radius ──────────────────────────────────────────────────────
|
||
* Pill-and-rounded everywhere. Cards 16px (DESIGN.md §4), buttons +
|
||
* inputs 12px, chips and progress bars 9999px — friendly forever. */
|
||
--radius-sm: 12px; /* Inputs, buttons — friendly compact corners */
|
||
--radius-md: 16px; /* Cards, lesson tiles — primary signature */
|
||
--radius-lg: 20px; /* Featured containers, modals */
|
||
--radius-pill: 9999px; /* Chips, progress bars, avatars */
|
||
|
||
/* ─── Elevation ───────────────────────────────────────────────────
|
||
* Chunky 4px bottom-shadow IS Duolingo. Buttons and cards cast a hard
|
||
* offset shadow that reads as a 3D button waiting to be pressed. The
|
||
* raised value pairs with translateY(4px) on :active to "press" it. */
|
||
--elev-flat: none;
|
||
--elev-ring: 0 0 0 2px var(--border); /* 2px ring matches the chunky border weight */
|
||
--elev-raised: 0 4px 0 #d7d7d7; /* Hard tactile shadow — the press affordance */
|
||
|
||
/* ─── Focus ring ──────────────────────────────────────────────────
|
||
* Eel Blue 20% tint (DESIGN.md §4 inputs) — playful contrast against
|
||
* the ambient owl-green brand; signals "you can interact with this". */
|
||
--focus-ring: 0 0 0 3px rgba(28, 176, 246, 0.2);
|
||
|
||
/* ─── Motion ──────────────────────────────────────────────────────
|
||
* 180ms button press, 320ms skill-node unlock; back-out spring with
|
||
* slight overshoot (DESIGN.md §6). Every state change feels gamified. */
|
||
--motion-fast: 180ms;
|
||
--motion-base: 320ms;
|
||
--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
|
||
/* ─── Layout ──────────────────────────────────────────────────────
|
||
* 1080px container (DESIGN.md §5) — narrower than a SaaS deck because
|
||
* Duolingo content reads vertically as a focused lesson tree column. */
|
||
--container-max: 1080px;
|
||
--container-gutter-desktop: 24px;
|
||
--container-gutter-tablet: 20px;
|
||
--container-gutter-phone: 16px;
|
||
}
|