SuperCLI 品牌与设计规范 · v1
一个标记。
一套共同语言。
从第一次发现,到复制下一条命令。
统一的视觉、清晰的路径、有分寸的动效。
品牌识别
S,是 Super,也是下一条命令。
用一条折返的几何带组成 S,保留命令行的斜切节奏;右下角的短横是输入光标。独立使用也能识别,不依赖终端窗口的外框。
图形最小 16 px;四周留白至少为图形宽度的 ¼。不拉伸、不旋转、不添加阴影。厂商图标使用各自原始品牌资产。
下一条命令,更多可能。
工具名称优先,说明其次。数字使用等宽数字;命令使用系统等宽字体。字号层级与色彩共同传达主次。
npm install -g wrangler
信息架构与页面流程
发现 → 比较 → 使用 → 贡献
所有工具进入同一目录。分类与厂商用于检索,不设置“官方 / 社区”两套入口。
品牌主张、真实工具示例、用途入口。
开始探索 →分类与排行缩小选择范围关键词、厂商、用途组合筛选,明确排序与快照。
查看云平台 →工具详情决定如何开始用途、安装、来源、许可证与可分享的直达链接。
查看 Wrangler →贡献流程把经验留给别人补充资料 → 发起 PR → 本地核验 → 人工合并。
查看贡献方式 →以上是当前可运行的页面与视图。首页、目录和贡献区在同一页;详情通过 URL 参数直达,品牌规范独立成页。
组件与状态
每一步,都有明确回应。
按钮、搜索、空结果、弹窗与反馈共享令牌。这里的演示与目录使用同一份样式。
动效规则
让变化被看见,让操作不停顿。
只为进入、聚焦、确认服务。没有自动轮播、打字循环或跟随鼠标的装饰。
快起,慢停。
150 ms:按钮反馈
240 ms:卡片与详情进入
360
ms:首页首屏进入
cubic-bezier(0.16, 1, 0.3, 1)
位移仅使用 transform 与 opacity。开启系统“减弱动态效果”后,位移与进场动画停止;所有操作依旧可用。