Design System · v2

灵蟹设计规范

白纸、红印、宋体字。官网、功能落地页、插件市场共用同一套色彩、字体、控件与动效,所有页面从这里取值。

I设计原则

净

干净

白底为主,一屏只放一个重点。用留白和细线分隔,不用投影、渐变和玻璃质感。

文

有文气

全站衬线字体,标题像书名,正文像书页。中文数字、目录体、印章、稿纸是可用的修辞。

准

克制的红

蟹红只给最重要的动作和信息:主按钮、当前状态、关键数据。一屏红色面积不超过 15%。

II色彩

主色取自 logo 的三阶红。中性色带一点暖调,避免纯灰的冷硬感。

品牌红
蟹红 Red#E2311D
Red 700 · 悬停#C42613
Red 400#EF4A3F
Red 300#F47268
Red 100#FBD9D4
Red 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。

Display
60–76 / 900
从你的故事开始
H1
34–56 / 900
插件市场
H2
28–40 / 700
快速上手、立刻见效的辅助工具
H3
22 / 700
资深编辑签约逻辑模拟
正文
16 / 400 / 1.85
雨是从黄昏开始下的。沈砚把最后一盏灯点上,门外便响起三声叩门——不急,不缓,像是早就算准了时辰。
辅助
14 · 12 / 400
登录即送免费审稿额度 · 之后消耗会员 AI 额度
英文点缀
Cormorant Italic
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动效

动效只做三件事:引导视线、反馈操作、讲清功能。尊重系统“减少动态效果”设置,开启时全部降级为静态。

悬停上浮描边变墨 · 上移 3px
名称时长曲线用于
快速反馈160msease颜色变化、按下、悬停描边
常规过渡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 率数字滚动
盖章450msease-in + 回弹评级结果、关键结论

X图形母题

logo 的蟹由四分之一圆拼成。把它拆出来作为全站唯一的装饰图形:用于社区横幅、空状态插画,可旋转、可缩放,不加描边与阴影。数据类插图(世界地图、测评柱状图)统一用圆点阵画法。

XI使用约定

这样做

一屏一个主按钮;区块之间用留白和 1px 线分隔;数字用 Cormorant 衬线;中文序号(一、二、三)用于有顺序的列表。

不要这样

投影、渐变、毛玻璃卡片;多个红色主按钮并排;装饰性图标堆砌;正文用无衬线体;整屏大面积铺红。