非文字蛇型辅助 Logo

蛇形符号照参考图方向重整为粗圆端、方形转角、双弧蛇身的单色标。它像一个抽象化的护符,可以做角标、暗纹、贴纸和加载符号。

serpent symbolAI tuned / black
形状上方蛇身向右卷起,下方蛇身回收到右下角,整体避免像字母 E。
线条圆端点、圆转角、单一粗线权重;细笔只保留在眼和腹部暗示。
用途适合作为头像角标、水印、纹样、贴纸、加载符号和周边压印。
system relationtriangle context
关系三角主标负责名称,蛇型符号负责气质,两者同场时主标优先。
色彩默认黑白,进入三蛇叙事时分别继承竹叶青、赤练、青蓝树蟒。
比例与三角主标同排时,蛇型符号高度建议为主标高度的 72%-82%。

Logo 变体

完整组合、横排、竖版、仅文字和蛇形辅助标共同构成识别系统。正式场景优先使用三角主标,长条空间使用横版字标,蛇形标用于更自由的图案化延展。

主 Logo / 完整组合三角框 + 两排文字,适合封面、海报、主视觉。
横排组合左侧为三角主标,右侧用专用尖角横版字标,适合网页头图、视频片头、联名横幅。
SEASNAKE snake and two-row wordmark
Snake + two-row wordmark使用 logo-system 里的蛇形加两排文字资产,适合展板、片头和周边包装侧标。
PERSONAL IP
堆叠 / 竖版主标置顶,下方使用尖角横版字标,和圆端主标形成正式/动态的层级区分。
仅主标用于 favicon、社媒头像、贴纸、印章和水印。
蛇型辅助图标用于辅助识别、动态纹样和小面积周边,不单独承担主品牌命名。
仅文字横向横版专用字标按长六边比例控制外轮廓,不显示外框,适合窄条横幅、页脚和片尾。

常用尺寸系统

核心标识统一为单色线条输出。尺寸展示以实际使用场景为准:主标和蛇形标按图标尺寸管理,横版字标和组合标按宽度管理。

三角主标 头像、印章、封面角标;小于 40px 时建议只保留高对比黑白。
128px
96px
64px
40px
横版字标 网页页眉、视频片头、横幅和页脚;使用时不要加外框,保持字距完整。
220w
164w
112w
76w
蛇形辅助标 水印、贴纸、加载图标、社媒角标;它可以承担情绪,但不单独替代品牌名称。
128px
96px
64px
40px
Snake + two-row wordmark 蛇形加两排文字用于展板、片头、包装侧标和宽比例视觉,按宽度输出。
240w
180w
132w
96w
线条三类标识都保持单一主线权重,圆端点统一;横版字标因尖角结构保留 miter 收口。
颜色正式输出只使用黑、白和三套角色色。不要在同一个标识内部混用三种角色色。
比例横排组合中主三角标略高于字标;蛇形辅助标与主标同场时高度控制在 72%-82%。

字体系统

标题不再只靠“粗”和“大”建立层级,而是继承 Logo 的斜切、开放笔画、单线骨架与错位动势。正文保持中性,让品牌张力集中在最需要被记住的 20%。

55° diagonal / open stroke / monoline
brand dna / controlled chaos

危险,
被几何精确约束

三角框架负责控制,尖角字标负责攻击性,蛇形曲线负责不确定性。字体系统不复制 Logo 字形,而是继承它的结构关系。

55° / Cut标题导轨与切线沿主标斜边建立方向。
Open / Air描边字与断裂留白继承开放笔画。
Mono / Control细线框、等宽编号维持精密秩序。
Coil / Motion错位、跨栏与相位残影制造爬行动势。
A / precision
SEASNAKEsignal / system / 001

PRECISION · 精密

大尺度中性黑体、极端留白与技术编号。秩序最强,但单独使用仍容易落入通用科技品牌。

B / venom
VENOMCONTROL

VENOM · 毒性

