lidf
a777665775
- SKILL.md: 完整设计规范（色彩体系、微信公众号兼容规则、图片排版方案） - scripts/extract_wechat.py: 微信公众号文章抓取脚本 - scripts/build_hundun_html.py: 混沌风格 HTML 生成脚本（组件化） - examples/hundun-lead-article.html: 领教营二期排版示例 - resources/color-palette.md: 混沌品牌色彩参考
2.1 KiB
2.1 KiB
混沌学园品牌色彩体系参考
核心色板
┌──────────────────────────────────────────────────┐
│ 混沌黄 (Primary) #F5B700 ████████████████ │
│ 深金 (Secondary) #D99B00 ████████████████ │
│ 石墨黑 (Dark) #181818 ████████████████ │
│ 辅助深色 #242424 ████████████████ │
│ 原生白底 #FFFFFF ████████████████ │
│ 极浅灰 #F8F9FA ████████████████ │
│ 微黄底 #FFFDF5 ████████████████ │
└──────────────────────────────────────────────────┘
文字色板
| 角色 | 色值 | 使用场景 |
|---|---|---|
| 主正文 | #2B2B2B |
白底区域段落文字 |
| 辅助正文 | #333333 |
非卡片区域段落 |
| 二级正文 | #4E5969 |
卡片内说明文字、列表文字 |
| 深色卡内文字 | #FFFFFF |
石墨黑背景下的正文 |
| 深色卡内辅助 | #CCCCCC |
深色卡内的副标题/描述 |
边框与分割
| 角色 | 色值 | 使用场景 |
|---|---|---|
| 浅色卡片边框 | #E5E6EB |
年份卡片、报名卡片外框 |
| 深色卡片边框 | #333333 |
深色区域内部元素边框 |
| 虚线分割 | #D9D9D9 |
二维码上方的分隔线 |
渐变
- 底部 CTA 横幅:
linear-gradient(135deg, #F5B700 0%, #FFA000 100%)
配色原则
- 白底为基调：顺应微信公众号默认白色阅读环境
- 黄色做点缀：用于标签徽章、左侧 Accent 线、边框高亮、CTA 按钮
- 黑色做对比：Hero 看板和核心理念使用深色反转，制造视觉焦点
- 不大面积铺黑底：避免在微信白底环境中产生撕裂感