/* ============================================================ 星野X · 设计系统 tokens.css v0.1 ------------------------------------------------------------ 主方案：冷萃学院 COOL ACADEMY（湖蓝 / 鸢尾 / 青柠） 备用局部：B 暖光 / C 青柠清新（仅局部场景） Pantone 70/20/10 · 云舞白基底 字体：PuHuiTi3（中 400/700）· Poppins（英 400/600/700） ------------------------------------------------------------ 引入方式：@import url(.../tokens.css); ============================================================ */ /* ============================================================ 1. 色彩 COLOR ============================================================ */ /* ============================================================ 0. 设计旋钮 DESIGN DIALS（taste-skill 三旋钮 · 全局基调） ------------------------------------------------------------ · DESIGN_VARIANCE 5 对称秩序(骨) + 局部不对称打破(活血) 1=全对称 5=平衡 10=艺术混乱 · MOTION_INTENSITY 3 轻量克制（hover/按下/轻reveal） · VISUAL_DENSITY 3 大留白学院感（70%云舞白透气） ============================================================ */ :root{ --variance: 5; /* DESIGN_VARIANCE 5/10 */ --density: 3; /* VISUAL_DENSITY 3/10（内容/阅读场景基准） */ } /* —— 密度分场景（阅读 3 / 操作 4-5）—— */ /* 用户在"读/看"（海报/招募/公众号/营销页）→ 保持 --density:3 大留白 用户在"找/操作"（后台面板/表单/课表/列表）→ 用 .density-tight，间距收紧到 4-5 */ .density-tight{ --density: 5; --sp-xs:2px; --sp-sm:4px; --sp-md:8px; --sp-lg:12px; --sp-xl:16px; font-size:14px; line-height:1.6; } :root{ /* ---- 主方案 A · 冷萃学院（70/20/10）---- */ --base: #F1F0EC; /* 云舞白 · 基底 70% 全页底 */ --bg: #F1F0EC; /* 基底别名（--base）可交换使用 */ --surface: #FFFFFF; /* 浮层白 · 卡片/输入框/按钮底（唯一最亮层） */ --main: #49BBCA; /* Capri 湖蓝 · 主色 20% 未来感/理性 */ --accent: #A96BA6; /* Iris 鸢尾紫 · 辅色 文艺/深边 */ --point: #DEE884; /* Sunny Lime 青柠 · 点缀 10% 生气 */ /* ---- 文字 / 边框 / 中性（BASE LAYER） */ --ink: #1F1C17; /* 墨 · 主文字 */ --text-2: #6E675E; /* 中灰 · 次要文字 */ --text-3: #A09485; /* 弱灰 · 禁用/弱化 */ --line: #E8E3D8; /* 线淡 · 默认描边 */ --line-strong: #D8D1C3; /* 线强 · 强调描边 */ /* ---- 语义色（直接用 G4 原色，无变体层） */ --success: #C1D236; /* 猕猴桃绿 · 成功 */ --warning: #FF911F; /* 亮万寿菊 · 警告 */ --danger: #E64D67; /* 天堂粉 · 错误（表单必填*用） */ --info: #49BBCA; /* 湖蓝 · 信息（复用主色） */ /* ---- 辅助级 · 高亮（局部备用） */ --kiwi: #C1D236; /* 猕猴桃绿 */ --lime: #DEE884; /* 阳光青柠 */ --marigold: #FF911F; /* 亮万寿菊 */ --paradise: #E64D67; /* 天堂粉 */ --blazing: #F6E63E; /* 炽烈黄 */ /* ============================================================ 1.5 暗色模式映射（轻量 · 场景用，非完整主题切换） 适用：暗色海报 / 夜场晚会 / 深色背景公众号条 / 暗模式界面。 只在"确需暗色"的载体上取用，日常亮底不用。 · 基底深墨代替云白（保留色的对比，不放纯黑 #000） · 浮层比基底更浅一档（层次） · 主色湖蓝保持（品牌色不随明暗变） · 文字反色：亮文字用云白替代墨 ============================================================ */ --dark-base: #181915; /* 暗基底 · 换 --base（不用纯黑） */ --dark-surface: #24261F; /* 暗浮层 · 换 --surface（比基底亮一档） */ --dark-ink: #F1F0EC; /* 暗底上主文字 · 换 --ink（云白反色） */ --dark-text-2: #C9C4B8; /* 暗底上次要文字 · 换 --text-2 */ --dark-text-3: #8A867C; /* 暗底弱文字 · 换 --text-3 */ --dark-line: #3A3B34; /* 暗底描边 · 换 --line */ /* 主色/辅/点缀/语义色：保持 A 不变，暗底上仍清晰 */ /* ============================================================ 2. 内置备用方案（局部用，不占主界面） B·暖光（聚会暖灯） C·青柠清新（青柠气泡水） —— 它们是"独立的备用"，不参与 A 主界面，规则与主案完全分开： · 基底与主案一致，统一云舞白 --base。#F1F0EC · 一旦启用某备用方案，该区块/页面整体走那一套，不与 A 混 · 永不和 A 同屏大面积切换（避免 palette 混乱，taste 4.11） ============================================================ */ --b-main: #FF911F; --b-accent: #E64D67; --b-point: #F6E63E; --b-base: #F1F0EC; --c-main: #C1D236; --c-accent: #49BBCA; --c-point: #F6E63E; --c-base: #F1F0EC; } /* ============================================================ 3. 字体 FONT ------------------------------------------------------------ ⚠️ 铁律：使用本体系字体时，必须带 @font-face 实际加载 woff2 文件，否则 PuHuiTi3/Poppins 找不到会回退到系统 字体栈，导致同页个别汉字落到不同字体、视觉大小不一。 字体策略（2026-09 升级）： · 中文 = Alibaba PuHuiTi 3.0（普惠体 3.0），系统已装全量 55 Regular + 85 Bold。网页用「智能子集化」woff2。 · 英文 = Poppins，系统已装全 9 磅（Thin~Black，含斜体）。 · 智能子集：覆盖 GB2312 一级 3755 字 + 项目文案 + 中文标点 + ASCII，约 505KB/字重，基本不缺常用汉字。 woff2 文件（site/assets/fonts/）： pht400.woff2 / pht700.woff2 ← 普惠体智能子集（400/700） pop400/500/600/700.woff2 ← Poppins 按需（英文） 重新生成子集（pyftsubset）： pyftsubset AlibabaPuHuiTi-3-55-Regular.ttf \ --text-file=/tmp/subset_chars.txt \ --output-file=pht400.woff2 --flavor=woff2 --no-hinting 字集 /tmp/subset_chars.txt = GB2312一级 + 项目文案 + 标点。 ============================================================ */ :root{ --font: 'PuHuiTi3','Poppins','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; --font-en: 'Poppins','PuHuiTi3',sans-serif; } /* ============================================================ 4. 字号阶梯 TYPE SCALE（clamp 响应式） ============================================================ */ :root{ --fs-display: clamp(40px, 6.5vw, 72px); /* 首屏主标 */ --fs-h1: clamp(28px, 4.2vw, 44px); /* 屏标题 */ --fs-h2: 26px; /* 屏内小题 */ --fs-lead: 20px; /* 导语 */ --fs-body: 16px; /* 正文基准 */ --fs-small: 14px; /* 辅助/卡内文 */ --fs-micro: 12px; /* 眉线/标签 */ --lh-title: 1.25; /* 标题行高 */ --lh-body: 1.8; /* 正文行高 */ --tracking-tag: 0.3em; /* 眉线宽字距 */ } /* ============================================================ 5. 圆角 RADIUS（一套规则 · LOCK 锁死） ------------------------------------------------------------ ⚠️ LOCK：三者对应用途一旦定死，全站禁混； "按钮=999、卡=16、输入=12" 是固定映射，按组件用途取值， 不得在同一页面让"圆形按钮"配"方卡"或反过来。 · 圆形=按钮/胶囊 · 16px=卡片/弹窗 · 12px=输入框/小图 圆角只在 3 值间选，禁止发明第 4 种（如 8px/20px）。 ============================================================ */ :root{ --radius-input: 12px; /* 输入框/小图 */ --radius-card: 16px; /* 卡片/弹窗 */ --radius-pill: 999px; /* 按钮/胶囊 */ } /* ============================================================ 6. 间距步进 SPACING（4 基准 · 大间隙） ============================================================ */ :root{ --sp-1: 48px; /* 区块顶部 */ --sp-2: 72px; /* 宽留白 */ --sp-3: 96px; /* 屏间留白 */ --sp-4: 128px; /* 章节呼吸 */ --sp-in: 24px; /* 卡片内边距 */ /* 组件内部小间距（组件节奏） */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; } /* ============================================================ 7. 容器宽度 CONTAINER ============================================================ */ :root{ --container-read: 720px; /* 正文/卡片阅读 */ --container-page: 960px; /* 整页内容宽（上限） */ } /* ============================================================ 8. 阴影（克制无硬影） ============================================================ */ :root{ --shadow-subtle: 0 2px 10px rgba(26,26,26,.05); --shadow-card: 0 18px 44px rgba(20,18,14,.08); } /* ============================================================ 9. 动效 MOTION（档位 3 = 轻量克制） ------------------------------------------------------------ taste-skill MOTION 档位 3（1-3=静态/4-7=流畅/8-10=编排） 冷萃学院定档 3：只保留"有意义的反馈" · hover / 按下 / 聚焦 的即时反馈 · 模态/状态 切换的过渡 · 进场的轻 reveal（一次，不循环） 不做：花哨循环动画、滚动编排、磁吸、视差 承诺即兑现：档位设 3，就只做 3 该有的动效。 尊重 prefers-reduced-motion（见下方 @media，强制静帧）。 ============================================================ */ :root{ --motion-scale: 3; /* MOTION 档位声明：3=轻量克制 */ --ease: cubic-bezier(.16,1,.3,1); /* 统一缓动 */ --dur-fast: 160ms; /* hover/按下反馈 */ --dur: 300ms; /* 常态过渡 */ --dur-slow:480ms; /* 进场/状态切换 */ } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition:none !important; animation:none !important; } } /* ============================================================ 10. 基础复位（可选引入） ============================================================ */ *{ margin:0; padding:0; box-sizing:border-box; } body{ background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; }