SuperCLI

SuperCLI 品牌与设计规范 · v1

一个标记。
一套共同语言。

从第一次发现,到复制下一条命令。
统一的视觉、清晰的路径、有分寸的动效。

品牌识别

S,是 Super,也是下一条命令。

用一条折返的几何带组成 S,保留命令行的斜切节奏;右下角的短横是输入光标。独立使用也能识别,不依赖终端窗口的外框。

SuperCLI 蓝底白色 S 标记SuperCLI主标记 · Klein Blue
SuperCLI 单色 S 标记
16 像素图标24 像素图标32 像素图标
单色版本与小尺寸应用

图形最小 16 px;四周留白至少为图形宽度的 ¼。不拉伸、不旋转、不添加阴影。厂商图标使用各自原始品牌资产。

品牌蓝#002FA7
正文#19191D
次级表面#F7F7F8
页面#FFFFFF
标题 / Helvetica Neue · 系统中文

下一条命令,更多可能。

正文 / 同一字体家族

工具名称优先,说明其次。数字使用等宽数字;命令使用系统等宽字体。字号层级与色彩共同传达主次。

npm install -g wrangler

信息架构与页面流程

发现 → 比较 → 使用 → 贡献

所有工具进入同一目录。分类与厂商用于检索,不设置“官方 / 社区”两套入口。

以上是当前可运行的页面与视图。首页、目录和贡献区在同一页;详情通过 URL 参数直达,品牌规范独立成页。

组件与状态

每一步,都有明确回应。

按钮、搜索、空结果、弹窗与反馈共享令牌。这里的演示与目录使用同一份样式。

主操作与次操作

探索目录

悬停提示意图,焦点保持可见,按下给予轻微反馈。禁用状态不接受点击。

搜索与空结果

在目录中,筛选结果会同步到网址,方便分享。

查看真实空结果状态 →

详情与来源

原生模态管理焦点,Escape 关闭,关闭后回到触发按钮。来源与安装提示始终可读。

打开真实详情

加载与失败

目录随页面静态加载,不使用模拟加载动画。没有 GitHub 指标时展示“未计分”;复制失败时保留可手动复制的命令。

查看工具信息 →

动效规则

让变化被看见,让操作不停顿。

只为进入、聚焦、确认服务。没有自动轮播、打字循环或跟随鼠标的装饰。

快起,慢停。

150 ms:按钮反馈
240 ms:卡片与详情进入
360 ms:首页首屏进入

cubic-bezier(0.16, 1, 0.3, 1)

位移仅使用 transform 与 opacity。开启系统“减弱动态效果”后,位移与进场动画停止;所有操作依旧可用。