/* ============================================================ JO — UI/UX Designer · Product & Systems DESIGN TOKENS · v1 · SINGLE SOURCE OF TRUTH ------------------------------------------------------------ 全部数值都是从现有 Homepage（style.css 原 :root + 组件规则） 提取出来的，不是重新定义的。任何新页面 / 新组件 / 新案例页 都必须只引用这里的 token，禁止再写字面色值、字号或圆角。 加载规则：每个页面 里 tokens.css 必须是【第一个】样式表， 其余样式表（style.css / case-ui.css / erp-case.css / detail.css / video.css）都依赖它，不得再自行定义同义变量。 ------------------------------------------------------------ 别名对照表（历史命名 → 规范命名，两者都可用，指同一个值） 案例页 / case-ui.css 首页 / 规范 --bg #ffffff → --c-page --card #ffffff → --c-page --hair #f5f5f7 → --c-page-2 --ink #1d1d1f → --c-ink --mut #6e6e73 → --c-ink-2 --mut2 #86868b → --c-ink-3 --mut3 #a1a1a6 → --c-ink-4 --line #d2d2d7 → --c-hairline --ac #0071e3 → --c-accent --ac2 #0077ed → --c-accent-hover --shadow rgba(15,18,25,.14) → --shadow-md （每个案例页的 --acc 是该页主题色，属于页面级覆盖，不在此定义） ============================================================ */ :root{ /* ---------- TYPE ---------- */ --font:"Work Sans","PingFang SC","Microsoft YaHei",system-ui,-apple-system,arial,helvetica,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ---------- COLOUR ---------- */ --c-page:#ffffff; /* page / light section background */ --c-page-2:#f5f5f7; /* alternate grey band */ --c-ink:#1d1d1f; /* primary text */ --c-ink-2:#6e6e73; /* secondary text */ --c-ink-3:#86868b; /* tertiary text / metadata */ --c-ink-4:#a1a1a6; /* muted text on black */ --c-ink-body:#3d3a35; /* editorial body copy */ --c-hairline:#d2d2d7; /* hairline border / faint art */ --c-black:#000000; --c-accent:#0071e3; /* link blue */ --c-accent-hover:#0077ed; /* ============================================================ TYPE ROLES v3 · 全站唯一排版角色表 ------------------------------------------------------------ 命名：--fs-* 字号 / --lh-* 行高 / --ls-* 字距 / --fw-* 字重。 规则：任何样式表（style / system / editorial-case / case-ui / erp-case / detail / video）只准引用这里的角色，禁止再写字面 字号、行高、字距、字重。新增页面若缺角色，先在此登记，不要在 页面里自造数值。 基准：1rem = 10px（见文件末尾 :root{font-size:62.5%}）。 档位来自 5 张案例样式表现有取值的并集（已合并近邻值）， 所以引入时绝大多数声明是「等价改名」，不产生视觉变化。 ============================================================ */ /* ---------- 字重（4 档） ---------- */ --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; /* ---------- 行高（11 档，与《字体规范 v1》一致） ---------- */ --lh-flat:1; /* 巨型数字 / 水印 */ --lh-tight:.95; /* 巨型 hero 主标题 */ --lh-display:1.05; /* 展示级标题 */ --lh-title:1.1; /* 章节大标题 */ --lh-snug:1.2; /* 小标题 / 卡片标题 */ --lh-compact:1.25; /* 引言 / 密排段落 */ --lh-h3:1.3; /* 居中大字 / 圆内文字 */ --lh-lead:1.4; /* 引言文字 */ --lh-ui:1.5; /* UI 单行 / 图注 */ --lh-desc:1.6; /* 说明文字 */ --lh-body:1.75; /* 正文 */ /* ---------- 字距（11 档） ---------- */ --ls-tighter:-.02em; --ls-tight:-.01em; --ls-none:0; --ls-sm:.04em; --ls-md:.08em; --ls-lg:.12em; --ls-xl:.16em; --ls-2xl:.2em; --ls-3xl:.24em; --ls-4xl:.3em; --ls-5xl:.4em; /* ---------- 字号阶梯 · 静态 ---------- */ --fs-micro:1rem; /* 极小：chip / 进度条 / 图注编号 */ --fs-label:1.1rem; /* 标签：eyebrow / 展签 / 全大写 */ --fs-meta:1.2rem; /* 元信息：章节号 / 导航 / tag */ --fs-caption:1.3rem; /* 图注 / 卡片辅助行 */ --fs-ui:1.4rem; /* UI 正文（小） */ --fs-desc:1.5rem; /* 说明文字 / 行值 */ --fs-body:1.6rem; /* 正文 */ --fs-body-lg:1.8rem; /* 正文（大）/ 卡片标题 */ --fs-lead:2rem; /* 引言 / 定义值 */ --fs-h6:2.2rem; /* 小标题 */ --fs-h5:2.4rem; /* 区块标题（小） */ --fs-h4:3rem; /* 指标 / 卡片主标题 */ --fs-h3:3.4rem; /* 章节标题（移动端） */ --fs-h2:4.4rem; /* 章节标题（桌面）/ 大标题 */ --fs-h1:5.2rem; /* 页面主标题（移动端） */ --fs-display:6.4rem; /* 展示级标题 */ --fs-display-lg:8.4rem; /* 展示级标题（大） */ --fs-display-xl:10rem; /* 展示级标题（特大） */ --fs-display-2xl:14rem; /* 展示级标题（超特大） */ /* ---------- 字号阶梯 · 装饰（水印 / 幽灵数字） ---------- */ --fs-ghost-sm:7.2rem; /* 水印（移动端） */ --fs-ghost:16rem; /* 水印（桌面，标准） */ --fs-ghost-wide:30rem; /* 水印（桌面，宽数值） */ /* ---------- 字号阶梯 · 流体（clamp，展示级响应式） ---------- * 只在「随视口缩放」的展示级排版里用；普通 UI 用上面的静态档。 * 命名 --fs-f-* 便于识别，值全部在 32rem → 110rem 之间线性插值。 */ --fs-f-note:clamp(1.5rem,1.4vw,1.9rem); /* 信息线值 */ --fs-f-sublabel:clamp(1.5rem,1.6vw,2rem); /* 章节英文名 */ --fs-f-body:clamp(1.6rem,1.25vw,1.9rem); /* 正文（流体） */ --fs-f-scn:clamp(1.7rem,1.8vw,2.4rem); /* 章节中文名 */ --fs-f-cn:clamp(1.8rem,2vw,2.6rem); /* 中文副题 */ --fs-f-cap:clamp(2.2rem,2.4vw,3.4rem); /* 引语小标题 */ --fs-f-item:clamp(2.4rem,2.6vw,4rem); /* 清单项标题 */ --fs-f-next:clamp(2.6rem,3.6vw,4rem); /* 下一项目名 */ --fs-f-blk:clamp(2.8rem,3.2vw,5rem); /* 章节内分块标题 */ --fs-f-list:clamp(2rem,2.2vw,3rem); /* 清单标题 */ --fs-f-quote:clamp(3.4rem,4.4vw,6.4rem); /* 引言 */ --fs-f-big:clamp(3rem,4vw,5.6rem); /* 段首大字 */ --fs-f-h2:clamp(3.6rem,4.4vw,7.2rem); /* 章节大标题 */ --fs-f-sec-xl:clamp(4rem,5.4vw,8.4rem); /* 系统墙大标题 */ --fs-f-prin-h:clamp(4rem,6vw,9.6rem); /* 原则标题 */ --fs-f-end:clamp(4.8rem,8.4vw,13rem); /* 尾节标题 */ --fs-f-giant:clamp(5.6rem,9vw,16rem); /* 巨型陈述 / 编号 */ --fs-f-hero:clamp(7.2rem,13vw,21rem); /* 案例页 hero 主标题 */ /* ---------- 兼容别名（v2 遗留命名，等价于 v3） ---------- */ --ls-label:var(--ls-xl); --ls-meta:var(--ls-3xl); /* ---------- ELEVATION ---------- */ --shadow-md:0 1.6rem 4rem rgba(15,18,25,.14); /* editorial card lift */ --shadow-lg:0 1.6rem 4rem rgba(15,18,25,.18); /* phone screen lift */ /* ---------- LAYOUT ---------- */ --container:120rem; /* .l-container width at >=81.25em */ --container-small:67.5rem; /* .l-container--small */ --gutter:2.5rem; /* container padding, mobile */ --gutter-md:5rem; /* container padding, >=48em */ /* ---------- SPACING SCALE ---------- * * 3xs .5 · 2xs .75 · xs 1 · sm 1.5 · md 2 · lg 2.5 · xl 3 · 2xl 4 * 3xl 6 · 4xl 8 · 5xl 10 · 6xl 15 (rem) */ --space-3xs:.5rem; --space-2xs:.75rem; --space-xs:1rem; --space-sm:1.5rem; --space-md:2rem; --space-lg:2.5rem; --space-xl:3rem; --space-2xl:4rem; --space-3xl:6rem; --space-4xl:8rem; --space-5xl:10rem; --space-6xl:15rem; /* ---------- RADIUS ---------- *(from real usage, 6 values → 4) */ --radius-xs:.8rem; --radius-sm:1.4rem; /* .is-vertical img */ --radius-md:1.6rem; /* .is-portrait img */ --radius-lg:2rem; /* brand tile */ --radius-circle:50%; /* ---------- MOTION ---------- * * 只允许这两种缓动 + 这四档时长，不要每处换一套 */ --ease-out:cubic-bezier(.215,.61,.355,1); /* base UI transition */ --ease-out-expo:cubic-bezier(.22,1,.36,1); /* reveal / entrance */ --dur-fast:.4s; --dur-base:.45s; --dur-slow:.8s; --dur-reveal:1s; /* ---------- Z-INDEX ---------- */ --z-header:100; --z-overlay:200; } /* ============================================================ BREAKPOINTS（仅文档用 —— CSS 变量无法用于 @media） 30em / 480px 1 列 → 2 列 48em / 768px 平板：容器内边距 5rem，作品卡 47% 56.25em / 900px 页脚栅格 1/4 68.75em / 1100px 正文 1.8rem，作品卡 45.5%，容器固定 120rem 81.25em / 1300px 容器 120rem 且去掉内边距 统一规律：字号 / 间距一律用 calc(min + (max - min) * (100vw - minRem) / (max - min)) 在 32rem→76.8rem→110rem 三个锚点之间线性插值，超过 110rem 取固定值。 ============================================================ */ /* ---------- 全站基础基准：1rem = 10px ---------- */ :root{font-size:62.5%} /* ============================================================ SEMANTIC EDITORIAL SPACING 长页面（案例页）统一的纵向节奏：Small → Medium → Large → Full Width ============================================================ */ :root{ --rhythm-s:var(--space-3xl); /* 小节奏：标题 / metadata */ --rhythm-m:var(--space-4xl); /* 中节奏：说明文字 */ --rhythm-l:var(--space-5xl); /* 大节奏：核心 UI */ --rhythm-xl:var(--space-6xl); /* 段落之间 / 区块之间 */ }