色彩

数值

html { background: #F4F5F9; }            /* 深：#0B0C10；body 保持透明 */
--glass:        rgba(255,255,255,.62);  /* 深：rgba(40,42,52,.55) */
--glass-strong: rgba(255,255,255,.78);  /* 深：rgba(44,46,58,.72) */
--glass-edge:   rgba(255,255,255,.9);   /* 顶边亮线；深：rgba(255,255,255,.12) */
--sep:          rgba(60,60,67,.12);     /* 深：rgba(84,84,88,.5) */
--shadow: 0 10px 30px rgba(20,30,60,.08), inset 0 1px 0 var(--glass-edge);
                                        /* 深：0 10px 30px rgba(0,0,0,.35) */

用在哪

.62磨砂：侧栏、顶栏、tab bar、弹层——视口大小的面。.78不磨砂：条目卡、阅读栏、右栏——随正文长的面。本站同样：侧栏、顶栏挂.62磨砂，条目卡.78不挂。

为什么

屋主要「参考苹果的UI和配色」。分层只靠玻璃、投影和分隔线，不用边框。长面不挂磨砂：长到近两万像素会超显卡纹理上限、整层丢弃，每次滚动还要重新光栅化；屋主台式机没显卡，磨砂正是那台机器的瓶颈。

数值

--label:  #1C1C1E;              /* 深 #F2F2F7 */
--label2: rgba(60,60,67,.76);   /* 深 rgba(235,235,245,.62)；次级，承载文字 */
--label3: rgba(60,60,67,.32);   /* 深 rgba(235,235,245,.32)；只给 chevron、分隔符 */

为什么是.76

样张原值.62叠最亮光晕角只有3.42；改.73只压过了蓝光晕，绿、橙、粉、青、靛的光晕更深，只有4.28–4.49；.76让六色都过（本站实测条目卡最低4.91）。一个值，不按强调色分表。

各家本地压深

统一值只是起点：plan内容区的字直接压光晕、没有玻璃底，本地压到.85；card的hero副标题、页脚也在裸光晕上，压到.89、深色.64。这两处都有记录，是SPEC允许的本地偏离。本站把所有文字都放在玻璃卡上，分组说明这类压裸光晕的字只用正文色，所以.76够用。

文字档

/* 浅色：HIG 增强对比度 */  蓝 #0040DD · 绿 #1F7A36 · 靛 #3634A3 · 橙 #C93400 · 粉 #D30F45 · 青 #0071A4 · 红 #D70015
/* 深色：HIG 深色增强对比度 */ 蓝 #409CFF · 绿 #30DB5B · 靛 #8E8BFF · 橙 #FFB340 · 粉 #FF6482 · 青 #5AC8F5 · 红 #FF6961

绿用#1F7A36，不用HIG的#248A3D（压白只有4.40）；深色靛从HIG的#7D7AFF提亮到#8E8BFF（对#0B0C10是6.8）。

渐变浅端

浅色accent-2：蓝#5AC8FA、绿#A8E063、靛#BF5AF2、橙#FFD60A、粉#FF9AA2、青#64D2FF。深色样张只重写了蓝（#64D2FF），其余沿用浅色那组，本站与岗岗、card一样照这个写。

现状

深色accent-2四家是三种写法：刷刷、plan各自配了一套，互相也对不上。统一与否等控制室定，正在对齐。

代码

.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); /* 与品牌图标同一条 */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);   /* 唯一的补救：不压深渐变、不加描边 */
  font-weight: 600;
  box-shadow: 0 8px 18px var(--accent-shadow);
}
.btn-tint  { background: var(--accent-tint); color: var(--accent-text); }  /* 次按钮：实色软底 + 文字档 */

为什么

曾经为了4.5把渐变压深，屋主看了说要和左上角一样浅。审美例外只开这一处：别的承载信息的文字——正文、链接、chip、次按钮——一律≥4.5，压深的「文字档」只用在它们身上。

数值

        填充（浅 / 深）      文字档（浅 / 深）     实色软底（浅 / 深）
红      #FF3B30 / #FF453A   #D70015 / #FF6961   #FFE9E8 / #412021
橙      #FF9500 / #FF9F0A   #C93400 / #FFB340   #FFF3E3 / #413019
绿      #34C759 / #30D158   #1F7A36 / #30DB5B   #E9F9ED / #1C3927

用在哪

