跳至主内容

01 · BRAND / COLOR

色彩系统

两个品牌锚点、三个主角色、四个次级色、六条审批渐变。点击任意色块复制 HEX。

60 / 30 / 10 配比

Sand 60Navy 30Purple 10

Sand 中性大底 60% · Navy 文字与结构 30% · Purple 品牌强调 10% · 次要色每视图仅 1 个且 ≤5%(营销视图可至 15%)

Purple

品牌强调 · Brand accent (10%)

Navy

文字与结构 · Text & structure (30%)

Sand

中性底色 · Neutral base (60%)

Teal

科技 · 数据正轴 · LIVE(次级色)

Gold

高价值 · VIP · 里程碑(次级色)

Rose

能量 · 营销 · NEW(次级色)

Azure

信息蓝 · 链接 · 二级 CTA(次级色)

语义映射

TokenLightDark
--backgroundsand-50 #F7F6F2navy-900 #1B1B2A
--foregroundnavy-700 #393951navy-100 #EDEDF1
--card#FFFFFFnavy-800 #2A2A3F
--primarypurple-600 #6352CEpurple-400 #9F94E8
--mutedsand-100 #EFEEEAnavy-700 #393951
--bordernavy-200 #DCDCE3navy-600 #4F4F6B
--ringpurple-500 #7C6FDBpurple-500 #7C6FDB

审批渐变

大面积渐变只允许以下 6 条,禁止即兴拼色。

Brand Core

Hero · 登录页 · 品牌封面(默认)

Aurora

科技产品 · 数据仪表盘 · AI

Gilded

旗舰版 · 会员权益 · 里程碑

Sunset

营销活动 · 发布会 · 大促

Sky

信息面板 · 合规安全 · 报表

Soft

二级页背景 · 卡片底纹 · 空状态