Explore
A2 · Five Colors
五色色彩体系
Sky
流光
天青 · 水光 · 天空倒影
Main Color
#5C6BC0
Brand Sky
Light Variant
#4FC3F7
Bocai (薄彩)
极低透明度的着色背景，配合毛玻璃模糊，营造琉璃内渗色彩效果。悬停时 alpha × 1.8。
rgba(92,107,192,0.12)Brand Gradient
温意 #FF6D3B清岚 #2EC4B6流光 #5C6BC0丹韵 #9E2A2B霞色 #8B5CF5
A6 · LiuLi Effects
琉璃四效
釉面光泽、色彩内渗、边缘折光、流光扫过——四大特效构成琉璃的视觉签名
✨
釉面光泽
顶部 45% 白色渐变
✨
釉面光泽
Glaze白色渐变覆盖容器顶部 45%，模拟琉璃釉面反光
💧
色彩内渗
💧
色彩内渗
Osmosis超薄着色 + 毛玻璃模糊，光线穿透琉璃时的色彩渗透
💎
边缘折光
💎
边缘折光
Refraction白色边框 + 彩色辉光，琉璃边缘的折射效果
🌊
流光扫过
悬停查看流光效果 →
🌊
流光扫过
Shimmer白色光带从左到右扫过，光线流过琉璃表面
Premium Card · 四效合一
L
琉璃之魂
釉面 + 内渗 + 折光 + 流光
四效叠加，方成琉璃
A3 · Typography
字体层级
HERO琉璃之光
CHAPTER薄彩哲学：透而不明
SUB琉璃的精髓在于光与影的交织
BODY
「琉璃」（liuli）是中国传统彩色釉玻璃的古老称谓，始于西周，盛于汉代。它以金属氧化物着色、高温熔融，自然流动成形——每一件琉璃都拥有不可复制的色彩过渡与光影质感。正文行高固定 1.9，颜色暖灰 #6B6560，确保阅读的呼吸感。
CAPTIONLIULIDS VISUAL IDENTITY SPECIFICATION V3.1 · 琉璃设计框架品牌视觉识别规范
Display / Headings
Noto Serif SC
衬线体，用于标题与品牌触点。搭配 Playfair Display 作为西文衬线。
Body / UI
Noto Sans SC
无衬线体，用于正文与界面。搭配 Inter 作为西文无衬线。
B2 · Components
组件示例
Sky Bocai
L
流光卡片
薄彩背景 + 毛玻璃 + 边缘折光 + 流光扫过，悬停体验琉璃质感。
Mint Bocai
M
清岚卡片
薄彩背景 + 毛玻璃 + 边缘折光 + 流光扫过，悬停体验琉璃质感。
Xia Bocai
X
霞色卡片
薄彩背景 + 毛玻璃 + 边缘折光 + 流光扫过，悬停体验琉璃质感。
D8 · Design Tokens
设计令牌
五色令牌
Brand Colors--liuli-warm#FF6D3B--liuli-mint#2EC4B6--liuli-sky#5C6BC0--liuli-wine#9E2A2B--liuli-xia#8B5CF5薄彩令牌
Bocai--bocai-rose#FFB5B9--bocai-peach#FFC7A0--bocai-mint#B4E6C7--bocai-sky#B4D6F5--bocai-lavender#D1C2EB圆角令牌
Radius--radius-sm6px--radius-md8px--radius-lg10px--radius-xl14px--radius-2xl20px动画令牌
Animation--duration-micro100ms--duration-short150ms--duration-medium200ms--duration-shimmer8s--duration-breathing3s阴影令牌
Shadow--shadow-sm0 1px 2px--shadow-md0 4px 6px--glow-sky0 0 12px--glow-warm0 0 12px--glow-xia0 0 12px间距令牌
Spacing--spacing-28px--spacing-416px--spacing-832px--spacing-1248px--spacing-2080px