plan的风险色：红＝冲突逾期、橙＝今天截止、黄＝两天内到期（2026-10-08加，只给日期标签，见下一条「黄色只给两天内到期」）、绿＝完成、灰＝未开始和离截止三天以上；风险色覆盖阶段色，用户不能自定义。刷刷答对绿、答错红。本站条目里的「坑」铺橙色实色软底，左边写着「坑」字，不只靠颜色。

为什么

语义不能跟着强调色变，换了强调色「红」还得是红。色弱的人分不清红绿，所以风险提示必须有文字说明，不能只靠颜色。

本站本地

深色红字HIG原值#FF6961压强玻璃叠青光晕最浓角只有4.49，本站提亮到#FF6E66（4.63）；其余五个文字档压最不利角都≥4.62。

数值 / 代码

urgencyTone(days)            // days = 截止日 − 今天，按日历天
  days < 0    overdue  红   逾期N天
  days === 0  today    橙   今天截止
  days ≤ 2    soon     黄   明天截止 / 还有2天
  其余        normal   灰   还有N天（--fill 底 + 次级字）
已完成 / 已归档        一律 normal，只给灰色的绝对日期（10月5日）

黄（2026-10-08加，只给 soon）
  填充    #FFCC00 / #FFD60A   只当填充，不当字：压白1.51、压页面底1.39
  文字档  #7A5200 / #FFD60A   压自己的软底6.23 / 9.04
  软底    #FDF3CF / #3A3214   （实色）
token 按用途起名   --soon-50: var(--yellow-soft);  --soon-700: var(--yellow-text);

用在哪

plan今日、日程、全部任务三页的任务行日期标签，和详情里的截止日期胶囊，同一个urgencyTone。全部任务页近两天之外写绝对日期（周四／9月30日），颜色照样按这四档。SPEC写明四家通用：其余三家以后有日期标签照这一套。和上一条「语义色」的交叉：橙从「即将截止」收窄成「今天截止」，明天、后天归黄。

为什么

改版前不急的日期（「明天」「还有12天」「10月20日」）也用强调色软底＋强调色字，和「逾期」一样大、一样粗、一样有颜色，远的和急的一样响。分四档以后，只有真急的带颜色，越急越暖；强调色只留给能点的东西，日期不再冒充按钮。

数值

--fill: #E6E6E6;          /* 浅 = 白与正文色 #1C1C1E 兑11%；深 #393A3E = 深底与正文色兑20% */
--accent-tint: #E3F0FF;   /* 实色软底：浅 = 填充色兑11%进白；深 = 兑18%进 #17181C（#152B45） */
--accent-shadow: rgba(0,122,255,.13);  /* 投影：必须半透明，不压字 */
/* plan 再拆一支 --accent-stroke（描边，半透明，按图形 ≥3判） */

为什么

半透明软底和压在上面的字是同一个色相，底吃进光晕后对比度随位置漂：岗岗实测同色相文字只有3.9–4.4，plan是「同一个chip挪个位置就从4.4掉到3.3」。实色把这一格从「随光晕变」变成确定值，文字档能原封不动用统一值。

命名教训

旧的--accent-soft同时当软底、投影、描边，--on-accent同时当主按钮白字和实底上的字——名字说的是长相，所以谁都拿去用。token的名字必须说明用途，不是说明颜色。

代码

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 12% 8%,   var(--blob1), transparent 60%),
    radial-gradient(34vw 34vw at 92% 18%,  var(--blob2), transparent 60%),
    radial-gradient(40vw 40vw at 70% 100%, var(--blob3), transparent 60%);
  filter: blur(10px);
}
/* 蓝（默认）浅：rgba(90,200,250,.55)  rgba(255,214,170,.55)  rgba(175,160,255,.45)
             深：rgba(10,132,255,.35)  rgba(255,159,10,.22)   rgba(94,92,230,.35) */

为什么

光晕是这套视觉的主要特征，不为了字色去减淡它——字不够就上玻璃或压深字，别动光晕。用固定伪元素而不是background-attachment:fixed：iOS Safari不支持固定附着，背景会被拉成整页高、越往下越跑偏。

代码

<head>
  <meta name="theme-color" content="#F4F5F9">   <!-- 深色 #0B0C10，脚本跟着改 -->
  <script src="assets/boot.js"></script>         <!-- 同步，排在样式表之前 -->
  <link rel="stylesheet" href="assets/star.css">

