灵蟹设计规范
白纸、红印、宋体字。官网、功能落地页、插件市场共用同一套色彩、字体、控件与动效,所有页面从这里取值。
I设计原则
净
干净
白底为主,一屏只放一个重点。用留白和细线分隔,不用投影、渐变和玻璃质感。
文
有文气
全站衬线字体,标题像书名,正文像书页。中文数字、目录体、印章、稿纸是可用的修辞。
准
克制的红
蟹红只给最重要的动作和信息:主按钮、当前状态、关键数据。一屏红色面积不超过 15%。
II色彩
主色取自 logo 的三阶红。中性色带一点暖调,避免纯灰的冷硬感。
品牌红
蟹红 Red
#E2311DRed 700 · 悬停
#C42613Red 400
#EF4A3FRed 300
#F47268Red 100
#FBD9D4Red 50 · 浅底
#FDF1EF中性色
墨 Ink
#1B1A19正文 Ink 2
#4A4744辅助 Ink 3
#8A857F分割线 Line
#EBE6E0纸 Paper
#FAF7F2白 White
#FFFFFF页面用色比例
白 70%纸 12%墨 8%红 10%
III字体
中文:思源宋体(Noto Serif SC,自托管、按需分片加载);英文与数字:Cormorant Garamond,斜体用于点缀;花体:Great Vibes,仅用于装饰大字。系统回退:Songti SC、STSong、SimSun。
从你的故事开始
插件市场
快速上手、立刻见效的辅助工具
资深编辑签约逻辑模拟
雨是从黄昏开始下的。沈砚把最后一盏灯点上,门外便响起三声叩门——不急,不缓,像是早就算准了时辰。
登录即送免费审稿额度 · 之后消耗会员 AI 额度
Final Verdict · On Fire
IV按钮
圆角 8px,无投影。一个区域最多一个主按钮。悬停加深或反色,箭头右移 4px;按下下沉 1px。
类型
尺寸 · 56 / 48 / 36
红底上
V表单
高 46px,1px 描边;聚焦时描边变红并带 3px 浅红光圈。错误态只改描边和提示文字颜色。
最多 30 字
请输入有效的邮箱地址
拖拽文件到此处,或点击上传支持 .txt / .md / .docx
VI标签与印章
标签圆角 4px、高 24px。印章是品牌化的强调符号,只用于评级结果、页面落款等关键位置,每屏不超过一个。
官方最新活动社区必读
速更审官方
甄选
甄选
VII页签与分页
分段控件用于同一组数据的切换(排序、平台口径);下划线页签用于页面内的内容分区。指示条滑动过渡 280ms。
分段控件
下划线页签
分页
VIII卡片
白底 + 1px 分割线,圆角 14px(大卡片 22px)。可点击卡片悬停时描边变墨色、上移 3px,不加投影。
IX动效
动效只做三件事:引导视线、反馈操作、讲清功能。尊重系统“减少动态效果”设置,开启时全部降级为静态。
| 名称 | 时长 | 曲线 | 用于 |
|---|---|---|---|
| 快速反馈 | 160ms | ease | 颜色变化、按下、悬停描边 |
| 常规过渡 | 280ms | (.16,1,.3,1) | 下拉菜单、页签指示条、卡片上浮、箭头位移 |
| 滚动显现 | 700ms | (.16,1,.3,1) | 区块淡入上移 24px,同组元素错开 70–80ms |
| 逐字落笔 | 900ms / 字距 55ms | (.16,1,.3,1) | 页面主标题,每页仅一处 |
| 数据生长 | 800–1400ms | (.16,1,.3,1) | 评分条、雷达图、点阵图、AI 率数字滚动 |
| 盖章 | 450ms | ease-in + 回弹 | 评级结果、关键结论 |
X图形母题
logo 的蟹由四分之一圆拼成。把它拆出来作为全站唯一的装饰图形:用于社区横幅、空状态插画,可旋转、可缩放,不加描边与阴影。数据类插图(世界地图、测评柱状图)统一用圆点阵画法。