前端记录

UI 规范不是为了高大上，是为了少踩坑

案例：

1. 先搞三原色和两种字号

别一上来就整几十个颜色变量。 我们先定了三个核心颜色：

:root{
--color-primary:#1890ff;  /* 主色，按钮、链接 */
--color-success:#52c41a;  /* 成功，比如“已支付” */
--color-danger:#f5222d;  /* 错误，比如“删除” */
}

然后字号，就两个:

--font-size-large: 16px; /* （标题、按钮文字） */  large
--font-size-normal: 14px; /* 正文 */ normal

2. 间距，就认一个单位

以前各种margin: 10px、padding: 15px……乱得像毛线团。我们定了一个设计单位：8px。所有间距，必须是 8 的倍数：

• 小间距：8px • 中间距：16px • 大间距：24px 或 32px

比如：

.card{
padding:16px;
margin-bottom:24px;
}

3. 按钮，只准有三种

1.主按钮：蓝色，用在关键操作（如“提交订单”） 2.次按钮：白色带边框，用在“取消”“返回” 3.危险按钮：红色，只用于删除、停用

# UI 小抄（前端用）

## 颜色
- 主色：var(--color-primary)
- 成功：var(--color-success)
- 危险：var(--color-danger)

## 字号
- 大：16px
- 正常：14px

## 间距
- 小：8px
- 中：16px
- 大：24px

## 按钮
- 主按钮：蓝色实心
- 次按钮：白色边框
- 危险按钮：红色边框