// boot.js 要点：读 star-mode / star-accent（try/catch，非法值回落 light + blue），
// auto 按 prefers-color-scheme 解析后写进 data-mode，并监听系统翻转。
root.setAttribute("data-mode-pref", pref);
root.setAttribute("data-mode", pref === "auto" ? (mq.matches ? "dark" : "light") : pref);
root.setAttribute("data-accent", accent);

为什么

属性在样式表下载前就在<html>上，首帧拿到正确的令牌：深色下不先白一下，切过强调色刷新也不闪别的色。data-mode写已解析值，CSS只要一份深色块，不必为auto再抄一遍（plan的写法）。file://下读localStorage可能直接抛错，读写一律try/catch。

本站写法

令牌一行一对浅深值：--bg: var(--lt,#F4F5F9) var(--dk,#0B0C10)，挂在:root,[data-mode],[data-accent]上，所以样例里任何元素加属性都能局部切——这页的深色样例全是这么做的。

公式

const L=h=>{const [r,g,b]=[1,3,5].map(i=>parseInt(h.slice(i,i+2),16)/255).map(c=>c<=0.03928?c/12.92:Math.pow((c+0.055)/1.055,2.4));return .2126*r+.7152*g+.0722*b};
const C=(a,b)=>{const x=L(a),y=L(b);return ((Math.max(x,y)+.05)/(Math.min(x,y)+.05)).toFixed(2)};

两法

1. 公式法压最不利角：对每个文字色，底取玻璃叠光晕最浓那一角的合成色，套上面的L/C。
2. 像素法交叉验证：真实页面逐元素截图，取底色像素众数（含磨砂与光晕的最终合成），浅深 × 六强调色 × 全部承载文字的元素。

两条路各抓得到对方漏的：岗岗公式法抓到粉色光晕下顶栏环节名4.35，像素法抓到深色弹层底太亮、三个强调色选中项4.17–4.25。任一条不过就算不过。

本站实测

条目卡（强玻璃.78叠光晕最浓角），浅深 × 六强调色：次级字最低4.91（浅靛）/5.17（深青）；强调色文字档最低4.75（浅粉）/4.68（深蓝）。侧栏磨砂.62叠饱和度提升后的光晕：粉文字档只有4.26，所以侧栏、顶栏、tab bar里的强调色字一律压在强玻璃选中底上（≥4.70）。

代码

--stage-1: #0F1128; --stage-2: #1B1740; --stage-3: #0B0C1E;   /* 深色 #0A0B1E #141030 #070812 */
--stage: radial-gradient(50% 45% at 50% 55%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
         linear-gradient(160deg, var(--stage-1), color-mix(in srgb, var(--accent) 18%, var(--stage-2)) 55%, var(--stage-3));
.stage::before { /* 十二颗星：radial-gradient(1.2px 1.2px at 12% 18%, #fff 60%, transparent) × 12 */
  opacity: .85; animation: twinkle 9s ease-in-out infinite; }
.stage::after  { background: radial-gradient(90% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.5)); }  /* 暗角 */
@keyframes twinkle { 0%, 100% { opacity: .85 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .stage::before { animation: none } }

为什么

舞台底随强调色的深色调、不用纯黑：这一句是控制室2026-09-23 02:15下发时自己加的，查不到屋主说过（这里以前写成「屋主裁定」，2026-10-08查会话记录更正，经过见否掉的方向 · 舞台底六选）。屋主从六选（极光雾、聚光舞台、网格渐变加颗粒、星野、玻璃台面、光环）里回了「D」，挑的是星野；球形选卡撤掉之后星野底留了下来。

写法

:root {                       /* token 写裸 H S% L%（shadcn 惯例） */
  --background: 42.9 33.3% 95.9%;   /* #F8F6F1 */
  --xw-lava: 21 71% 39%;            /* #AA4E1D */
}
.dark { --background: 225 12% 9.5%; /* #15171B */ }
.x { color: hsl(var(--xw-lava)); }  /* CSS Module 里手写必须包 hsl()，否则整条声明无声失效 */

为什么

「名片为主」的暖屋：低饱和暖底读起来安静，饱和色一多就不是这间屋子了，所以每个饱和色只许出现在写明的位置。对比度不达标的五处（辅助小字、熔岩橙压地毯、输入框边框、hover面语义、缺正文墨槽位）都按实测只压明度修掉。

数值

--shadow-rest: 0 1px 2px rgba(74,77,53,.05);          /* 贴地：常态卡片、列表项 */
--shadow-lift: 0 8px 20px -10px rgba(74,77,53,.11);   /* 浮起：抬起来的卡片、弹层 */
.hall__card   { box-shadow: 0 16px 34px -14px rgba(74,77,53,.22); } /* 挂画：比工具卡深一倍 */

为什么

纯黑阴影压在暖纸底上会发灰。两档之外不要第三档，hover也不换档。工具卡摆在地毯上，门厅卡片挂在墙上，所以挂画投影更沉；色块与画纸各自不加投影，否则接缝处叠出一道脏影。

数值

.dark {
  --background: 225 12% 9.5%;   /* #15171B 夜空炭 */
  --foreground: 42 22% 88%;     /* 暖奶油 */
  --primary:    44 34% 70%;     /* 黄铜灯色 */
  --xw-olive-block: 222 14% 19%;/* #2A2E37 青黛——和画里的夜空同族 */
  --xw-lava:    24 80% 60%;     /* 炉火橙 */
}
html.dark { color-scheme: dark; }  /* 滚动条、表单控件跟着入夜 */

为什么

夜不是把亮色反相，是「这间屋子晚上长什么样」。夜橄榄（深绿一暗就泥）和琥珀棕（全屋刷暖发腻）两版都被否，第三版把底换成冷的，暖字才显得出暖。切换用顶栏的「墙壁开关」，整页交叉淡化。

现状

规格原则「两个时辰，一间屋子」和globals.css的文件头、.dark注释都已改成冷夜暖灯（225的冷底、40–45的暖字），文档与代码对得上（2026-10-08核）。此前它们写的「色相家族不变，纸压成松烟暖炭」是第一、二版的旧说法。

代码

:global(.dark) .deco { filter: brightness(0.78) saturate(0.85); }   /* 四处绿植同一条 */
.poster { filter: brightness(0.66) saturate(0.8); }                 /* 工具页静态海报：更暗一档，同样不偏冷 */

为什么

brightness等比缩三个通道、色相不动，saturate只收一点彩度：暗一档、仍然是绿的、墨线留着。hue-rotate会把红勾和丝带一起转成青色。漂浮叶子第一版整体偏冷，屋主说叶子几乎看不见、晴天娃娃变成蓝灰，被否。

数值

01 · 日程安排   --brand: #2563EB  --brandsoft: rgba(37,99,235,.11)   纸底4.79
02 · 刷刷       --brand: #B4232C  --brandsoft: rgba(180,35,44,.10)   纸底6.04
03 · 岗岗       --brand: #8F1D2C  --brandsoft: rgba(143,29,44,.18)   纸底8.17（工具架变体；岗岗站内 #A62031）
04 · card       --brand: #10666E  --brandsoft: rgba(16,102,110,.12)  纸底6.18（汐青）
05 · travel     --brand: #296B38  --brandsoft: rgba(41,107,56,.12)   纸底5.97（林绿）
06 · 设计合集   --brand: #702682  --brandsoft: rgba(112,38,130,.11)  纸底8.50（梅紫，暂定）
:global(.dark) .icon, :global(.dark) .open { background: hsl(42.9 33.3% 95.9%); }  /* --tool-paper：白天那张纸 */

为什么

家族感靠中性系统统一，身份靠品牌色区分；身份色一旦铺大面积，暖屋就花了。不得用于卡片边框、底色、标题、正文、状态条、hover面、分隔线。夜里页底上身份色只有1.96–3.47，换纸之后回到白天的数——观感像暗屋里几块点着灯的小牌子。

新增一支

1. 和已有几支色相拉开（221°、355°、350°之外，汐青取185°）；
2. 和这个工具自己的作品色系读得到一起（card十三张卡里冷色占多数）；
3. 够深，能当纸上的字（card卡面的#8ACBE8压暖纸只有1.65，只能当装饰）。

为什么

装饰SVG是自洽的图形单元，十来个只出现一次的色值全提成全局token只会污染色板。同理，定义了却没用上的--board #B8B69E不落地——不上线未使用的token。海湾蓝在全站只剩一个去处：绿植里半透明的冷调叶影。

对比度

这些都是纯装饰，不适用3:1/4.5:1；浅叶压纸底只有1.88，就是「很淡」的设计意图。