斜切、紧字距、实心与描边双相。最接近 Logo 的尖锐感,承担 Display 与 H1。

C / serpent
SEASNAKECOILED / OFFSET / ALIVE

SERPENT · 爬行

错位、断裂、跨栏与非对称负空间。负责构图动势,避免所有标题都像标准组件。

SELECTED / B + C

最终采用 VENOM 的切角与双相文字作为字面风格,再用 SERPENT 的错位构图制造爬行感;PRECISION 保留为正文、界面和数据层的稳定底盘。

primary / sans

Inter + 系统黑体

品牌的中性承载层。英文优先 Inter,中文依次使用苹方与微软雅黑;正文、按钮和界面保持清晰,Display 与 H1 再叠加品牌构图。

SEASNAKE 012345
潜行 · 感知 · 更新
editorial / serif

系统宋体

叙事层字体。用于引言、短引用和章节开场;不用于按钮、长篇正文或数据界面,单次尽量控制在三行以内。

变化不是噪声,
而是留下路径的方式。
data / mono

SF Mono + Consolas

技术与参数字体。用于 HEX、尺寸、时间、代码、编号和英文微标签;中文说明仍然回到主无衬线字体。

#D9F01A
1280×720 / 30FPS
SEASNAKE / PERSONAL IP / 001
潜行于变化之中

Observe the current. Keep the form alive.
观察流动,让形态保持生命。

Display 112 / 52Weight 900Leading 0.84Tracking -0.065emSkew -6°
responsive scale桌面 / 移动双尺度

字号使用 clamp 在两个端点之间流动。桌面值适用于 1440px 视觉基准,移动值适用于 390px;正文以舒适阅读为先,不随屏幕无限缩小。

规格顺序:字号、字重、行高、字距。中文标题不要额外拉开字距,英文全大写标签才使用正字距。

品牌标题 / Display--type-display-size
潜行于变化之中
Desktop / Mobile
112 / 52 px
Weight
900
Leading
0.84
Tracking
-0.065em
H1 / 页面主标题--type-h1-size
三蛇视觉系统
Desktop / Mobile
80 / 44 px
Weight
900
Leading
0.92
Tracking
-0.05em
H2 / 章节标题--type-h2-size
感知与形态
Desktop / Mobile
56 / 34 px
Weight
800
Leading
1.00
Tracking
-0.035em
H3 / 模块标题--type-h3-size
青蓝树蟒
Desktop / Mobile
40 / 28 px
Weight
750
Leading
1.15
Tracking
-0.018em
H4 / 卡片标题--type-h4-size
动态视觉语言
Desktop / Mobile
28 / 22 px
Weight
700
Leading
1.30
Tracking
-0.005em
H5 / 小标题--type-h5-size
角色色使用原则
Desktop / Mobile
20 / 18 px
Weight
700
Leading
1.40
Tracking
0.01em
副标题 / Subtitle--type-subtitle-size
观察流动,让形态保持生命。
Desktop / Mobile
26 / 20 px
Weight
500
Leading
1.55
Tracking
0.005em
引言 / Lead--type-lead-size
变化不是噪声,而是留下路径的方式。
Desktop / Mobile
24 / 19 px
Weight
500
Leading
1.75
Tracking
0.02em
大正文 / Body L--type-body-lg-size
三角主标负责正式识别,蛇形符号负责情绪和图案延展。
Desktop / Mobile
18 / 17 px
Weight
400
Leading
1.80
Tracking
0
正文 / Body--type-body-size
三套色系不只是配色,而是同一套 IP 在不同状态下的表达。
Desktop / Mobile
16 / 16 px
Weight
400
Leading
1.75
Tracking
0
辅助正文 / Body S--type-body-sm-size
用于说明文字、卡片描述、次级信息和移动端辅助内容。
Desktop / Mobile
14 / 14 px
Weight
400
Leading
1.70
Tracking
0
标签 / Caption--type-caption-size
Bamboo Viper / Primary State
Desktop / Mobile
12 / 12 px
Weight
750
Leading
1.40
Tracking
0.14em
editorial composition
“蛇没有固定的终点,只有不断更新的路径。”

