4 套基于瑞士国际主义风格(Swiss Style)的高反差配色。每套都遵循"高级灰白底 + 单一高饱和高亮色"的极简原则——这是瑞士风的灵魂,不允许混搭多个高亮色。
assets/template-swiss.html 的 <style> 块:root{ 块--paper / --paper-rgb / --ink / --ink-rgb / --grey-1 / --grey-2 / --grey-3 / --accent / --accent-rgb / --accent-onvar(--...),无需任何其他改动适合:通用场合、商业发布、AI/科技产品、设计领域分享。最经典的瑞士风配色,绝不出错。 调性:纯白底 + IKB 克莱因蓝,极致冷静、理性、有学术感,像 Helvetica Forever 或 Massimo Vignelli 的作品集。
--paper:#fafaf8;
--paper-rgb:250,250,248;
--ink:#0a0a0a;
--ink-rgb:10,10,10;
--grey-1:#f0f0ee;
--grey-2:#d4d4d2;
--grey-3:#737373;
--accent:#002FA7;
--accent-rgb:0,47,167;
--accent-on:#ffffff;
使用要点:
.accent-block)上极有视觉冲击.accent 类用蓝色,但不要满屏蓝——IKB 一旦泛滥就掉档dark 主题页交替使用,黑底高亮 IKB 同样高级适合:年轻、运动、零售、消费品、活力主题、Y2K 复古设计。 调性:浅米白底 + 柠檬黄,鲜亮、有活力、警示感强,像 IKEA 或 Beck Design 的视觉语言。
--paper:#fafaf8;
--paper-rgb:250,250,248;
--ink:#0a0a0a;
--ink-rgb:10,10,10;
--grey-1:#f0f0ee;
--grey-2:#d4d4d2;
--grey-3:#737373;
--accent:#FFD500;
--accent-rgb:255,213,0;
--accent-on:#0a0a0a;
使用要点:
.accent-on 必须用纯黑(不是白)才能保证可读性.mark / .underline-accent)效果最强适合:生态、可持续、健康、新兴科技、Z 世代品牌、AI 创业项目。 调性:浅米白底 + 荧光柠檬绿,有未来感、年轻、当代,像 Acne Studios 或 Off-White 的视觉。
--paper:#fafaf8;
--paper-rgb:250,250,248;
--ink:#0a0a0a;
--ink-rgb:10,10,10;
--grey-1:#f0f0ee;
--grey-2:#d4d4d2;
--grey-3:#737373;
--accent:#C5E803;
--accent-rgb:197,232,3;
--accent-on:#0a0a0a;
使用要点:
.accent-on 必须用纯黑适合:工业、警示、运动、施工、汽车工业、技术发布会的"警告/重点"页。 调性:浅米白底 + 安全橙,工业感、紧迫感、视觉锚点感,像 Saul Bass 海报或 Highway Gothic 标识系统。
--paper:#fafaf8;
--paper-rgb:250,250,248;
--ink:#0a0a0a;
--ink-rgb:10,10,10;
--grey-1:#f0f0ee;
--grey-2:#d4d4d2;
--grey-3:#737373;
--accent:#FF6B35;
--accent-rgb:255,107,53;
--accent-on:#ffffff;
使用要点:
font-weight:600 以上).accent 模式,橙色满屏会过于刺眼,做局部高亮即可| 如果是... | 推荐主题 |
|---|---|
| 不知道选啥 / 第一次用 / AI/科技/设计 | 🔵 克莱因蓝 |
| 年轻、活力、消费、零售 | 🟡 柠檬黄 |
| 生态、未来、Z 世代、新兴 | 🟢 柠檬绿 |
| 工业、警示、汽车、紧迫感 | 🟠 安全橙 |
--grey-1/2/3)在 4 套主题里完全相同,无需调整--accent 变量,翻页时鼠标附近会偷渡一抹高亮色International / Helvetica ,柠檬黄配 Active / Living)--paper / --grey-1/2/3 / --ink 跨主题统一,只换 accent| 变量 | 值 | 用途 |
|---|---|---|
--paper |
#fafaf8 |
主底色(极浅暖白) |
--grey-1 |
#f0f0ee |
浅灰底(用于 .grey-block / 区块底) |
--grey-2 |
#d4d4d2 |
中灰(分割线、border) |
--grey-3 |
#737373 |
暗灰(辅助文字 / meta) |
--ink |
#0a0a0a |
文字主色(近黑) |
这套灰阶是经过校色的"高级灰",在任何 accent 色下都不抢戏。不要改成纯白(#fff)或纯黑(#000)——会损失瑞士风的"克制"质感。
选定主题后,告诉用户:"用 🔵 克莱因蓝 / 🟡 柠檬黄 ..." 并在 deck 项目记录里备注,方便后续迭代时保持一致。