SUISUINIAN · IDENTITY · GUIDELINES
Brand Guidelines
Async Loop mark 生产规范、SVG 源码、留白规则、色彩、动效与禁用案例。本页即可作为 1-page guideline 直接交付。 stroke 160 主版本,尺寸 ≤32px 自动切到 stroke 200 加粗版。
01
SVG 源
· 单一权威版本 · 1024 master
<!-- suisuinian mark · master 1024×1024 · stroke 160 --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"> <path d="M 232 512 A 280 280 0 0 1 792 512" fill="none" stroke="currentColor" stroke-width="160"/> <path d="M 200 564 A 280 280 0 0 0 760 564" fill="none" stroke="currentColor" stroke-width="160"/> <circle cx="496" cy="538" r="70" fill="currentColor"/> <circle cx="496" cy="538" r="23" fill="var(--bg, #FFFFFF)"/> </svg>
所有颜色用
currentColor,在 CSS / HTML 里用 color: #E85A6E 控制珊瑚版本。
内白圆 fill 用 var(--bg) 适配深底(深底场景下设 --bg: #0A0A0C)。
小尺寸 ≤32px 切到 stroke 200 · axis r 80/26。
02
留白规则
· x = 弧 stroke 一半
x
留白规则
最小留白 = x(弧 stroke 一半,1024 网格中即 80px)。mark 周围 x 范围内不能放任何元素 — 文字、按钮、其他 logo、装饰线都不行。
当被放进 squircle / 按钮 / 圆角矩形时,容器内边距至少为 1.5 × x。
03
色彩 spec
· 珊瑚是稀缺资源
Coral · Light
#E85A6E
浅底主品牌色
Coral · Dark
#F47D8E
深底使用 · 提亮
Label · 主
#0A0A0C
正文 · 主 mark
Label · 次
#3A3A3C
78% black
Surface
#FAFAF7
品牌底 · 偏暖白
Inverse
#FFFFFF
深色 mark 用
04
动效 motion
· 只允许两种 · 不要发明新动效
① 启动 reveal · 280ms ease-out
中心轴先 pop → 上弧从左向右描出 → 下弧从右向左描出,共 280ms。仅用于 app launch、空状态、品牌片头。
② Processing 脉冲 · 1.6s loop
中心轴 opacity 0.5 ↔ 1,弧不动。表示「BFF 正在处理」。仅在 system status 或 menu bar 状态时使用。
05
禁用案例
· 出现以下任一项即不通过
不要旋转
静态形态本身已是对称组合
不要拉伸
弧线比例承担了语义,扭曲后崩塌
不要加渐变
单一品牌色 + 中性
不要加阴影
flat / 工具感的核心
不要拆开染色
每条弧 / 轴必须同色
不要变细
stroke 160 与 mark 比例锁定
不要外加圆框
与系统 squircle 重叠
不要置于复杂底纹
留白 ≥ x 是最低要求
06
使用清单 do
· 正确示范
黑 mark on 白
默认 · 文档 · web header
珊瑚 mark on 白
品牌强调 · 海报 · 节日
白 mark on 黑
dark mode / dock
白 mark on 珊瑚
AppIcon promo · 启动屏
07
文件交付清单
· 给开发 / 设计师 / 印刷
mark.svg 1024 master · stroke 160 · currentColor
mark-small.svg ≤32px 用 · stroke 200 · axis r 80/26
mark-black.svg 导出版 · #0A0A0C
mark-white.svg 深底用 · #FFFFFF
mark-coral.svg #E85A6E 固定
appicon-1024-coral-on-white.png主 AppIcon · iOS / macOS
appicon-1024-white-on-coral.png节日 promo
appicon-1024-dark.png 暗色 dock
lockup-horiz.svg mark + suisuinian + 碎碎念
lockup-vert.svg 竖排 · 狭窄场景
og-1200x628.png OG / Twitter card
guidelines.pdf 本页输出
08
版权与法务
· 预防撞型
注册前需在主要市场(US / EU / CN)做 trademark search:类别 09(software)+ 42(SaaS)+ 35(business consulting)。
关键比对对象:Anthropic 花瓣 / OpenAI 蓓蕾 / Claude head / Google G / Notion 字母组合 / Linear 渐变 L。
视觉上当前 mark 是「双弧 + 轴」结构,与上述均不撞;但建议法务在注册前做正式检索报告。