引言和短引用可以使用宋体,制造生物感与叙事停顿;后续说明立即回到无衬线正文,让内容保持清晰、克制和可持续阅读。

interface composition
ACTIVE FORM / 02

竹叶青 · 本体状态

默认品牌角色,用于主状态、关键按钮、标题光感与正式视觉中的记忆点。

#D9F01A24 FPS01:08
20% 张力 / 80% 秩序

切角、描边和错位只用于 Display、H1、章节开场和品牌数字;正文与操作界面保持中性。

一屏一个攻击点

实心/描边双相、斜切导轨、错位跨栏三者最多选择两种,避免每一层都同时发力。

正文控制行宽

中文正文建议每行约 28–38 个汉字,行高 1.70–1.80;避免大段居中排版。

Logo 不用字体重打

SEASNAKE 专用字标始终调用 SVG 资产;这套字体系统只管理信息文字,不替代品牌 Logo。

下载字体系统 CSS

三蛇色系

三套色系对应三种状态:竹叶青是本体,青蓝树蟒是感知,赤练是爆发。颜色进入背景、边缘光、UI 和故事章节,不直接覆盖正式主标。

青蓝树蟒

底层感知形态。适合动态背景、交互 UI、冷感科技内容和长时间观看的数字界面。

#22C6C5#1DA4AB#6DD5DE

竹叶青

本体色,也是最强记忆色。用于主状态、外框光感、关键按钮和角色叙事的顶层。

#D9F01A#BCC94E#E2F072

赤练

中层爆发形态。用于强情绪海报、夜间视觉、周边包装或需要更危险感的场景。

#F1265F#C41F4D#F26089
origin / bamboo viper

竹叶青

本体色,代表敏锐、隐蔽、判断和自我更新。它用于默认状态、高亮按钮、个人签名和主视觉边缘光。

使用场景

第一屏、默认角色、主按钮、标题光感和正式视觉里的记忆点。

sensor / blue tree python

青蓝树蟒

感知形态,贴近数字界面、光线、水面和屏幕。它代表冷静、观察、编辑、计算和长时间潜伏。

使用场景

网页背景、UI、动态图层、数据界面、预览页和偏科技感内容。

flare / red chain

赤练

爆发形态,更直接、更热、更危险。它用于表达情绪爆发、冲突、舞台感和压迫性的画面。

使用场景

海报、封面、警示态、夜间视觉、片头冲击帧和周边包装。

VI 延展应用

应用层把三角主标当作骨架,把蛇形符号当作纹理和性格。正式信息保持克制,三蛇色系只在需要情绪、层级和记忆点时出现。

名片 / 个人签名

文字信息保持克制,三角主标作为正面图章;蛇形符号作为背面暗纹或局部压印,带一点危险感但不抢主标。

SEASNAKE personal IP / visual system / motion identity

头像 / 小图标

头像场景优先使用完整三角主标;蛇形符号可作为辅助头像、贴纸、动态加载图标和三蛇角色头像。

浏览器 / 横幅背景

三角主标从两侧裁切进入,中间保留内容区域;蛇形符号居中作为低透明度暗纹,颜色随当前角色切换。

使用标准

以清晰度为底线:三角主标负责正式露出,横版字标负责长条信息,蛇形符号负责辅助氛围。三者不要在小尺寸里互相堆叠。

安全留白

最小尺寸

96px
56px
32px
18px
留白 X主三角 logo 四周最少保留外框线宽 4 倍的空间;蛇形标四周至少保留 2 倍线宽。
最小尺寸完整主标建议不小于 40px;横版字标不小于 76px 宽;蛇形标不小于 40px。
横排比例横排组合中,三角主标高度约为右侧字标高度的 1.05-1.2 倍,分隔线保持低透明。
背景用法大面积背景可裁切主标外框,但内部文字必须完整;蛇形符号可做暗纹和边角叠影。