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。
205 lines
12 KiB
CSS
205 lines
12 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
||
* design-systems/runwayml/tokens.css
|
||
*
|
||
* Structured token bindings for the "Runway" brand — a cinematic,
|
||
* editorial-cinema dark canvas where photography (and AI-generated
|
||
* video) is the design and the chrome is intentionally invisible.
|
||
*
|
||
* Brand identity in three sentences:
|
||
* 1. Pure-black canvas (#000000) under bright pure-white type
|
||
* (#ffffff), with cool blue-gray neutrals (#767d88 / #7d848e)
|
||
* for the entire supporting text ramp — never warm gray.
|
||
* 2. Single typeface system: abcNormal at 400 / 450 / 500 / 600
|
||
* (no bold) handles everything from 48px display down to 11px
|
||
* uppercase tags. Hierarchy comes from size + case + tracking,
|
||
* not weight.
|
||
* 3. Zero shadows, near-invisible borders (#27272a hairline), and
|
||
* sharp 4–8px corners — depth comes from photographic content
|
||
* and dark-vs-light section alternation, never from CSS blur.
|
||
*
|
||
* Schema decisions:
|
||
* - --bg: #000000; --surface: #1a1a1a (dark card surface);
|
||
* --surface-warm: #030303 (the rarely-used third-tier dark, an
|
||
* "even darker" panel surface — this brand does not have a warm
|
||
* temperature, so the B-slot reads as a parallel cool tier).
|
||
* - --fg: #ffffff; --fg-2: #e9ecf2 (Cool Cloud — alt heading tone);
|
||
* --muted: #767d88 (Cool Slate); --meta: #7d848e (Mid Slate).
|
||
* - --border: #27272a (Border Dark); --border-soft: #1a1a1a (row
|
||
* separator that blends into the dark surface — "barely visible
|
||
* containment", per DESIGN.md §4).
|
||
* - --accent: #ffffff. Runway has no decorative accent color; the
|
||
* highest-signal surface in the system is pure white against
|
||
* black. Hover/active states dim toward Cool Cloud / Cool Silver
|
||
* rather than mixing in a hue.
|
||
* - --font-display / --font-body bind to abcNormal — DESIGN.md §3
|
||
* mandates a single typeface; Inter / DM Sans are documented
|
||
* external substitutes for the custom face.
|
||
* - --tracking-display: -0.025em (-1.2px at 48px hero per
|
||
* DESIGN.md §3 hierarchy table).
|
||
* - --leading-tight: 1.0 (film-title compression on display sizes);
|
||
* --leading-body: 1.4 (mid-range of the documented 1.30–1.50
|
||
* band — body text stays editorial-tight, never magazine-loose).
|
||
* - --section-y-desktop: 78px ("cinema-grade breathing" — the
|
||
* largest discrete step on the documented spacing scale).
|
||
* - --radius-sm: 4px (sharp / button); --radius-md: 8px (card,
|
||
* image); --radius-lg: 16px (alert containers only — DESIGN.md §4).
|
||
* - --elev-raised: none. The brand do/don't is explicit: zero
|
||
* shadows. We override the schema's blur fallback so any
|
||
* component that reaches for `var(--elev-raised)` produces no
|
||
* shadow, preserving the cinematic flat-vs-photographic depth
|
||
* model. --elev-ring stays available for the "alert container"
|
||
* case where a hairline ring substitutes for a border.
|
||
* - --container-max: 1600px (cinema-wide, per DESIGN.md §5 grid).
|
||
* ─────────────────────────────────────────────────────────────────── */
|
||
|
||
:root {
|
||
/* ─── Surface (3 levels) ──────────────────────────────────────────
|
||
* Dark-dominant. The canvas is true black; cards lift onto Dark
|
||
* Surface (#1a1a1a) without a shadow or border. --surface-warm is
|
||
* the schema's B-slot for a tertiary tier; runway has no warm
|
||
* temperature, so we bind it to Deep Black (#030303) — a parallel
|
||
* "even darker" panel used for layered dark containers. */
|
||
--bg: #000000; /* Runway Black — primary canvas */
|
||
--surface: #1a1a1a; /* Dark Surface — card / lifted container */
|
||
--surface-warm: #030303; /* Deep Black — third-tier layered panel */
|
||
|
||
/* ─── Foreground (4 levels) ───────────────────────────────────────
|
||
* Pure white anchors the ramp; Cool Cloud is a near-imperceptible
|
||
* alt for headings; the muted / meta tiers are the brand's
|
||
* signature cool-blue grays (never warm). */
|
||
--fg: #ffffff; /* Pure White — primary type, brand mark */
|
||
--fg-2: #e9ecf2; /* Cool Cloud — alt heading tone */
|
||
--muted: #767d88; /* Cool Slate — secondary body text */
|
||
--meta: #7d848e; /* Mid Slate — tertiary, metadata */
|
||
|
||
/* ─── Border (2 levels) ───────────────────────────────────────────
|
||
* Per DESIGN.md §4: "barely visible containment". --border is the
|
||
* single dark-mode border value; --border-soft blends almost into
|
||
* the card surface so row separators do not visually compete. */
|
||
--border: #27272a; /* Border Dark — alert / standard edge */
|
||
--border-soft: #1a1a1a; /* matches surface — inner row separator */
|
||
|
||
/* ─── Accent ──────────────────────────────────────────────────────
|
||
* Runway has no decorative color — DESIGN.md §2 is explicit ("None
|
||
* in the interface. Visual richness comes entirely from
|
||
* photographic content"). Pure white IS the brand's high-signal
|
||
* accent, used on CTA fills and the focus ring. Hover/active dim
|
||
* toward the cool-silver neutrals rather than mixing in any hue. */
|
||
--accent: #ffffff; /* Pure White — sole interface accent */
|
||
--accent-on: #000000; /* black type on white CTA fill */
|
||
--accent-hover: #e9ecf2; /* Cool Cloud — hover dim */
|
||
--accent-active: #c9ccd1; /* Cool Silver — pressed dim */
|
||
|
||
/* ─── Semantic ────────────────────────────────────────────────────
|
||
* Runway's UI does not surface state colors in its public surface;
|
||
* we inherit the schema defaults so any utility/admin chrome the
|
||
* fixture spawns still resolves. Keep semantic coverage <5% of any
|
||
* surface — this is not a brand color tier. */
|
||
--success: #16a34a;
|
||
--warn: #eab308;
|
||
--danger: #dc2626;
|
||
|
||
/* ─── Typography ──────────────────────────────────────────────────
|
||
* Single typeface commitment. DESIGN.md §3: "abcNormal handles
|
||
* every text role." We list the documented external substitutes
|
||
* (Inter, DM Sans) as the next layer of the fallback chain so the
|
||
* fixture renders predictably on machines without the custom face. */
|
||
--font-display: "abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||
--font-body: "abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||
|
||
/* Type scale — direct map of DESIGN.md §3 hierarchy table.
|
||
* 11px micro/tag (uppercase, weight 450) → --text-xs
|
||
* 13px small description → --text-sm
|
||
* 16px body / button → --text-base
|
||
* 20px feature title → --text-lg
|
||
* 24px card title → --text-xl
|
||
* 36px sub-heading → --text-2xl
|
||
* 40px section heading → --text-3xl
|
||
* 48px display / hero → --text-4xl */
|
||
--text-xs: 11px;
|
||
--text-sm: 13px;
|
||
--text-base: 16px;
|
||
--text-lg: 20px;
|
||
--text-xl: 24px;
|
||
--text-2xl: 36px;
|
||
--text-3xl: 40px;
|
||
--text-4xl: 48px;
|
||
|
||
/* Leading + tracking.
|
||
* --leading-tight: 1.0 → film-title compression on display sizes.
|
||
* --leading-body: 1.4 → mid-range of DESIGN.md's documented
|
||
* 1.30–1.50 body band; intentionally editorial-tight.
|
||
* --tracking-display: -0.025em → -1.2px at 48px hero per
|
||
* DESIGN.md §3 hierarchy table. */
|
||
--leading-body: 1.4;
|
||
--leading-tight: 1.0;
|
||
--tracking-display: -0.025em;
|
||
|
||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||
* 8px base unit per DESIGN.md §5 — the schema's 4px-grid scale
|
||
* maps cleanly. Runway's documented scale (4/6/8/12/16/20/24/28/
|
||
* 32/48/64/78) lands on every required step except 6/28/64/78,
|
||
* which live inline in components (no token name needed). */
|
||
--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 — "cinema-grade breathing". 78px on desktop is
|
||
* the largest discrete step on the documented scale, creating the
|
||
* scrolling-between-scenes pacing called out in DESIGN.md §5. */
|
||
--section-y-desktop: 78px;
|
||
--section-y-tablet: 48px;
|
||
--section-y-phone: 32px;
|
||
|
||
/* ─── Radius ──────────────────────────────────────────────────────
|
||
* DESIGN.md §5 documents four tiers: 4px sharp (buttons), 6–8px
|
||
* comfortable (containers/images), 16px generous (alerts). The
|
||
* pill tier is preserved at the schema default — Runway forbids
|
||
* pill-shaped UI ("Don't use pill-shaped radius"), so the token
|
||
* exists purely so cross-brand components resolve cleanly. */
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 16px;
|
||
--radius-pill: 9999px;
|
||
|
||
/* ─── Elevation ───────────────────────────────────────────────────
|
||
* DESIGN.md §6 is explicit: "Runway uses zero shadows." We honor
|
||
* that by overriding --elev-raised to `none` (depth comes from
|
||
* dark/light section alternation and photographic depth of field,
|
||
* never from CSS blur). --elev-ring remains as a hairline ring so
|
||
* the documented "alert container" case still has a treatment. */
|
||
--elev-flat: none;
|
||
--elev-ring: 0 0 0 1px var(--border);
|
||
--elev-raised: none;
|
||
|
||
/* ─── Focus ───────────────────────────────────────────────────────
|
||
* White ring on dark canvas — the only chromatic affordance the
|
||
* brand permits. 60% transparency keeps the ring readable without
|
||
* looking like a fill. */
|
||
--focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 60%);
|
||
|
||
/* ─── Motion ──────────────────────────────────────────────────────
|
||
* Slightly slower base than the schema default — cinematic pacing
|
||
* favors deliberate state changes over instant snap. Easing stays
|
||
* on the standard curve so micro-interactions still feel
|
||
* mechanical-precise rather than springy. */
|
||
--motion-fast: 150ms;
|
||
--motion-base: 220ms;
|
||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
|
||
/* ─── Layout ──────────────────────────────────────────────────────
|
||
* Cinema-wide container — DESIGN.md §5: "up to 1600px". Gutters
|
||
* progressively shrink from 48px desktop → 16px phone so the
|
||
* full-bleed photography hero can stay edge-to-edge. */
|
||
--container-max: 1600px;
|
||
--container-gutter-desktop: 48px;
|
||
--container-gutter-tablet: 24px;
|
||
--container-gutter-phone: 16px;
|
||
}
|