ZartUI Mobile

色彩体系

9 组基础色板 × 10 阶色标（10–100）+ 中性灰阶 G0–G100（11 级），覆盖主品牌色、语义功能色与文字颜色。

基础色板 10–100
红色 Red — 错误 / 危险 / 删除 基准 60: #F26450
10#FFECE8
20#FDD5CE
30#FCBAAA
40#F99F8C
50#F58971
60#F26450
70#D5493B
80#B0312B
90#8C1D1E
100#661111
橙红 RedOrange — 强调 / 促销标签 基准 60: #FF6B1A
10#FFF1E8
20#FFDCC2
30#FFC69E
40#FFA975
50#FF8F4D
60#FF6B1A
70#D94F15
80#B33710
90#8C220C
100#661308
橙色 Orange — 警示 / 待处理 基准 60: #FF8A00
10#FFF4E8
20#FFE6C4
30#FFD59E
40#FFC275
50#FFAD4D
60#FF8A00
70#D96E00
80#B35200
90#8C3700
100#662100
绿色 Green — 成功 / 通过 / 完成 基准 60: #06A17F
10#E8FAF1
20#C2F0D9
30#9AE6BF
40#72D9A5
50#4DCC8C
60#06A17F
70#058A6B
80#047357
90#035C43
100#02452F
青绿 Cyan — 信息 / 提示 基准 60: #00B0A3
10#E8F7F5
20#C2EAE5
30#9EDDD6
40#75D0C5
50#4DC3B4
60#00B0A3
70#00948A
80#007870
90#005C57
100#00403D
蓝色 Blue — 主品牌色 / 链接 / 选中 基准 60: #3388FF
10#E8F1FF
20#C2D8FF
30#9EBFFF
40#75A3FF
50#4D88FF
60#3388FF
70#2B72D9
80#235CB3
90#1B478C
100#133266
深蓝 Indigo — 正文文字 / 深色背景 基准 60: #223355
10#E8EDF5
20#C2CDE5
30#9EADD5
40#758EC5
50#4D6EB4
60#223355
70#1C2B47
80#172339
90#111C2B
100#0B141D
紫色 Purple — 特殊标记 / VIP 基准 60: #8040FF
10#F3ECFF
20#E0CEFF
30#CDB0FF
40#B88EFF
50#A46DFF
60#8040FF
70#6C35D9
80#582AB3
90#44208C
100#301666
品红 Pink — 活动 / 营销 基准 60: #FF4096
10#FFECF5
20#FFCEE4
30#FFB0D3
40#FF8EC2
50#FF6DB0
60#FF4096
70#D9357E
80#B32A67
90#8C204F
100#661538
中性色 G0–G100
G0#FFFFFF
G10#F7F8FA
G20#F1F3F5
G30#E9ECF2
G40#D0D3DB
G50#B0B4C0
G60#9095A3
G70#6B6F7A
G80#484C55
G90#262A30
G100#1A1E26

中性色分层用法

语义色
主色 Primary
--color-primary
#3388FF
来源: blue.60
主色浅底
--color-primary-light
#E8F1FF
来源: blue.10
成功 Success
--color-success
#06A17F
来源: green.60
警示 Warning
--color-warning
#FF8A00
来源: orange.60
危险 Danger
--color-danger
#F26450
来源: red.60
信息 Info
--color-info
#00B0A3
来源: cyan.60
正文文字
--color-text-primary
#223355
来源: indigo.60
辅助文字
--color-text-secondary
#6B6F7A
来源: neutral.G70
CSS 变量
/* 主色 — blue.60/.70/.80/.10 */
--color-primary:        #3388FF;
--color-primary-hover:   #2B72D9;
--color-primary-active:  #235CB3;
--color-primary-light:   #E8F1FF;

/* 语义 */
--color-success:         #06A17F;   /* green.60 */
--color-success-light:   #E8FAF1;   /* green.10 */
--color-warning:         #FF8A00;   /* orange.60 */
--color-warning-light:   #FFF4E8;   /* orange.10 */
--color-danger:          #F26450;   /* red.60 */
--color-danger-light:    #FFECE8;   /* red.10 */
--color-info:            #00B0A3;   /* cyan.60 */
--color-info-light:      #E8F7F5;   /* cyan.10 */

/* 文字 */
--color-text-primary:    #223355;   /* indigo.60 */
--color-text-secondary:  #6B6F7A;   /* neutral.G70 */
--color-text-hint:       #B0B4C0;   /* neutral.G50 */
--color-text-link:       #3388FF;
--color-text-danger:     #F26450;
--color-text-warning:    #FF8A00;
--color-text-success:    #06A17F;

/* 背景 — G0 / G10 / G20 */
--color-bg-white:        #FFFFFF;
--color-bg-page:         #F7F8FA;
--color-bg-secondary:    #F1F3F5;

/* 描边 — G30 / G40 / G50 */
--color-border-light:    #E9ECF2;
--color-border:          #D0D3DB;
--color-border-medium:   #B0B4C0;

注意事项

返回组件首页