一套让"同一工作室出品"的规范:冷紫灰打底、六环柔色点睛、无纯黑无纯白、去渐变去 emoji。高级感来自留白、字体层级与克制,不靠颜色堆砌。切右上角看两态。
从墨紫 #241C2F 到纯白的 9 阶灰,带紫调,和靛紫强调色同色温,比中性灰更"成套"。
最深是墨紫、最浅是柔白;深色态文字用柔白 #ECEAF3,不用死黑死白,不压秤。
中性承担 ~90%。六环柔色只在"有意义处":身份/档位整卡填色、作品缩略图、当前环。
平涂纯色、SVG 线性图标(描边 1.6–1.7)、几何符号。不用渐变填充、不用 emoji。
板块靠底色深浅 + 分隔线 + 留白区隔,不靠花色。文案按正式产品页,删卖点副标题。
只让"要看的元素"动(如当前环)。动效是信号不是装饰,且尊重 reduced-motion。
面向孩子的界面说"我…",用大白话(反馈/搞懂),不用方法论黑话(回应/认知/意图)。
--onf。中性卡上标类别只用一个小圆点 --d1…--d6,不上彩色描边。任何卡的边框永远 --line,hover 只加深一档中性 + 抬起,不变彩色。
数据卡 16、填色卡 18;overflow:hidden 让缩略图贴边。
要么整卡填色(身份),要么卡内一个 8px 小圆点(数据)。不留中间态。
| 型 | 用途 | 样式 | hover / active / focus |
|---|---|---|---|
| 主 | 首要动作 | 主色实底 + --on-accent | 加深 --accent-press + 投影 / 下沉 1px / 2px 主色描边 |
| 次 | 次要动作 | 透明 + 中性边 + 墨字 | 灌 --sunk、边加深 / 下沉 / 主色描边 |
| 黑药丸 | Copilot / 高强调 | 炭色 --cosmos + 柔白字 | 抬起 + 加深投影 |
| 图标 | 主题 / 搜索 | 无底、墨-2 图标 | 灌 --sunk、图标转墨 |
去掉居中留白,侧栏死贴视口左缘,内容一路铺满右侧。
顶=‹返回;中=品牌 + 开始新创造 + 导航;底=主题小图标 + 用户卡(细线隔开)。
深浅切换 = 用户身边一个小图标(日/月);搜索 = 内容顶栏右侧。
下沉带 / 分隔线 + 留白制造呼吸。不用 02/03 编号、不用卖点副标题。
| 环 | 孩子版(第一人称·大白话) | 家长版(方法论) |
|---|---|---|
| 1 | 想法 · 我想做什么 | 意图 |
| 2 | 搞懂 · 我需要懂的 | 知识 |
| 3 | 工具 · 我用什么做 | 工具 |
| 4 | 作品 · 我做出来的 | 作品 |
| 5 | 反馈 · 大家怎么说 | 回应 |
| 6 | 成长 · 我越来越像创造者 | 身份 |
/* 浅 = 控制态 · 深 = 创作台。无纯黑无纯白 */ :root{ /* 中性 · 冷紫灰 9 阶 */ --bg:#FAFAFF; --panel:#FFFFFF; --sunk:#F0EFF4; --line:#D9D8DF; --ink:#241C2F; --ink-2:#4F4859; --muted:#6B6674; --muted-2:#847F92; /* AA 对比修复,原 #87828F/#A8A5AF 不达标 */ /* 强调 + 炭色药丸 */ --accent:#5B54D6; --accent-press:#4A44C0; --on-accent:#FFF; --cosmos:#241C2F; --on-cosmos:#ECEAF3; /* 六环柔色(浅)+ 填色文字 */ --f1:#CAD6FF; --f2:#E4D6FB; --f3:#C6EEDB; --f4:#FBEBB0; --f5:#FCD6C8; --f6:#F8D2E3; --onf:#191A21; /* 间距 4/8 网格 · 圆角三档 · 命名动效 */ --sp-1:4px…--sp-8:64px; --r-sm:10px; --r-md:14px; --r-lg:18px; --mo-breathe:2.6s; --mo-lift:.14s; --mo-settle:.22s; } /* 深色:底 #1A1524 · 面板 #241C33 · 文字 #ECEAF3 · 药丸 #2C2440 · muted-2 #736B85(AA 修复) */ /* 六环(深·发光):#8EA6F6 #BFA4F1 #6FD4A6 #F0D96C #F3A088 #EB9EC3 */
--sp-1 4px 到 --sp-8 64px。卡内 padding 用 sp-3/4,区块间距用 sp-5/6,页级留白用 sp-7/8。不再手写随手值。
--r-sm 10(chip/图标按钮) · --r-md 14(数据卡/输入框) · --r-lg 18(填色卡/大容器)。
--mo-breathe 呼吸(当前环/待命小云) · --mo-lift 抬起(hover) · --mo-settle 落定(状态提交/卡片进场)。
2.6s 循环、极小幅度(≤3px 或 opacity ±.08)。用于"当前环"高亮、小云待命态浮动。尊重 reduced-motion。
.14s、卡片/按钮 hover 位移 1–2px + 投影加深。快、干脆,不做弹簧回弹。
.22s、稍慢的 ease-out。用于决策卡生成、状态切换定格——给"这一步生效了"的确认感。
小云是产品唯一的角色资产——Copilot 的脸,也是"创造六环环绕你"的隐喻。形/笔/色/神四条锁死,表情传状态而非道具堆砌。
六环之光只在深色舞台(创作台/App 图标/Copilot 唤起)点亮;浅色控制台里小云不发光,改用中性投影 --shadow-sm。
无论明暗主题,小云身体恒为亮云 + 墨线。深底上 = 夜空里一朵会发光的云,呼应"还没点亮的星云"。
必须有眼、不用纯黑(墨紫 --onf 系 + 描边)、内倾角给灵气。高光 + 星芒是唯一允许的"卖萌"元素。
问号/水珠/心形/星星等小道具一律细线或六环色填充,不用系统 emoji,不破去 emoji 红线。