Weilanx Design System · v1.0

蔚蓝个人品牌
Design System

一套来自蔚蓝色深空的个人品牌设计语言。从颜色、字体、组件到动效与文案语气 —— 让每一个由我做出来的产品,看一眼就知道是 蔚蓝 的作品。

4设计哲学 9章节规范 60+组件 Tokens v1.0迭代版本
weilax.com/system-design
Typography
Aa
SF Pro · Playfair · PingFang
Brand Color

蔚蓝深空
渐变体系

Motion
Orbit · Spin · Twinkle
01 · Design Philosophy

四大设计哲学

不是把好看堆在一起,而是用四个一致的原则去做每一个决定。

01 / Four

Agreement

一致 · 协调

同一种语气、同一组颜色、同一套节奏 —— 跨越作品集、博客、社媒账号、视频片头,是一个人。

一致是品牌的灵魂 ✦
02 / Four

Rhythm

韵律 · 节奏

间距按 4 的倍数走,字号按比例跳;动效有呼吸,星点有闪烁。视觉是有节拍的。

跳动的韵律构建蔚蓝的美感 ✦
03 / Four

Clear

清晰 · 直接

不绕弯子,不堆术语。每一段文字都问自己:能不能用一句话讲完?每一个按钮都知道下一步去哪。

清晰即效率 ✦
04 / Four

Open

开放 · 包容

所有作品开源,所有想法公开。AI 时代,独立开发者最好的护城河是「持续把自己暴露在阳光下」。

开放是最好的思路 ✦
02 · Color System

蔚蓝色彩体系

名字就是颜色 ——「蔚蓝」从深空 #0a0f4a 一路渐变到清晨 #c8d2ff,配上生命绿 #a3ffcd。

Primary · 主色

Weilanx Blue

名字本身。从深邃宇宙到清晨破晓,这条渐变是整个品牌的视觉骨架。

Deep · 深空#0a0f4a
Brand · 蔚蓝#1a3cff
Light · 晨曦#7d92ff

Accent · 生命绿Life Mint

#a3ffcd / #1ec79b

Ink · 文字色Deep Ink

#0c1024 / #3b4068
蔚蓝Blue · 50→900
50
100
200
300
400
500
600
700
800
900
生命绿Mint · 50→900
50
100
200
300
400
500
600
700
800
900
墨色Ink · Neutral
50
100
200
300
400
500
600
700
800
900
功能色Semantic
INFO
SUC
WRN
DNG
SKY
ATR
OAI
WHT
BLK
TPR
03 · Typography

四套字体体系

SF Pro 立骨架,PingFang 承中文,Playfair 当口号,Caveat 留手感,JetBrains Mono 写代码。

Display · 口号字体Playfair Display · Italic
Aa

Playfair Display Italic

所有 slogan、设计哲学副标题、品牌引用语必用。它是蔚蓝的「文学性」—— 在严肃的工程语境里留一点诗。

Lead AI Build everything
Hand · 手写Caveat · 500/700
Aa

Caveat 手写体

仅用于「人情味」位置:四个哲学的副标语、感谢页留言、年度回顾签名。永远是蓝紫色系,永远不超过 24px。

Made by Weilanx ✦
Mono · 等宽JetBrains Mono · SF Mono
{x}

JetBrains Mono

仅用于:色值、命令行、代码片段、HEX/RGB、数据 metric。绝不用于正文。

#1a3cff claude code .
H1 Display96px800蔚蓝个人主页Hero Title
H2 Section60px800四大设计哲学Section Heading
H3 Card30px800蔚蓝色彩体系Card Title
H4 Sub22px700组件样例展示Sub Heading
Body16px500正文使用 SF Pro 与 PingFang 混排Paragraph
Small14px500辅助说明文字Caption
Tag12px700UPPERCASE LETTER · SPACEDEyebrow
05 · Components

通用组件

所有元素圆角胶囊化、玻璃质感优先、蔚蓝渐变是默认强调色。

Button · 按钮

Primary · Ghost · Dark

Pill / Tag · 胶囊标签

4 Variants
蔚蓝主色 生命绿色 深空 警示

Glass Card · 玻璃卡片

Backdrop Blur 24px
✦ Feature
AI Coding

Claude Code + Cursor 让独立开发的速度提升 10x。

Light Card · 白底卡片

Default
每周 Newsletter

每周一封,聊聊 AI、独立开发、和工具背后的设计思考。

IndieAITools

Input · 输入控件

Focus Ring

Avatar · Rating · Progress

Misc
L x A +9
06 · Motion

韵律动效系统

动效不只是装饰,是节奏的可视化。三条曲线,覆盖 95% 的场景。

01 / Curve
蔚蓝缓动 · Weilanx Ease

默认曲线。所有 hover、page transition、卡片悬浮都用它。

cubic-bezier(.2,.8,.2,1)350ms
02 / Curve
线性循环 · Linear Loop

用于持续运动:虚线轨道、星点旋转、渐变文字 shimmer。

linear / infinite9s – 28s
03 / Curve
呼吸闪烁 · Pulse

用于状态点(生命绿点、Live 信号)、星点闪烁、按钮 focus ring。

ease-in-out1.6s – 3s
07 · Icon

线性图标风格

24×24 网格、2px 描边、圆头圆角、几何优先。Hover 时填充蔚蓝。

08 · Design Tokens

间距 · 圆角 · 阴影

所有数值按 4 的倍数推导,让节奏从「看起来对」变成「测出来对」。

Spacing

间距体系

xs4px
sm8px
md12px
base16px
lg24px
xl32px
2xl48px
Radius

圆角体系

xs4px
sm8px
md12px
lg18px
xl24px
pill999px
Elevation

阴影分层

sh-1subtle
sh-2card
sh-3modal
sh-bluebrand glow
sh-lifeaccent glow
09 · Voice & Tone

蔚蓝语气规范

写技术的时候像朋友讲事,写文学的时候像深空有诗。永远不要有 AI 味。

Do · 这样写

用 Claude Code 把想法做成产品,每一个产品都是 0 到 1。

动词 + 具体工具 + 结果。短句、口语、不堆形容词。让人一看就知道你在干什么。

×Don't · 不要这样

借助先进的 AI 技术赋能高效的创新型解决方案。

堆术语、用「赋能/打通/闭环」、把一句话切成五段还塞不进重点 —— 这是 AI 味,是品牌的最大敌人。

Lead AI · Build everything

— 蔚蓝 · Weilanx ✦